/* ==========================================================================
   Vésica · Gestión de Alumnas
   Todo va dentro de #vesica-app para no tocar los estilos del tema.
   ========================================================================== */

/* ---------- tipografías ----------
   Se sirven desde este mismo servidor, no desde Google. Cuando venían de
   fonts.gstatic.com, cada vez que una alumna abría su horario la dirección
   IP de su móvil llegaba a Google sin que ella lo supiera ni lo hubiera
   consentido; eso es una cesión de datos a un tercero y no tenemos base
   legal para hacerla. Los archivos son variables (un archivo cubre todos
   los grosores) y llevan licencia SIL Open Font, cuyo texto está en
   assets/fonts/. Las rutas son relativas a este archivo, así que siguen
   valiendo aunque cambie el dominio o la carpeta del plugin.

   Cada tipografía va en dos trozos. El latino básico cubre el español, el
   catalán y el portugués. El extendido sólo se descarga si en la pantalla
   aparece de verdad un carácter que lo necesite: si ninguna alumna se
   llama Małgorzata, esos 118 KB no se piden nunca. Eso lo decide el
   navegador leyendo el unicode-range, no nosotros. */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/fraunces-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/fraunces-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

#vesica-app{
  --v-cream:#faf8f3;
  --v-olive:#2f2e26;
  --v-olive-soft:#5f5c4a;   /* oscurecido para cumplir contraste AA */
  --v-terracotta:#645f42;   /* botón principal: antes 3.6:1, ahora >5:1 */
  --v-terracotta-soft:#7d7a5e;
  --v-beige:#f2ddc7;
  --v-beige-dark:#e0c7ab;
  --v-sage:#4e5a3a;
  --v-sage-soft:#e4e8da;
  --v-danger:#8f4232;
  --v-danger-soft:#f1ded7;
  --v-gold:#6f5817;
  --v-gold-soft:#efe5c4;
  --v-radius:14px;

  background:var(--v-cream);
  color:var(--v-olive);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  max-width:1100px;
  margin:0 auto;
  padding:24px 20px 48px;
  border-radius:var(--v-radius);
}
#vesica-app *{box-sizing:border-box;}
#vesica-app h1,#vesica-app h2,#vesica-app h3{
  font-family:'Fraunces',Georgia,serif;font-weight:600;margin:0;color:var(--v-olive);
  letter-spacing:.2px;text-transform:none;
}
#vesica-app p{margin:0 0 8px;}
#vesica-app a{color:var(--v-terracotta);}

.vesica-cargando{padding:40px;text-align:center;color:#6f6c58;font-family:'Inter',sans-serif;}

/* ---------- cabecera ---------- */
#vesica-app .v-header{
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  margin-bottom:20px;flex-wrap:wrap;
}
#vesica-app .v-header h1{font-size:24px;}
#vesica-app .v-header .v-sub{margin:2px 0 0;font-size:12.5px;color:var(--v-olive-soft);}
#vesica-app .v-whoami{
  background:var(--v-olive);color:var(--v-cream);border-radius:12px;
  padding:9px 14px;font-size:12.5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
#vesica-app .v-whoami strong{font-weight:600;}

/* ---------- pestañas ---------- */
#vesica-app .v-tabs{display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--v-beige-dark);flex-wrap:wrap;}
#vesica-app .v-tab{
  padding:10px 16px;font-size:13.5px;font-weight:600;color:var(--v-olive-soft);
  cursor:pointer;border-bottom:2px solid transparent;user-select:none;
}
#vesica-app .v-tab.is-active{color:var(--v-terracotta);border-bottom-color:var(--v-terracotta);}
#vesica-app .v-foot{text-align:right;margin:-8px 0 16px;font-size:11px;color:var(--v-olive-soft);}
#vesica-app .v-viendo{
  background:var(--v-gold-soft);color:var(--v-gold);border:1px solid var(--v-gold);
  border-radius:10px;padding:9px 14px;margin:-6px 0 14px;font-size:12.5px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between;
}
#vesica-app .v-viendo a{color:var(--v-gold);font-weight:600;}

/* ---------- tarjetas ---------- */
#vesica-app .v-card{
  background:#fff;border:1px solid var(--v-beige-dark);border-radius:var(--v-radius);
  padding:18px 20px;margin-bottom:16px;
}
#vesica-app .v-card h3{font-size:16px;margin-bottom:8px;}
#vesica-app .v-muted{color:var(--v-olive-soft);font-size:12.5px;}
#vesica-app .v-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:820px){#vesica-app .v-grid2{grid-template-columns:1fr;}}

/* ---------- formularios ---------- */
#vesica-app select,
#vesica-app input[type=text],
#vesica-app input[type=email],
#vesica-app input[type=number],
#vesica-app input[type=time]{
  font-family:'Inter',sans-serif;font-size:13.5px;padding:8px 10px;
  border:1px solid var(--v-beige-dark);border-radius:8px;
  background:var(--v-cream);color:var(--v-olive);width:auto;max-width:100%;
  line-height:1.4;height:auto;margin:0;box-shadow:none;
}
#vesica-app input:focus,#vesica-app select:focus{outline:2px solid var(--v-terracotta);outline-offset:1px;}
/* El min-width y el width se resetean a propósito: muchos temas (el de Vésica
   entre ellos) fuerzan botones de 220 px de ancho mínimo, y aquí hacen falta
   botones pequeños que quepan varios en una misma fila de la tabla. */
#vesica-app button{
  font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;border:none;border-radius:8px;
  padding:9px 14px;cursor:pointer;transition:opacity .15s;line-height:1.2;
  text-transform:none;letter-spacing:0;box-shadow:none;height:auto;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:0;width:auto;max-width:100%;
}
#vesica-app input,
#vesica-app select,
#vesica-app textarea,
#vesica-app .v-enlace-boton{min-width:0;}
#vesica-app button:hover{opacity:.85;}
#vesica-app button:disabled{opacity:.4;cursor:not-allowed;}
#vesica-app .v-btn-primary{background:var(--v-terracotta);color:#fff;}
#vesica-app .v-btn-ghost{background:var(--v-beige);color:var(--v-olive);}
#vesica-app .v-btn-danger{background:var(--v-danger-soft);color:var(--v-danger);}
#vesica-app .v-btn-sage{background:var(--v-sage-soft);color:var(--v-sage);}
#vesica-app .v-small{font-size:11.5px;padding:6px 10px;}
#vesica-app .v-field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;}
#vesica-app .v-field label{font-size:11.5px;font-weight:600;color:var(--v-olive-soft);}
#vesica-app .v-inline{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
#vesica-app .v-checklist{
  display:flex;flex-direction:column;gap:5px;border:1px solid var(--v-beige-dark);
  border-radius:8px;padding:9px 11px;background:var(--v-cream);
}
#vesica-app .v-checklist label{
  font-size:12.5px;display:flex;align-items:center;gap:7px;font-weight:400;color:var(--v-olive);margin:0;
}

/* ---------- cinta de sesión ---------- */
#vesica-app .v-ribbon{
  border:1px solid var(--v-beige-dark);border-radius:12px;padding:12px 14px;margin-bottom:12px;
  display:flex;flex-direction:column;gap:10px;
}
#vesica-app .v-ribbon-cab{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
#vesica-app .v-ribbon .v-when{min-width:124px;}
#vesica-app .v-ribbon .v-when .v-day{font-family:'Fraunces',serif;font-size:15px;}
#vesica-app .v-ribbon .v-when .v-time{font-size:11.5px;color:var(--v-olive-soft);}
#vesica-app .v-ribbon .v-name{font-size:13px;font-weight:600;flex:1;min-width:120px;}
#vesica-app .v-occupancy{font-size:11.5px;color:var(--v-olive-soft);white-space:nowrap;}

/* ---------- pase de lista ----------
   Una fila por persona con el nombre completo. Antes eran círculos con dos
   iniciales: «Marta Ferrer» y «María Fernández» daban las mismas, y el
   nombre entero sólo salía en el tooltip del ratón, que en un móvil no
   existe. El estado va además escrito, nunca sólo en color. */
#vesica-app .v-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--v-beige);}
#vesica-app .v-persona{
  display:flex;align-items:center;gap:10px;
  padding:8px 2px;border-bottom:1px solid var(--v-beige);
}
#vesica-app .v-persona-nombre{flex:1;min-width:0;font-size:14px;overflow-wrap:anywhere;}
#vesica-app .v-persona.no-show .v-persona-nombre{color:var(--v-olive-soft);}
#vesica-app .v-estado{
  flex:0 0 auto;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;
  text-transform:none;letter-spacing:0;
}
#vesica-app .v-estado.confirmado{background:var(--v-sage-soft);color:var(--v-sage);}
#vesica-app .v-estado.recuperacion{background:var(--v-gold-soft);color:var(--v-gold);}
#vesica-app .v-estado.dropin{background:var(--v-terracotta-soft);color:#fff;}
#vesica-app .v-estado.no-show{background:var(--v-olive);color:var(--v-cream);}
#vesica-app .v-persona .v-marcar{flex:0 0 auto;}
#vesica-app .v-lista-vacia,
#vesica-app .v-libres{
  padding:8px 2px;font-size:12.5px;color:var(--v-olive-soft);border-bottom:1px solid var(--v-beige);
}
#vesica-app .v-lista li:last-child{border-bottom:0;}
#vesica-app .v-canceladas{
  font-size:12.5px;color:var(--v-danger);background:var(--v-danger-soft);
  padding:8px 11px;border-radius:9px;
}
#vesica-app .v-estado.espera{background:var(--v-gold-soft);color:var(--v-gold);}

/* ---------- lista de espera ---------- */
#vesica-app .v-espera-cola{
  font-size:12.5px;color:var(--v-gold);background:var(--v-gold-soft);
  padding:9px 11px;border-radius:9px;display:flex;flex-direction:column;gap:3px;
}
#vesica-app .v-espera-cola .v-muted{font-size:11.5px;color:var(--v-gold);opacity:.85;}
#vesica-app .v-fila-espera{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 0;border-bottom:1px solid var(--v-beige);
}
#vesica-app .v-fila-espera > div:first-child{flex:1;min-width:200px;}
#vesica-app .v-fila-espera:last-child{border-bottom:0;}
/* La fecha de la que hablaba el correo. Quien llega desde «mañana tienes la
   meditación del 12» tiene que ver el 12, no una lista donde buscarlo. Fondo
   y una barra a la izquierda, sin animación: un parpadeo se pierde si la
   página tarda en cargar y encima marea. */
#vesica-app .v-fila-espera.es-lo-tuyo{
  background:var(--v-beige);border-radius:10px;
  box-shadow:inset 3px 0 0 var(--v-terracotta);
  padding-left:12px;padding-right:12px;border-bottom-color:transparent;
}

/* Cancelar fuera de plazo: se agrupa con su aviso para que no se pulse
   por inercia creyendo que es una cancelación normal. */
#vesica-app .v-fuera-plazo{
  display:flex;flex-direction:column;gap:7px;align-items:flex-start;
  border:1px solid var(--v-danger);border-radius:10px;padding:10px 12px;
  background:var(--v-danger-soft);max-width:340px;
}
#vesica-app .v-fuera-plazo .v-muted{color:var(--v-danger);font-size:12px;}

/* ---------- pase de lista e historial ---------- */
/* Los pases sin cerrar van arriba y llaman la atención a propósito: si
   pasan desapercibidos, el historial se llena de huecos. */
#vesica-app .v-card.v-pendientes{border-color:var(--v-gold);background:#fdfaf1;}
#vesica-app .v-card.v-pendientes h3{color:var(--v-gold);}
#vesica-app .v-detalle-hist{
  margin-top:16px;border-top:1px solid var(--v-beige-dark);padding-top:14px;
}
#vesica-app .v-detalle-hist h3{font-size:15px;margin-bottom:8px;}
#vesica-app .v-estado.asistio{background:var(--v-sage-soft);color:var(--v-sage);}
#vesica-app .v-estado.falta{background:var(--v-olive);color:var(--v-cream);}
#vesica-app .v-estado.cancelada{background:var(--v-danger-soft);color:var(--v-danger);}
#vesica-app .v-estado.anulada{background:var(--v-beige);color:var(--v-olive-soft);}
#vesica-app .v-estado.sin_confirmar{
  background:var(--v-gold-soft);color:var(--v-gold);
  border:1px dashed var(--v-gold);
}
#vesica-app .v-persona.anulada .v-persona-nombre{color:var(--v-olive-soft);}

#vesica-app .v-pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;}
#vesica-app .v-pill.ok{background:var(--v-sage-soft);color:var(--v-sage);}
#vesica-app .v-pill.warn{background:var(--v-danger-soft);color:var(--v-danger);}
#vesica-app .v-pill.neutral{background:var(--v-beige);color:var(--v-olive-soft);}
#vesica-app .v-pill.gold{background:var(--v-gold-soft);color:var(--v-gold);}

/* ---------- tablas ---------- */
#vesica-app table{width:100%;border-collapse:collapse;font-size:13px;background:transparent;margin:0;}
#vesica-app th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--v-olive-soft);padding:7px 8px;border-bottom:1px solid var(--v-beige-dark);font-weight:600;background:transparent;
}
#vesica-app td{padding:9px 8px;border-bottom:1px solid var(--v-beige);vertical-align:middle;background:transparent;}
#vesica-app .v-empty{
  padding:22px;text-align:center;color:var(--v-olive-soft);font-size:13px;
  border:1px dashed var(--v-beige-dark);border-radius:12px;
}
/* La fila que se está editando, para no perder de vista de quién se trata. */
#vesica-app tr.v-fila-editando td{background:var(--v-gold-soft);}
#vesica-app .v-nota{
  font-size:11.5px;color:var(--v-danger);margin-top:3px;max-width:220px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#vesica-app textarea{
  font-family:'Inter',sans-serif;font-size:13.5px;padding:9px 11px;
  border:1px solid var(--v-beige-dark);border-radius:8px;
  background:var(--v-cream);color:var(--v-olive);width:100%;resize:vertical;line-height:1.45;
}
#vesica-app textarea:focus{outline:2px solid var(--v-terracotta);outline-offset:1px;}
/* Un enlace que tiene que parecer un botón (el de WhatsApp). */
#vesica-app .v-enlace-boton{
  display:inline-block;text-decoration:none;border-radius:8px;
  padding:6px 10px;font-weight:600;font-size:11.5px;line-height:1.2;
}
#vesica-app .v-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--v-beige);padding:2px 7px;border-radius:6px;letter-spacing:.06em;
}

/* ---------- horario semanal ---------- */
#vesica-app .v-week-nav{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
#vesica-app .v-week-nav .v-lbl{font-family:'Fraunces',serif;font-size:14px;flex:1;text-align:center;min-width:140px;}
#vesica-app .v-week-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
#vesica-app table.v-week{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;min-width:520px;}
#vesica-app table.v-week th,
#vesica-app table.v-week td{border:1px solid var(--v-beige-dark);padding:8px 6px;text-align:center;vertical-align:middle;}
#vesica-app table.v-week th{background:var(--v-beige);font-family:'Fraunces',serif;font-weight:600;font-size:12.5px;color:var(--v-olive);text-transform:none;letter-spacing:0;}
#vesica-app table.v-week td.v-hora{background:var(--v-beige);font-weight:700;white-space:nowrap;}
#vesica-app table.v-week td.v-slot{min-width:104px;}
#vesica-app table.v-week td.v-slot .v-slot-name{font-weight:700;display:block;margin-bottom:3px;font-size:11.5px;}
#vesica-app table.v-week td.v-slot .v-slot-note{display:block;font-size:10.5px;margin-bottom:3px;}
#vesica-app table.v-week td.confirmado{background:var(--v-sage-soft);color:var(--v-sage);}
#vesica-app table.v-week td.cancelado{background:var(--v-danger-soft);color:var(--v-danger);}
#vesica-app table.v-week td.cancelado .v-slot-name{text-decoration:line-through;}
#vesica-app table.v-week td.recuperacion{background:var(--v-gold-soft);color:var(--v-gold);}
#vesica-app table.v-week td.dropin{background:var(--v-terracotta-soft);color:#fff;}
#vesica-app table.v-week td.no-show{background:var(--v-olive);color:var(--v-cream);}
#vesica-app table.v-week td.otra{background:#fff;color:var(--v-olive-soft);font-size:10.5px;}
#vesica-app table.v-week td.vacio{background:#fff;}

/* ---------- avisos ----------
   Fuera de #vesica-app a propósito: cuelga del <body> para que el repintado
   del panel no se lo lleve por delante y para que ningún contenedor de
   Elementor con transform le rompa el position:fixed. */
.v-toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(24px + env(safe-area-inset-bottom, 0px));z-index:2147483000;
  background:#2f2e26;color:#faf8f3;padding:14px 20px;border-radius:10px;
  font-size:15px;line-height:1.4;font-family:'Inter',system-ui,sans-serif;
  box-shadow:0 8px 28px rgba(47,46,38,.35);max-width:min(92vw,460px);text-align:center;
}
/* ---------- banda de aviso ----------
   Los mensajes con consecuencias (un error, una falta marcada, algo
   borrado) esperan a que se cierren. Van dentro de la página y no
   flotando encima, para no tapar los botones de abajo en un móvil, y
   son pegajosos: si Sara está a media lista, la banda la acompaña
   arriba en vez de quedarse fuera de la pantalla. */
#vesica-app .v-banda{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:flex-start;gap:12px;
  padding:13px 14px;border-radius:10px;margin-bottom:14px;
  font-size:14px;line-height:1.45;
  border:1px solid var(--v-sage);background:var(--v-sage-soft);color:var(--v-sage);
  box-shadow:0 2px 10px rgba(47,46,38,.10);
}
#vesica-app .v-banda.error{
  border-color:var(--v-danger);background:var(--v-danger-soft);color:var(--v-danger);
}
#vesica-app .v-banda-texto{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:500;}
#vesica-app .v-banda .v-banda-x{
  flex:0 0 auto;background:transparent;border:0;color:inherit;cursor:pointer;
  font-size:15px;line-height:1;padding:0;margin:0;
  min-width:32px;min-height:32px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
}
#vesica-app .v-banda .v-banda-x:hover{background:rgba(47,46,38,.10);}
#vesica-app .v-banda .v-banda-x:focus-visible{outline:2px solid currentColor;outline-offset:1px;}

/* ---------- acceso ---------- */
#vesica-app .v-login{max-width:420px;margin:0 auto;text-align:center;}
#vesica-app .v-login h3{font-size:19px;margin-bottom:6px;}
#vesica-app .v-login input{width:100%;text-align:center;font-size:17px;letter-spacing:.14em;text-transform:uppercase;padding:12px;}
#vesica-app .v-login button{width:100%;margin-top:10px;padding:12px;font-size:14px;}
#vesica-app .v-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
/* El tema le pone «margin: auto» a los botones. Dentro de una fila flexible
   ese auto se come TODO el espacio libre y reparte los botones a lo ancho de
   la pantalla: tres filtros que deberían ir juntos salían separados por 130 px
   cada uno. El hueco entre ellos lo pone `gap`, no los márgenes.

   Cualquier fila flexible de botones que se añada tiene que entrar en esta
   lista. Volvió a pasar con los tres del encuentro —cambiar, anular y
   apuntar—, que salieron repartidos a 96 px de los bordes y 200 entre ellos. */
#vesica-app .v-row > button,
#vesica-app .v-baja > button,
#vesica-app .v-enc-acciones > button{margin-left:0;margin-right:0;}
#vesica-app .v-sep{height:1px;background:var(--v-beige-dark);margin:14px 0;}

/* ---------- móvil ----------
   Por debajo de 820 px los campos van a 16 px: con menos, Safari de iOS hace
   zoom solo al tocarlos y descuadra la página. */
@media(max-width:820px){
  #vesica-app{padding:18px 14px 40px;font-size:16px;}
  #vesica-app select,
  #vesica-app input[type=text],
  #vesica-app input[type=email],
  #vesica-app input[type=number],
  #vesica-app input[type=time]{font-size:16px;padding:11px 12px;width:100%;}
  #vesica-app .v-field{width:100%;}
  #vesica-app .v-inline{display:block;}
  #vesica-app button{min-height:44px;padding:11px 16px;font-size:14px;min-width:0;}
  /* 44 px, no 40: por debajo de eso se falla el toque, y aquí hay botones
     con consecuencias («No hay clase ese día» anula la sesión entera). */
  #vesica-app .v-small{min-height:44px;font-size:13px;padding:9px 12px;}
  #vesica-app .v-enlace-boton{
    min-height:44px;font-size:13px;padding:0 14px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  #vesica-app textarea{font-size:16px;}
  #vesica-app .v-muted{font-size:14px;}
  /* En el móvil el nombre y el estado van en una línea, y el botón debajo
     a lo ancho: si se dejan los tres en fila, el nombre largo se parte en
     tres renglones y el botón queda apretado contra el borde. */
  #vesica-app .v-persona{flex-wrap:wrap;padding:11px 2px;row-gap:8px;}
  #vesica-app .v-persona-nombre{flex:1 1 100%;font-size:15.5px;}
  #vesica-app .v-estado{font-size:12px;padding:5px 11px;}
  #vesica-app .v-persona .v-marcar{margin-left:auto;min-height:44px;}
  #vesica-app .v-lista-vacia,
  #vesica-app .v-libres{font-size:14px;padding:11px 2px;}
  #vesica-app .v-canceladas{font-size:14px;}
  #vesica-app .v-espera-cola{font-size:14px;}
  #vesica-app .v-espera-cola .v-muted{font-size:13px;}
  #vesica-app .v-occupancy{font-size:13px;}
  #vesica-app .v-banda{font-size:15px;padding:14px;}
  #vesica-app .v-banda .v-banda-x{min-width:44px;min-height:44px;font-size:17px;}
  #vesica-app .v-tab{padding:13px 14px;font-size:15px;}
  #vesica-app table.v-week{min-width:min(520px,100%);}
  #vesica-app table.v-week td.v-slot{min-width:92px;}
}


/* ---------- el horario semanal en un móvil ----------
   Una rejilla de siete columnas no cabe en 390 px: se desplazaba en
   horizontal y el botón de cancelar quedaba fuera de la pantalla. Aquí la
   tabla se apila en tarjetas, una por hora, y cada casilla dice su día. */
@media(max-width:640px){
  #vesica-app .v-week-wrap{overflow:visible;}
  #vesica-app table.v-week{display:block;min-width:0;}
  #vesica-app table.v-week tr:first-child{display:none;}           /* cabecera de días */
  #vesica-app table.v-week tr{
    display:block;border:1px solid var(--v-beige-dark);border-radius:12px;
    margin-bottom:12px;overflow:hidden;
  }
  #vesica-app table.v-week td{
    display:block;border:0;border-bottom:1px solid var(--v-beige);
    text-align:left;padding:12px 14px;
  }
  #vesica-app table.v-week td.v-hora{
    background:var(--v-beige);font-family:'Fraunces',Georgia,serif;font-size:15px;
  }
  #vesica-app table.v-week td.vacio{display:none;}
  #vesica-app table.v-week td.v-slot::before{
    content:attr(data-dia);display:block;font-size:11px;font-weight:600;
    text-transform:uppercase;letter-spacing:.06em;color:var(--v-olive-soft);margin-bottom:4px;
  }
  #vesica-app table.v-week td.v-slot .v-slot-name{font-size:15px;margin-bottom:4px;}
  #vesica-app table.v-week td.v-slot .v-slot-note{font-size:13px;margin-bottom:6px;}
  #vesica-app table.v-week td:last-child{border-bottom:0;}
  #vesica-app table.v-week td.dropin::before,
  #vesica-app table.v-week td.no-show::before{color:rgba(250,248,243,.75);}

  /* La navegación de semanas, con la etiqueta arriba y los botones debajo. */
  #vesica-app .v-week-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  #vesica-app .v-week-nav .v-lbl{grid-column:1 / -1;order:-1;text-align:center;min-width:0;}
}

/* ---------- las tablas de gestión en móvil y tablet ----------
   Turnos y alumnas tienen 6 y 7 columnas. Antes se desplazaban en horizontal,
   y al arrastrar se perdía de vista la columna del nombre: se acababa
   pulsando «Eliminar» en la fila equivocada. Aquí cada fila se convierte en
   una ficha y cada dato lleva delante el rótulo de su columna, que el
   JavaScript deja escrito en data-col. La tabla y la ficha salen del mismo
   sitio, así que no pueden llegar a contar cosas distintas.

   El corte está en 820 px, el mismo que el resto de la interfaz: por debajo
   de ese ancho la tabla de siete columnas ya no cabe sin desplazarse de lado,
   y desplazarse de lado es justo lo que queríamos quitar. */
@media(max-width:820px){
  #vesica-app .v-tabla-scroll{overflow:visible;}
  #vesica-app table.v-fichas{display:block;min-width:0;}
  #vesica-app table.v-fichas tr:first-child{display:none;}        /* la cabecera */
  #vesica-app table.v-fichas tr{
    display:block;border:1px solid var(--v-beige-dark);border-radius:12px;
    margin-bottom:14px;overflow:hidden;background:#fff;
  }
  #vesica-app table.v-fichas tr.v-fila-editando{
    border-color:var(--v-gold);box-shadow:0 0 0 2px var(--v-gold-soft);
  }
  #vesica-app table.v-fichas td{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    border:0;border-bottom:1px solid var(--v-beige);padding:11px 14px;text-align:right;
  }
  #vesica-app table.v-fichas td::before{
    content:attr(data-col);flex:0 0 auto;text-align:left;
    font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
    color:var(--v-olive-soft);
  }
  #vesica-app table.v-fichas td:last-child{border-bottom:0;}
  /* El rótulo de la izquierda no crece; el valor de la derecha se queda con lo
     que sobre y parte las palabras largas si hace falta. Sin esto, un correo
     como «monicarodriguezmauriz@gmail.com» se estruja en una columna de 92 px
     y sale una letra por línea. */
  #vesica-app table.v-fichas td::before{max-width:42%;}
  #vesica-app table.v-fichas td > *{min-width:0;overflow-wrap:anywhere;}
  #vesica-app table.v-fichas td{overflow-wrap:anywhere;}

  /* La cabecera de la ficha: el nombre, a lo ancho y sin rótulo. */
  #vesica-app table.v-fichas td.v-celda-titulo{
    display:block;text-align:left;background:var(--v-beige);
    padding:13px 14px;
  }
  #vesica-app table.v-fichas td.v-celda-titulo::before{content:none;}
  #vesica-app table.v-fichas td.v-celda-titulo,
  #vesica-app table.v-fichas td.v-celda-titulo .v-nombre{
    font-family:'Fraunces',Georgia,serif;font-size:17px;line-height:1.3;
  }
  /* El teléfono y la nota, debajo del nombre, vuelven a la tipografía normal. */
  #vesica-app table.v-fichas td.v-celda-titulo .v-muted,
  #vesica-app table.v-fichas td.v-celda-titulo .v-nota{
    font-family:'Inter',sans-serif;
  }
  #vesica-app table.v-fichas tr.v-fila-editando td.v-celda-titulo{background:var(--v-gold-soft);}
  #vesica-app table.v-fichas tr.v-fila-editando td{background:transparent;}
  #vesica-app table.v-fichas td .v-nota{max-width:100%;white-space:normal;}

  /* Lo que no cabe al lado de su rótulo (texto largo o varios botones) se
     coloca debajo. Si se deja en la misma línea, los botones se parten en
     dos filas y la ficha crece sin motivo. */
  #vesica-app table.v-fichas td[data-col="Turnos fijos"],
  #vesica-app table.v-fichas td[data-col="Acceso"],
  #vesica-app table.v-fichas td[data-col="Recuperaciones"]{
    display:block;text-align:left;
  }
  #vesica-app table.v-fichas td[data-col="Turnos fijos"]::before,
  #vesica-app table.v-fichas td[data-col="Acceso"]::before,
  #vesica-app table.v-fichas td[data-col="Recuperaciones"]::before{
    display:block;margin-bottom:7px;
  }

  /* Acceso: el código a lo ancho y, debajo, Copiar y WhatsApp a media
     pantalla cada uno. Es lo que más se usa: mandar el código por WhatsApp. */
  #vesica-app table.v-fichas td[data-col="Acceso"] .v-row{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
  }
  #vesica-app table.v-fichas td[data-col="Acceso"] .v-code{
    grid-column:1 / -1;justify-self:start;
    display:inline-flex;align-items:center;min-height:40px;font-size:15px;padding:0 14px;
  }
  #vesica-app table.v-fichas td[data-col="Acceso"] button,
  #vesica-app table.v-fichas td[data-col="Acceso"] .v-enlace-boton{
    width:100%;min-height:44px;font-size:14px;
    display:inline-flex;align-items:center;justify-content:center;text-align:center;
  }

  /* Editar y Eliminar, a ancho completo y bien separados: son las dos
     acciones con consecuencias y no deben quedar pegadas. */
  #vesica-app table.v-fichas td.v-celda-acciones{
    display:block;padding:12px 14px;background:var(--v-cream);
  }
  #vesica-app table.v-fichas td.v-celda-acciones::before{content:none;}
  #vesica-app table.v-fichas td.v-celda-acciones .v-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  #vesica-app table.v-fichas td.v-celda-acciones .v-row button{width:100%;min-height:44px;font-size:14px;}

  /* Recuperaciones: el número y, al lado, − y + cuadrados y grandes. */
  #vesica-app table.v-fichas td[data-col="Recuperaciones"] .v-row{justify-content:flex-start;gap:10px;}
  #vesica-app table.v-fichas td[data-col="Recuperaciones"] .v-pill{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:44px;min-height:44px;font-size:16px;
  }
  #vesica-app table.v-fichas td[data-col="Recuperaciones"] .v-row button{
    min-width:52px;min-height:44px;font-size:20px;line-height:1;padding:0;
  }
  /* El abono se cambia tocando la pastilla: tiene que ser tan grande como
     un botón, o se falla el toque. */
  #vesica-app table.v-fichas td .v-pill-boton{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;min-width:110px;font-size:14px;padding:0 18px;
  }
}

/* ---------- clases anuladas (festivos, vacaciones, una baja) ---------- */
#vesica-app .v-ribbon.anulada{background:repeating-linear-gradient(45deg,#faf8f3,#faf8f3 8px,#f4efe6 8px,#f4efe6 16px);}
#vesica-app .v-anulada-nota{
  color:var(--v-danger);font-size:12.5px;display:flex;gap:4px;align-items:center;flex-wrap:wrap;
}
#vesica-app .v-anular-form{
  border:1px solid var(--v-beige-dark);border-radius:10px;padding:12px 14px;
  background:var(--v-cream);width:100%;display:flex;flex-direction:column;gap:9px;
}
#vesica-app .v-anular-form input[type=text]{width:100%;}
#vesica-app .v-check-linea{
  display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--v-olive);margin:0;font-weight:400;
}
#vesica-app table.v-week td.anulada{
  background:repeating-linear-gradient(45deg,#fff,#fff 7px,#f6efe9 7px,#f6efe9 14px);
  color:var(--v-danger);
}
#vesica-app table.v-week td.anulada .v-slot-name{text-decoration:line-through;}

/* ---------- agenda de la alumna ----------
   Sustituye a la rejilla de hora × día. La rejilla estaba pensada para
   pantalla grande y en el móvil se apilaba en una columna interminable;
   aquí se elige un día en la tira de arriba y debajo salen sus clases. */
#vesica-app .v-ag-aviso{margin:0 0 12px;}
#vesica-app .v-ag-resumen{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px;}
#vesica-app .v-ag-como{margin-top:6px;}
/* Sin flecha, la línea parece un texto suelto y nadie la pulsa. */
#vesica-app .v-ag-como > summary{
  cursor:pointer;font-size:13px;color:var(--v-terracotta);
  min-height:44px;display:flex;align-items:center;gap:6px;
  text-decoration:underline;text-underline-offset:3px;
}
#vesica-app .v-ag-como > summary::after{content:'\25BE';text-decoration:none;font-size:10px;}
#vesica-app .v-ag-como[open] > summary::after{content:'\25B4';}
#vesica-app .v-ag-como > summary:focus-visible{outline:2px solid var(--v-terracotta);outline-offset:2px;}
#vesica-app .v-ag-como p{margin:0 0 8px;}

/* Una sección que sólo se abre si hace falta. El resumen tiene que parecer un
   título —ocupa el sitio del h3 que había antes— y a la vez decir que se puede
   pulsar: de ahí la flecha, que sin ella nadie lo intenta. Los 44 px son para
   que se pueda dar con el dedo y no sólo con el ratón. */
#vesica-app .v-plegable > summary{
  cursor:pointer;font-size:16px;font-weight:600;color:var(--v-olive);
  min-height:44px;display:flex;align-items:center;gap:8px;list-style:none;
}
#vesica-app .v-plegable > summary::-webkit-details-marker{display:none;}
#vesica-app .v-plegable > summary::after{content:'\25BE';font-size:11px;
  font-weight:400;color:var(--v-terracotta);}
#vesica-app .v-plegable[open] > summary::after{content:'\25B4';}
#vesica-app .v-plegable > summary:focus-visible{outline:2px solid var(--v-terracotta);
  outline-offset:2px;}

#vesica-app .v-daystrip-nav{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;
}
#vesica-app .v-daystrip-nav button{min-width:44px;min-height:44px;}
#vesica-app .v-daystrip-nav .v-lbl{
  font-size:13px;color:var(--v-olive-soft);text-align:center;flex:1;
}
/* Siete casillas en un móvil de 360 px no dan para 44 px de ancho cada una:
   no caben, hagamos lo que hagamos. La tira se come el acolchado lateral de
   la tarjeta para arañar lo que puede y se queda en unos 40 × 60 px, que en
   superficie es mayor que un cuadrado de 44 y es lo que hacen todas las apps
   de calendario. Los botones de verdad sí cumplen los 44 × 44. */
#vesica-app .v-daystrip{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;
  margin-left:-20px;margin-right:-20px;padding:0;
}
/* width:100% explícito, no confiar en que el botón se estire solo dentro de
   su casilla: el tema de la web pone a los <button> un ancho propio y en
   producción las casillas salían de 11 px de ancho aunque su hueco medía 148.
   En local, sin tema, se estiraban solas y no se veía el fallo. */
#vesica-app .v-agday{
  width:100%;justify-self:stretch;
  min-height:60px;min-width:0;padding:6px 0;border:1px solid var(--v-beige);border-radius:12px;
  background:transparent;cursor:pointer;font-family:inherit;color:var(--v-olive);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
}
#vesica-app .v-agday-ini{font-size:11px;color:var(--v-olive-soft);text-transform:uppercase;letter-spacing:.04em;}
#vesica-app .v-agday-num{font-family:'Fraunces',Georgia,serif;font-size:17px;font-weight:600;line-height:1.1;}
#vesica-app .v-agday-dot{width:5px;height:5px;border-radius:50%;background:var(--v-sage);}
#vesica-app .v-agday.is-vacio{opacity:.45;}
#vesica-app .v-agday.is-fuera{opacity:.25;cursor:default;border-style:dashed;}
#vesica-app .v-ag-nota-mes{margin:12px 0 0;font-size:12.5px;}
#vesica-app .v-agday.is-hoy{border-color:var(--v-beige-dark);background:var(--v-beige);}
/* El día elegido manda sobre el resto: si además es un día sin clases, el
   is-vacio lo dejaba al 45 % y el día seleccionado se veía descolorido. */
#vesica-app .v-agday.is-active{
  background:var(--v-olive);border-color:var(--v-olive);color:var(--v-cream);
  opacity:1;
}
#vesica-app .v-agday.is-active .v-agday-ini{color:var(--v-beige);}
#vesica-app .v-agday.is-active .v-agday-dot{background:var(--v-beige);}
#vesica-app .v-agday:focus-visible{outline:2px solid var(--v-terracotta);outline-offset:2px;}

#vesica-app .v-ag-fila{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 12px 12px 14px;margin-top:10px;
  border:1px solid var(--v-beige);border-left-width:4px;border-radius:12px;
}
#vesica-app .v-ag-izq{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px;}
#vesica-app .v-ag-der{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
#vesica-app .v-ag-hora{
  font-family:'Fraunces',Georgia,serif;font-size:18px;font-weight:600;line-height:1.15;
}
#vesica-app .v-ag-nombre{font-size:14px;}
#vesica-app .v-ag-nota{font-size:12.5px;color:var(--v-olive-soft);}
#vesica-app .v-ag-fila.fija{border-left-color:var(--v-sage);background:var(--v-sage-soft);}
#vesica-app .v-ag-fila.recu,
#vesica-app .v-ag-fila.cola{border-left-color:var(--v-gold);background:var(--v-gold-soft);}
#vesica-app .v-ag-fila.cancelada{border-left-color:var(--v-beige-dark);}
#vesica-app .v-ag-fila.no-show{border-left-color:var(--v-danger);background:var(--v-danger-soft);}
#vesica-app .v-ag-fila.anulada{border-left-color:var(--v-beige-dark);opacity:.7;}
#vesica-app .v-ag-fila.otra{border-left-color:var(--v-beige);}

/* -------------------------------------------------------------------------
 *  El mes de un vistazo
 *
 *  En escritorio es una rejilla de siete columnas. En el móvil siete columnas
 *  no caben sin que los números queden ilegibles, así que se convierte en una
 *  lista de días y desaparecen los días sin clase, que en un teléfono sólo
 *  obligan a hacer scroll.
 * ---------------------------------------------------------------------- */
.v-mes-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.v-mes-titulo { font-size: 17px; text-align: center; }
.v-mes-dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 4px; }
.v-mes-dows div { font-size: 12px; color: #8a856a; text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.v-mes-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.v-mes-hueco { min-height: 10px; }

.v-mes-dia { border: 1px solid #e4e0cf; border-radius: 10px; padding: 6px; min-height: 78px; background: #fffdf6; }
.v-mes-dia.vacio { background: #faf8ef; border-style: dashed; }
.v-mes-dia.pasado { opacity: .55; }
.v-mes-dia.es-hoy { border-color: #7a8b5a; box-shadow: 0 0 0 2px rgba(122,139,90,.18); }
.v-mes-dia.elegido { border-color: #645f42; box-shadow: 0 0 0 2px rgba(100,95,66,.25); }
.v-mes-dia[role="button"] { cursor: pointer; }
.v-mes-dia[role="button"]:hover { background: #f6f3e6; }
.v-mes-dia:focus-visible { outline: 2px solid #645f42; outline-offset: 2px; }

.v-mes-cab { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.v-mes-dow { display: none; font-size: 12px; color: #8a856a; }
.v-mes-num { font-size: 13px; font-weight: 600; color: #645f42; }

.v-mes-clase { display: flex; justify-content: space-between; gap: 4px; font-size: 12px; line-height: 1.5; }
.v-mes-hora { color: #6b6752; }
.v-mes-cuenta { font-variant-numeric: tabular-nums; color: #4a4735; }
.v-mes-clase.llena .v-mes-cuenta { color: #9a4f3f; font-weight: 600; }
.v-mes-clase.anulada { text-decoration: line-through; opacity: .6; }

.v-mes-detalle { margin-top: 12px; }
.v-mes-bloque { padding: 10px 0; border-top: 1px solid #ece8d8; }
.v-mes-bloque:first-of-type { border-top: 0; }
.v-mes-bloque-tit { font-weight: 600; color: #4a4735; margin-bottom: 6px; }
.v-mes-lista { list-style: none; margin: 0 0 6px; padding: 0; }
.v-mes-persona { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid #f2efe2; }
.v-mes-persona:last-child { border-bottom: 0; }
.v-mes-persona-nombre { font-size: 15px; }

@media (max-width: 640px) {
  .v-mes-dows, .v-mes-hueco { display: none; }
  .v-mes-grid { grid-template-columns: 1fr; gap: 8px; }
  .v-mes-dia.vacio { display: none; }
  .v-mes-dia { min-height: 0; padding: 10px 12px; }
  .v-mes-dow { display: inline; }
  .v-mes-cab { justify-content: flex-start; gap: 8px; }
  .v-mes-num { font-size: 15px; }
  .v-mes-clase { font-size: 14px; padding: 3px 0; }
  .v-mes-dia[role="button"] { min-height: 44px; }
}

/* -------------------------------------------------------------------------
 *  Clases: el mes y el día elegido en una sola pantalla
 *
 *  En escritorio el calendario va arriba, que es el mapa. En el móvil el mapa
 *  es una lista larga y dejarlo encima obliga a bajar cada vez para pasar
 *  lista, así que allí el día elegido sube y el calendario baja.
 * ---------------------------------------------------------------------- */
.v-clases { display: flex; flex-direction: column; }
.v-clases .v-pendientes { order: 0; }
.v-clases .v-clases-mes { order: 1; }
.v-clases .v-clases-dia { order: 2; }

.v-mes-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 8px; }

/* Dentro del día elegido todas las clases son del mismo día, y la cinta ya
   traía la fecha de cuando vivía en una lista de días mezclados. Repetirla
   debajo del título es ruido, así que ahí sólo queda la hora. */
.v-clases-dia .v-ribbon .v-day { display: none; }
.v-clases-dia .v-ribbon .v-time { font-size: 17px; font-weight: 600; }

@media (max-width: 640px) {
  .v-clases .v-clases-dia { order: 1; }
  .v-clases .v-clases-mes { order: 2; }
  .v-mes-pie { flex-direction: column; align-items: flex-start; }
}

/* Quien ha pedido probar una clase. Va arriba del todo y con un borde que se
   nota, porque es lo único de esta pantalla que caduca. Con #vesica-app
   delante: el tema de la web gana por especificidad a las reglas sueltas y
   las tarjetas acaban saliendo rosas. */
#vesica-app .v-card.v-pruebas { border-left: 4px solid #a8763c; background: #fdf7ef; }
#vesica-app .v-prueba-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid #f0e6d6; flex-wrap: wrap; }
#vesica-app .v-prueba-fila:first-of-type { border-top: 0; }
/* Aquí el recado se lee entero: en la ficha de un alumno la nota se recorta
   porque va dentro de una tabla, pero lo que ha escrito alguien que todavía no
   te conoce («tengo la espalda delicada») es justo lo que hay que leer antes
   de llamarla. */
#vesica-app .v-prueba-fila .v-nota { font-style: italic; color: #5f5c4a; margin-top: 4px;
  white-space: normal; overflow: visible; text-overflow: clip; max-width: 46ch; }
#vesica-app .v-card.v-prellenado { border-left: 4px solid #645f42; }

/* Alumnos dados de baja: presentes pero fuera del trabajo de diario. */
.v-bajas summary { cursor: pointer; font-weight: 600; color: #645f42; }
.v-baja-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #f2efe2; flex-wrap: wrap; }

/* Escribirle a un alumno desde su ficha. */
.v-viene-poco { font-size: 12px; color: #9a4f3f; background: #fdf0ec; border-radius: 8px; padding: 2px 8px; display: inline-block; margin-top: 4px; }
.v-fila-escribir td { padding: 0 0 14px !important; }
.v-escribir { background: #fbf9f0; border: 1px solid #e4e0cf; border-radius: 12px; padding: 14px; }
.v-escribir-tit { font-weight: 600; color: #4a4735; margin-bottom: 2px; }
.v-escribir input, .v-escribir textarea { width: 100%; margin-top: 10px; font-family: inherit; font-size: 15px; }
.v-escribir textarea { line-height: 1.5; resize: vertical; }
.v-escribir .v-row { margin-top: 10px; }

/* -------------------------------------------------------------------------
 *  Encuentros
 *
 *  Se parece al pase de lista, pero cada persona lleva dos marcas en vez de
 *  una porque aquí se cobra en la puerta. Las marcas se ven encendidas o
 *  apagadas para poder repasar quién falta por pagar sin leer nada.
 * ---------------------------------------------------------------------- */
#vesica-app .v-enc-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 12px; }
#vesica-app .v-enc-ficha { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px 14px;
  background: #fffdf6; border: 1px solid #e4e0cf; border-radius: 12px; cursor: pointer;
  font-family: inherit; min-height: 44px; }
#vesica-app .v-enc-ficha:hover { background: #f6f3e6; }
#vesica-app .v-enc-ficha.elegido { border-color: #645f42; box-shadow: 0 0 0 2px rgba(100,95,66,.25); }
#vesica-app .v-enc-ficha.pasado { opacity: .55; }
#vesica-app .v-enc-ficha.anulada .v-enc-titulo { text-decoration: line-through; }
#vesica-app .v-enc-fecha { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #8a856a; }
#vesica-app .v-enc-titulo { font-size: 15px; color: #4a4735; font-weight: 600; line-height: 1.25; }
#vesica-app .v-enc-cuenta { font-size: 13px; color: #6b6752; font-variant-numeric: tabular-nums; }

#vesica-app .v-enc-detalle { margin-top: 12px; }

/* La tarjeta del encuentro va en dos mitades: arriba el encuentro —cómo es,
   cómo va y qué se puede hacer con él— y abajo la gente. La raya de en medio
   no es adorno: es lo que dice que son dos cosas distintas. */
#vesica-app .v-enc-cab h3 { margin-bottom: 2px; }
#vesica-app .v-enc-meta { color: #6b6752; font-size: 14px; margin: 0 0 10px; }
#vesica-app .v-enc-estado { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
#vesica-app .v-enc-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
#vesica-app .v-enc-raya { border: 0; border-top: 1px solid #e6e0d0; margin: 18px 0 14px; }
/* El rótulo de la mitad de abajo: pequeño y en versalitas, para que titule sin
   competir con el nombre del encuentro. */
#vesica-app .v-enc-rotulo { font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: #8a856a; margin-bottom: 6px; }

#vesica-app .v-enc-gente { list-style: none; margin: 10px 0; padding: 0; }
#vesica-app .v-enc-persona { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid #f2efe2; flex-wrap: wrap; }
#vesica-app .v-enc-persona:last-child { border-bottom: 0; }
#vesica-app .v-enc-persona.vino { background: #f7faf2; }
#vesica-app .v-enc-quien { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
#vesica-app .v-enc-nombre { font-size: 15px; }
/* El nombre es un botón que abre su ficha, pero tiene que leerse como un
   nombre y no como un botón: sin caja, sin relleno y subrayado sólo al pasar
   por encima. Los 44px de alto se los queda igual, que en el móvil se pulsa
   con el dedo. */
#vesica-app button.v-enlace { background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font-family: inherit; font-size: 15px; color: #55603f; text-align: left;
  text-decoration: underline; text-decoration-color: #cfc9ae; text-underline-offset: 3px; }
#vesica-app button.v-enlace:hover { color: #3d5240; text-decoration-color: #55603f; }
#vesica-app .v-marca { min-height: 44px; padding: 8px 16px; border-radius: 999px; font-size: 14px;
  border: 1px solid #d9d4bd; background: #fff; color: #6b6752; cursor: pointer; font-family: inherit; }
#vesica-app .v-marca.activa { background: #55603f; border-color: #55603f; color: #fff; }
#vesica-app .v-enc-form { background: #fbf9f0; border: 1px solid #e4e0cf; border-radius: 12px; padding: 14px; margin-top: 12px; }
#vesica-app .v-enc-form input { width: 100%; margin-top: 8px; font-family: inherit; font-size: 15px; }
#vesica-app .v-enc-form .v-row { margin-top: 10px; }

@media (max-width: 640px) {
  #vesica-app .v-enc-lista { grid-template-columns: 1fr; }
  #vesica-app .v-enc-persona { flex-direction: column; align-items: flex-start; gap: 8px; }
  #vesica-app .v-enc-persona .v-row { width: 100%; }
  #vesica-app .v-marca { flex: 1; }
  /* En el teléfono los tres botones de arriba se reparten el ancho en vez de
     quedarse pegados a la izquierda con tres huecos distintos. */
  #vesica-app .v-enc-acciones > button { flex: 1 1 auto; }
  /* Y el nombre, que ahora se pulsa con el pulgar, se gana los 44px de alto
     que se le exigen a cualquier cosa que se toque. El texto no se mueve: lo
     que crece es el sitio donde se puede acertar. */
  #vesica-app button.v-enlace { min-height: 44px; display: inline-flex; align-items: center; }
}
#vesica-app .v-enc-puesto { font-size: 13px; font-weight: 600; color: #8a6d3b; min-width: 22px; }

/* -------------------------------------------------------------------------
 *  Retiros y fichas
 * ---------------------------------------------------------------------- */

/* Un correo de cuarenta letras sin espacios no puede empujar la tabla fuera
   de la pantalla. En el móvil se salía doscientos píxeles. */
#vesica-app .v-contacto{min-width:0;overflow-wrap:anywhere;word-break:break-word;}

#vesica-app .v-fila-retiro{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--v-beige);
}
#vesica-app .v-fila-retiro:last-child{border-bottom:0;}
#vesica-app .v-fila-retiro > div:first-child{min-width:0;overflow-wrap:anywhere;}

#vesica-app .v-aviso-error{
  background:#fdf0ec;border:1px solid var(--v-danger);border-radius:12px;
  padding:12px 14px;margin:10px 0;
}
#vesica-app .v-aviso-error strong{display:block;color:var(--v-danger);margin-bottom:4px;}

#vesica-app tr.v-cancelada{opacity:.6;}
#vesica-app tr.v-cancelada strong{text-decoration:line-through;}

@media (max-width:760px){
  /* La casilla de «vino» necesita sitio para el dedo: sola mide 13 px. */
  #vesica-app table.v-fichas .v-check-linea{
    min-height:44px;font-size:14px;
  }
  #vesica-app table.v-fichas .v-check-linea input[type=checkbox]{
    width:22px;height:22px;
  }
  #vesica-app .v-fila-retiro{flex-direction:column;align-items:flex-start;}
}

/* -------------------------------------------------------------------------
 *  Los filtros de las fichas
 * ---------------------------------------------------------------------- */

/* Cuatro desplegables en una fila, todos del mismo ancho. Sin esto cada uno se
   ajusta a su opción más larga y quedan de 173, 204, 201 y 180 px: se pueden
   usar, pero la fila parece rota. Medido, no supuesto.
   Las dos reglas van juntas: la primera reparte el ancho de la fila y la
   segunda hace que el desplegable llene el hueco que le toca. */
#vesica-app .v-filtros-fichas{margin-top:10px;}
#vesica-app .v-filtros-fichas > .v-field{flex:1 1 190px;min-width:0;}
#vesica-app .v-filtros-fichas select{width:100%;}

/* Las etiquetas de «a qué viene» no pueden partir una fila de la tabla en
   cuatro líneas: se dejan en una sola tira que envuelve si hace falta. */
#vesica-app .v-hace{flex-wrap:wrap;gap:4px;}

/* Falta el correo. No es un error —mucha gente sólo deja el teléfono—, pero
   tiene que verse distinto del correo que sí está, o se lee como si lo hubiera. */
#vesica-app .v-falta{font-style:italic;opacity:.75;}

/* En el móvil van uno debajo de otro y a todo lo ancho, pero eso NO se escribe
   aquí: .v-inline ya pasa a display:block por debajo de 760 px. Se probó a
   repetirlo en una consulta de medios propia y, midiendo con y sin ella, los
   cuatro desplegables medían exactamente lo mismo. Una regla que no cambia
   nada es una regla que alguien mantendrá para nada. */

/* La crónica atada a un retiro, dentro de su ficha. Va separada por una raya
   porque no es parte de la gestión de plazas: es otra cosa que se hace aquí. */
#vesica-app .v-cronica-retiro{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--v-beige);
}
#vesica-app .v-cronica-retiro h4{margin:0 0 8px;font-size:16px;}
#vesica-app .v-cronica-retiro select{width:100%;max-width:520px;}

/* Las casillas de «Lo que hace»: se marcan varias y hacen falta todas. */
#vesica-app .v-marcas{min-width:200px;}
#vesica-app .v-marcas-extras{
  margin-top:6px;padding-top:6px;border-top:1px dashed var(--v-beige-dark);
  display:flex;flex-direction:column;gap:5px;
}
#vesica-app .v-marcas-nota{margin:6px 0 0;font-size:11px;line-height:1.35;}

/* El resumen de la ficha: a qué viene, qué día y a qué hora. */
#vesica-app .v-resumen{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--v-beige);
  display:flex;flex-wrap:wrap;gap:18px 28px;
}
#vesica-app .v-resumen-bloque{min-width:220px;flex:1 1 240px;}
#vesica-app .v-resumen-bloque h4{
  margin:0 0 7px;font-family:'Fraunces',Georgia,serif;font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--v-olive-soft);
}
#vesica-app .v-resumen-linea{margin-bottom:9px;}
#vesica-app .v-resumen-linea:last-child{margin-bottom:0;}
#vesica-app .v-resumen-que{font-weight:600;font-size:13.5px;line-height:1.35;}
#vesica-app .v-resumen-linea .v-muted{font-size:12px;line-height:1.35;}
/* Los cuatro filtros de las fichas se alinean por arriba: uno de ellos son
   casillas y es más alto que los desplegables, y alineando por abajo las
   etiquetas de los otros tres bailaban. */
#vesica-app .v-filtros-fichas{align-items:flex-start;}

/* Apuntar a alguien desde su propia ficha: clases, encuentros o retiros. */
#vesica-app .v-apuntar{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--v-beige);
}
#vesica-app .v-apuntar-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
#vesica-app .v-apuntar-cab h4{
  margin:0;font-family:'Fraunces',Georgia,serif;font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--v-olive-soft);
}
#vesica-app .v-apuntar .v-editor{margin-top:12px;}
/* Una casilla que no se puede marcar se dice apagándola, no escondiéndola:
   esconderla deja el hueco y la duda de si ha fallado algo. */
#vesica-app .v-checklist label.v-apagada{opacity:.45;}

/* «Esta persona ya está»: el aviso al crear una ficha repetida. Amarillo y no
   rojo a propósito: no es un error, es que hay algo que decidir. */
#vesica-app .v-repetida{
  background:var(--v-gold-soft);border:1px solid var(--v-gold);border-radius:10px;
  padding:11px 13px;margin:10px 0;
}
#vesica-app .v-repetida p{margin:0 0 8px;font-size:13px;color:var(--v-gold);font-weight:600;}

/* Las listas largas de elegir (veinte encuentros, nueve retiros) no pueden
   empujar el botón de guardar fuera de la pantalla: se les pone tope y ruedan. */
#vesica-app .v-lista-larga{max-height:230px;overflow-y:auto;}

/* ---------- la ficha completa de una persona ---------- */
#vesica-app .v-notas-ficha{
  background:var(--v-beige);border-radius:8px;padding:8px 11px;margin:8px 0;
  font-size:13px;line-height:1.4;
}
#vesica-app .v-contacto-ficha{margin:12px 0;}
#vesica-app .v-datos-ficha{
  display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;
  font-size:12.5px;color:var(--v-olive-soft);
}
#vesica-app .v-codigo-ficha{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;
  background:var(--v-beige);border-radius:6px;padding:2px 8px;color:var(--v-olive);
}
#vesica-app .v-wa-linea{
  display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;flex-wrap:wrap;
}
#vesica-app .v-wa-linea .v-muted{flex:1 1 240px;font-size:11.5px;font-style:italic;line-height:1.35;}
#vesica-app .v-borrar-ficha{
  background:var(--v-danger-soft);border:1px solid var(--v-danger);border-radius:10px;
  padding:12px 14px;margin:10px 0;
}
#vesica-app .v-borrar-ficha p{margin:0 0 10px;font-size:13px;color:var(--v-danger);font-weight:600;}
#vesica-app .v-asistencia{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--v-beige);
}
#vesica-app .v-asistencia h4{
  margin:0 0 7px;font-family:'Fraunces',Georgia,serif;font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--v-olive-soft);
}
#vesica-app .v-creditos-hay{
  margin:6px 0 10px;font-size:13px;font-weight:600;color:var(--v-sage);
}
#vesica-app .v-meses{font-size:12.5px;}
#vesica-app th.v-ordenable{cursor:pointer;user-select:none;}
#vesica-app th.v-ordenable:hover{color:var(--v-terracotta);}
#vesica-app th.v-ordenable.es-orden{color:var(--v-terracotta);}
/* La cabecera del historial: el título y el «ordenar por», que en el móvil es
   la única forma de ordenar —allí la cabecera de la tabla no se ve—. */
#vesica-app .v-cab-historial{
  display:flex;justify-content:space-between;align-items:flex-end;gap:14px;
  flex-wrap:wrap;margin-bottom:10px;
}
#vesica-app .v-cab-historial h4{margin:0;font-size:15px;}
#vesica-app .v-cab-historial .v-field{margin:0;}

/* ---------- comentarios sobre una persona ---------- */
#vesica-app .v-comentarios{margin-top:14px;display:flex;flex-direction:column;gap:10px;}
#vesica-app .v-comentario{
  background:var(--v-beige);border-radius:10px;padding:10px 13px;
}
#vesica-app .v-comentario-cab{
  display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:5px;
}
#vesica-app .v-comentario-cab .v-muted{font-size:11.5px;}
#vesica-app .v-comentario p{margin:0;font-size:13.5px;line-height:1.45;white-space:pre-wrap;}
#vesica-app .v-mini{
  font-size:11px;padding:3px 9px;border-radius:7px;
}

/* Lo que cada persona tiene con nosotras, en su propio panel. */
#vesica-app .v-mio-titulo{font-weight:600;font-size:14.5px;margin-bottom:2px;}

/* «Al guardar se escribe a N personas»: lo que hay que leer antes de mover
   la fecha de algo a lo que ya ha dicho que va gente. */
#vesica-app .v-aviso-correos{
  margin:10px 0;padding:9px 12px;border-radius:8px;
  background:var(--v-gold-soft);border:1px solid var(--v-gold);
  font-size:13px;color:var(--v-gold);font-weight:600;
}

/* -------------------------------------------------------------------------
 *  Escribir a varias personas a la vez
 * ---------------------------------------------------------------------- */

/* La casilla de marcar. Grande a propósito: se pulsa muchas veces seguidas y
   una casilla del tamaño por defecto obliga a apuntar. */
/* «flex: 0 0 20px» y no sólo «width»: en el móvil la tabla se apila en filas
   flexibles con «min-width:0» para que los correos largos partan, y eso
   encogía la casilla hasta dejarla en catorce píxeles. */
#vesica-app input.v-marcar { width: 20px; height: 20px; min-width: 20px; flex: 0 0 20px;
  cursor: pointer; accent-color: #55603f; margin: 0; }
/* La columna estrecha sólo en la tabla de verdad. Apilada, la fila entera
   mediría 34px de ancho. */
@media (min-width: 821px) {
  #vesica-app table.v-fichas th:first-child,
  #vesica-app table.v-fichas td:first-child { width: 34px; }
}

#vesica-app .v-escribir { margin: 12px 0 16px; }
#vesica-app .v-escribir textarea { min-height: 180px; font-family: inherit; font-size: 15px;
  line-height: 1.5; }

/* La cuenta de a cuántos va. Es lo último que se lee antes de pulsar enviar,
   así que el número va grande y lo que queda fuera, debajo y explicado. */
#vesica-app .v-cuenta-envio { background: #faf8f3; border: 1px solid #e6e0d0;
  border-radius: 12px; padding: 14px 16px; margin: 14px 0; }
#vesica-app .v-cuenta-grande { font-size: 17px; font-weight: 600; color: #3d5240; margin: 0 0 6px; }
#vesica-app .v-fuera-envio { font-size: 13.5px; line-height: 1.5; margin: 8px 0 0; color: #6b6752; }

/* «Tus datos», al final del panel de cada persona y cerrada. Discreta a
   propósito: quien entra a mirar su clase del martes no viene a esto, y un
   panel de protección de datos abierto arriba del todo alarma más que informa.
   Pero tiene que estar, y tiene que encontrarse. */
#vesica-app .v-mis-datos { background: #faf8f3; }
#vesica-app button.v-datos-abrir { font-size: 15px; font-weight: 600; color: #55603f; }
#vesica-app .v-datos-lista { margin: 8px 0 0; padding-left: 20px; font-size: 14.5px;
  line-height: 1.6; color: #4a4735; }
#vesica-app .v-datos-lista li { margin-bottom: 4px; }
#vesica-app .v-datos-bloque { border-top: 1px solid #ece8dc; margin-top: 14px;
  padding-top: 14px; }
#vesica-app .v-datos-bloque > p { margin: 6px 0 10px; }
#vesica-app .v-datos-bloque > button { margin-left: 0; margin-right: 0; }

/* El aviso del panel, debajo de las pestañas. Se ve, pero no grita: es una
   sugerencia, y lo que grita todos los días se deja de leer. */
#vesica-app .v-avisar { background: #f6f1e2; border: 1px solid #e4dcc2;
  border-left: 4px solid #c9a227; border-radius: 12px; padding: 14px 16px;
  margin: 0 0 18px; }
#vesica-app .v-avisar-texto { margin: 0 0 10px; font-size: 15px; line-height: 1.55;
  color: #4a4735; }
/* La de quien lleva semanas sin venir, en tierra en vez de en oro: no es una
   oportunidad que aprovechar, es alguien que se está yendo. */
#vesica-app .v-avisar-perdidas { background: #f7ede9; border-color: #e4cdc4;
  border-left-color: #9a4f3f; }
#vesica-app .v-avisar > button { margin-left: 0; margin-right: 0; }

/* -------------------------------------------------------------- Retención */
/* La cifra que resume la pantalla. Grande a propósito: es la única que se
   recuerda de memoria y la que se dice en voz alta. */
#vesica-app .v-reten-cifra { font-size: 34px; font-weight: 700; color: #645f42;
  line-height: 1.1; margin: 6px 0 8px; }

/* La curva de retención. Barras y no líneas: el ancho se compara de un vistazo
   y no hace falta seguir ningún punto con el dedo. */
#vesica-app .v-curva { margin: 16px 0 4px; }
#vesica-app .v-curva-fila { display: grid; grid-template-columns: 88px 1fr 52px;
  gap: 10px; align-items: center; margin-bottom: 5px; }
#vesica-app .v-curva-et { font-size: 13px; color: #5f5c4a; }
#vesica-app .v-curva-num { font-size: 13px; color: #2f2e26; text-align: right;
  font-variant-numeric: tabular-nums; }
#vesica-app .v-curva-pista { background: #f0ece0; border-radius: 5px; height: 14px; }
#vesica-app .v-curva-barra { background: #645f42; border-radius: 5px; height: 14px; }

/* Cada persona en riesgo, con sus motivos debajo. Una ficha por persona y no
   una fila de tabla: los motivos son frases, y las frases en una celda de
   tabla se leen fatal. */
#vesica-app .v-riesgo { border: 1px solid #ece8d8; border-left: 4px solid #cfc9b0;
  border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; }
#vesica-app .v-riesgo-alto { border-left-color: #9a4f3f; background: #fdf7f5; }
#vesica-app .v-riesgo-medio { border-left-color: #c9a227; background: #fdfaf1; }
#vesica-app .v-riesgo-cab { display: flex; flex-wrap: wrap; gap: 6px 12px;
  align-items: baseline; }
#vesica-app .v-riesgo-cab > button { margin-left: 0; margin-right: 0;
  font-size: 15px; font-weight: 600; }
#vesica-app .v-riesgo-senales { margin: 6px 0 0; padding-left: 18px;
  font-size: 13.5px; line-height: 1.6; color: #4a4735; }
#vesica-app .v-tabla-cohortes td, #vesica-app .v-tabla-demanda td {
  font-variant-numeric: tabular-nums; }

/* Las tres puertas: contar una entrada, avisar de un encuentro, promocionar un
   retiro. Van debajo de la búsqueda porque lo que hacen es dejarla hecha. */
#vesica-app .v-atajos { margin-top: 12px; }
#vesica-app .v-atajo-lista { margin-top: 8px; border-top: 1px solid #ece8dc; }
#vesica-app .v-atajo { display: flex; flex-wrap: wrap; gap: 4px 12px;
  align-items: baseline; padding: 8px 0; border-bottom: 1px solid #f2efe6;
  font-size: 14px; }
/* Lo que ha marcado el atajo, dicho con palabras, dentro de la caja de
   escribir: treinta marcas sin explicación hay que repasarlas una a una para
   fiarse de ellas. */
#vesica-app .v-atajo-dice { font-size: 13.5px; line-height: 1.5; margin: 0 0 10px;
  color: #4a4735; background: #f3f0e4; border-radius: 10px; padding: 10px 12px; }

/* El embudo de una campaña: cuatro barras de arriba abajo, cada una más corta
   que la anterior. El ancho ya dice dónde se cae la gente, sin tener que
   comparar números en la cabeza. */
#vesica-app .v-embudo { margin: 14px 0 4px; }
#vesica-app .v-embudo-fila { display: grid; grid-template-columns: 150px 1fr auto;
  gap: 12px; align-items: center; margin-bottom: 8px; font-size: 14px; }
#vesica-app .v-embudo-et { display: flex; justify-content: space-between; gap: 10px;
  color: #6b6752; }
#vesica-app .v-embudo-et > strong { color: #2f2e26; font-size: 16px; }
#vesica-app .v-embudo-pista { background: #f0ece0; border-radius: 6px; height: 18px; }
#vesica-app .v-embudo-barra { height: 18px; border-radius: 6px; }
#vesica-app .v-b-total { background: #c3bfa4; }
#vesica-app .v-b-bien  { background: #8a9a6b; }
#vesica-app .v-b-clic  { background: #645f42; }
#vesica-app .v-b-oro   { background: #c9a227; }
#vesica-app .v-embudo-nota { font-size: 13px; white-space: nowrap; }

@media (max-width: 640px) {
  /* En el móvil la etiqueta va encima de su barra: con tres columnas a 390px
     el número y la barra se aplastan y no se lee ninguno. */
  #vesica-app .v-embudo-fila { grid-template-columns: 1fr; gap: 4px; margin-bottom: 14px; }
  #vesica-app .v-embudo-nota { white-space: normal; }
}

/* La tabla de envíos. Toda la fila abre el detalle, así que tiene que parecer
   pulsable: el instinto es hacer clic en cualquier parte de la fila, no buscar
   un enlace escondido al final. */
#vesica-app tr.v-fila-envio { cursor: pointer; }
#vesica-app tr.v-fila-envio:hover td { background: #f6f1e2; }
#vesica-app button.v-orden-envios { font: inherit; color: inherit; }
#vesica-app .v-paginas { margin-top: 12px; align-items: center; }
#vesica-app .v-paginas > button { margin-left: 0; margin-right: 0; }
/* Lo que se mandó, tal cual se escribió: con los saltos de línea puestos, que
   es como se comprueba que un párrafo salió donde tenía que salir. */
#vesica-app .v-envio-cuerpo { white-space: pre-wrap; font-family: inherit;
  font-size: 14.5px; line-height: 1.6; background: #faf8f3; border: 1px solid #ece8dc;
  border-radius: 10px; padding: 12px 14px; margin: 8px 0 10px; color: #4a4735; }

/* Los últimos envíos. Se lee de arriba abajo: qué se mandó, a cuántos llegó y
   a quién no. Lo que falló va en rojo apagado y con nombre, porque es lo único
   de esta caja sobre lo que se puede hacer algo. */
#vesica-app .v-envio { border-top: 1px solid #ece8dc; padding: 12px 0; }
#vesica-app .v-envio:first-of-type { border-top: 0; }
#vesica-app .v-envio-cab { display: flex; flex-wrap: wrap; gap: 4px 10px;
  align-items: baseline; }
#vesica-app .v-envio-cuenta { display: flex; flex-wrap: wrap; gap: 6px 14px;
  align-items: center; margin-top: 4px; font-size: 14px; color: #6b6752; }
#vesica-app .v-envio-bien { color: #55603f; font-weight: 600; }
#vesica-app .v-envio-mal { color: #a33f30; font-weight: 600; }
#vesica-app .v-envio-fallo { font-size: 13.5px; line-height: 1.5; margin: 6px 0 0; }
#vesica-app .v-bajas { border-top: 1px solid #ece8dc; margin-top: 14px; padding-top: 14px; }
#vesica-app .v-bajas h4 { margin: 0 0 4px; font-size: 15px; color: #4a4735; }
#vesica-app .v-baja { display: flex; flex-wrap: wrap; gap: 4px 12px;
  align-items: center; padding: 8px 0; border-top: 1px solid #f2efe6; font-size: 14px; }

@media (max-width: 640px) {
  /* En el móvil la tabla se apila y la casilla se queda sola arriba; con la
     etiqueta al lado se sabe para qué es. */
  #vesica-app table.v-fichas td:first-child::before { content: 'Escribirle'; }
  #vesica-app .v-escribir .v-inline { display: block; }
  /* Cada baja como un bloquecito: el correo entero en una línea y el botón
     debajo, que en 390px no caben al lado. En bloque desaparece el «gap» de la
     fila flexible, y sin él la fecha se pegaba al correo: «lucia@…30 de julio».
     Por eso cada trozo va en su renglón. */
  #vesica-app .v-baja { display: block; }
  #vesica-app .v-baja > span { display: block; }
  #vesica-app .v-baja > button { margin-top: 6px; }
}