/* Espacio del paciente — Ohlàlà! Psicología
   Los colores, las tipografías y las formas salen de ohlalapsicologia.com,
   leídos del sitio en vivo el 20-09-2026. No hay nada inventado aquí.
   Las tipografías van aparte, en fuentes.css. */


:root{
  --pine:#08676c;
  --teal:#0b8b8c;
  --cream:#f3f0e7;
  --copper:#986c3e;
  --sand:#d5b681;
  --ink:#075f65;
  --line:#08676c30;
  --water-light:#b9d6d2;
  --papel:#faf8f3;
  --blanco:#ffffff;
  --suave:#5b6f6b;
  --ease:cubic-bezier(.22,1,.36,1);
  /* coge carrerilla y frena: para lo que gira */
  --frenada:cubic-bezier(.78,-.1,.2,1.04);
  /* el rojo no está en su paleta; este es el más cercano a su cobre */
  --fallo:#9d4a30;
  --radio:18px;
  --radio-s:12px;
  --sombra:0 1px 2px #08676c0d, 0 10px 34px -18px #08676c40;
  --ancho:1080px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Ohlala Sans','DM Sans',system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,.display{
  font-family:'Cormorant Garamond','Ohlala Type',Georgia,serif;
  font-weight:400;
  color:var(--pine);
  letter-spacing:-.035em;
  line-height:1.02;
  margin:0 0 .35em;
}
h1{font-size:clamp(38px,6.4vw,68px)}
h2{font-size:clamp(27px,3.6vw,40px)}
h3{font-size:clamp(20px,2.4vw,25px);letter-spacing:-.02em}
p{margin:0 0 1.1em}

.eyebrow{
  font-family:'Ohlala Sans','DM Sans',sans-serif;
  font-size:12px;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--suave);margin:0 0 .9em;
}

/* --- estructura ----------------------------------------------------------- */
.envoltorio{max-width:var(--ancho);margin:0 auto;padding:0 22px}
.site-header{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--cream) 88%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.site-header .envoltorio{display:flex;align-items:center;gap:18px;min-height:74px}
/* El logo se mide por ancho y nunca por alto, igual que en su web
   (.site-header .wordmark-image{width:106px} en logo-v16.css). */
.brand{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;line-height:0;min-height:44px}
.brand img{display:block;width:106px;height:auto;object-fit:contain}
/* Con la Agenda ya son once enlaces y en el ordenador se partian en dos
   filas («Mi clave» y «Salir» caian solas debajo). Se aprietan un poco para
   que quepan todos en una, que es como tiene que verse. */
.header-nav{margin-left:auto;display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.header-nav a{
  color:var(--ink);font-size:14.5px;padding:8px 9px;border-radius:60px;
  white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.header-nav a:hover{background:#08676c12;text-decoration:none}
.header-nav a.activo{background:var(--pine);color:var(--cream)}

/* De la tablet al portatil pequeno. Por debajo de 1024 los once enlaces no
   caben de ninguna manera, asi que se dejan en una tira que se desliza con el
   dedo, igual que en el telefono. De 1024 a 1279 si caben, pero por los pelos:
   se pasaban catorce pixeles y se partian en dos filas, asi que se aprietan un
   pelo y ya van en una. */
@media (min-width:701px) and (max-width:1023px){
  .site-header .envoltorio{flex-wrap:wrap}
  .header-nav{width:100%;order:3;margin-left:0;gap:2px;padding-bottom:8px;
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .header-nav::-webkit-scrollbar{display:none}
  .header-nav a{font-size:14px;padding:7px 10px}
}
@media (min-width:1024px) and (max-width:1279px){
  .header-nav{gap:2px}
  .header-nav a{font-size:14px;padding:8px 7px}
}

main{padding:38px 0 72px;min-height:58vh}
.seccion{margin:0 0 34px}
.cabecera-pagina{margin:6px 0 30px}
.cabecera-pagina p{color:var(--suave);max-width:60ch;margin:0}
/* El «que hacer aqui» de cada pantalla. Va sobre papel, separado del titular,
   para que se lea como una nota y no como mas texto de la cabecera. */
.cabecera-pagina p.que-hacer{
  max-width:74ch;margin:14px 0 0;padding:13px 17px;
  background:var(--papel);border:1px solid var(--line);border-radius:var(--radio-s);
  font-size:15px;line-height:1.65;color:var(--ink);
}
.cabecera-pagina p.que-hacer strong{color:var(--pine)}
.cabecera-pagina p.que-hacer em{font-style:normal;font-weight:600}

/* El titulo de un bloque dentro de una pagina. Mas chico que el de arriba,
   para que se vea que es una seccion y no otra pagina. */
.cabecera-seccion{margin:0 0 16px}
.cabecera-seccion h2{margin:2px 0 6px}
.cabecera-seccion p{color:var(--suave);max-width:62ch;margin:0}

/* ====================================================== el mes de un vistazo
   Calendario grande a la izquierda y los calendarios de Google a la derecha,
   cada uno con su color y su interruptor. En el movil se apilan: primero el
   calendario, luego la leyenda. */
/* Nathalie lo pidio el 22-09-2026: «preferiria que se viera en grande, como
   se ve google calendar, en vez de que haya cuadraditos de colores». El mes
   pasa a ocupar el ancho entero, la lista de calendarios baja debajo, y los
   puntos de 7 px se cambian por las citas escritas. */
.mes{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:28px}
/* La agenda es la unica pagina que pide ancho: con 1080 px las casillas se
   quedaban en 114 y el nombre de la cita salia cortado a la mitad. */
.p-g-agenda .envoltorio{max-width:1320px}
.mes__ajuste{display:flex;justify-content:flex-end;margin:-4px 0 12px}
.mes__calendario,.mes__lado{min-width:0}
.mes__barra{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.mes__titulo{font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;color:var(--pine);
  font-weight:500;text-align:center;flex:1 1 auto}
.mes__semana,.mes__dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.mes__semana{margin-bottom:6px}
.mes__semana span{text-align:center;font-size:12px;letter-spacing:.08em;color:var(--suave)}

.dia{
  min-height:116px;display:flex;flex-direction:column;align-items:stretch;gap:5px;
  padding:7px 7px 6px;border:1px solid #08676c1f;border-radius:12px;
  background:var(--cream);cursor:pointer;text-align:left;font:inherit;
  overflow:hidden;
  transition:border-color .18s ease,background .18s ease;
}
.dia:hover{border-color:var(--teal);background:#08676c08}
.dia--fuera{border:0;background:none;cursor:default;min-height:0}
.dia--hoy{border-color:var(--copper);box-shadow:inset 0 0 0 1px var(--copper)}
/* El dia elegido ya no se pinta entero de verde: con las citas escritas
   dentro no se leia nada. Se marca con un reborde grueso. */
.dia--elegido{box-shadow:inset 0 0 0 2px var(--pine);border-color:var(--pine)}
.dia--elegido .dia__numero{color:var(--pine)}
.dia__numero{font-size:14px;font-weight:600;color:var(--ink);line-height:1;flex:0 0 auto}

.dia__citas{display:flex;flex-direction:column;gap:3px;min-width:0;
  /* En el movil las citas son barritas de color: si no se dice el ancho, la
     caja se encoge al contenido (que esta escondido) y quedan de 6 px. */
  align-self:stretch;width:100%}
.cita-chip{
  display:flex;align-items:baseline;gap:5px;min-width:0;
  padding:2px 6px 2px 5px;border-radius:5px;
  border-left:3px solid var(--cita,var(--teal));
  background:color-mix(in srgb,var(--cita,var(--teal)) 13%,transparent);
  font-size:11.5px;line-height:1.35;color:var(--ink);white-space:nowrap;overflow:hidden;
}
.cita-chip__hora{
  flex:0 0 auto;font-weight:600;color:var(--cita,var(--teal));
  font-variant-numeric:tabular-nums;
}
.cita-chip__quien{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Las que le han pedido por la web, con el borde a rayas: se ve de un vistazo
   que esa todavia no la ha confirmado. */
.cita-chip--pedida{border-left-style:dashed}
.cita-chip__mas{font-size:11px;color:var(--suave);line-height:1.3;padding-left:6px}
.cita-chip[hidden],.cita-chip__mas[hidden],.marca[hidden]{display:none}

/* «Verlo mas grande»: mismas casillas, mas altas y con mas citas a la vista. */
.mes--grande .dia{min-height:172px}
.mes--grande .cita-chip{font-size:12.5px;padding:3px 7px 3px 6px}
.mes--grande .dia__numero{font-size:15px}

.marca{width:9px;height:9px;border-radius:50%;display:block}
.marca--mas{width:auto;height:auto;font-size:10px;color:var(--suave);line-height:1}

.leyenda{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px}
.leyenda label{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:10px;
  cursor:pointer;font-weight:400;font-size:14px;transition:background .18s ease}
.leyenda label:hover{background:#08676c0d}
.leyenda__interruptor{width:auto;margin:0;flex:0 0 auto}
.leyenda__color{width:14px;height:14px;border-radius:4px;flex:0 0 auto}
.leyenda__nombre{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leyenda__cuantas{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:12px;color:var(--suave)}
.leyenda li.apagada .leyenda__nombre,.leyenda li.apagada .leyenda__cuantas{opacity:.45}
.leyenda li.apagada .leyenda__color{opacity:.3}

@media(max-width:860px){
  .dia{min-height:96px;padding:6px 5px 5px;border-radius:10px}
  .cita-chip{font-size:10.5px;padding:2px 4px 2px 4px;gap:3px}
  .mes--grande .dia{min-height:140px}
  .mes__semana,.mes__dias{gap:4px}
  .mes__titulo{font-size:20px}
  .mes__barra .button{font-size:13px;padding:7px 12px}
}

/* En el telefono no caben ni la hora ni el nombre en una casilla de 50 px:
   cada cita se queda en una barrita de su color, que es como lo ensena el
   Google Calendar del movil. */
@media(max-width:700px){
  .dia{min-height:66px;gap:3px}
  .cita-chip{
    height:4px;padding:0;border:0;border-radius:2px;
    background:var(--cita,var(--teal));
  }
  .cita-chip__hora,.cita-chip__quien{display:none}
  .cita-chip--pedida{opacity:.55}
  .cita-chip__mas{font-size:9.5px;padding-left:2px}
  .mes--grande .dia{min-height:96px}
  .leyenda{grid-template-columns:minmax(0,1fr)}
}

/* --- botones -------------------------------------------------------------- */
.button,button.button,a.button{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Ohlala Sans','DM Sans',sans-serif;
  font-size:16px;font-weight:500;line-height:1.35;
  color:var(--cream);background:var(--pine);
  border:1px solid var(--pine);border-radius:60px;
  padding:12px 22px;cursor:pointer;
  transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.button:hover{background:var(--teal);border-color:var(--teal);text-decoration:none;transform:translateY(-1px);box-shadow:var(--sombra)}
.button:active{transform:translateY(0)}
.button.claro{background:transparent;color:var(--pine)}
.button.claro:hover{background:#08676c10;color:var(--pine)}
.button.pequeno{font-size:14px;padding:8px 16px}
.button[disabled],.button.apagado{opacity:.45;pointer-events:none}

/* --- tarjetas ------------------------------------------------------------- */
.tarjeta{
  background:var(--blanco);
  border:1px solid var(--line);
  border-radius:var(--radio);
  padding:26px;
  box-shadow:var(--sombra);
}
/* Separación entre tarjetas apiladas. Dentro de una rejilla no, que ahí
   el hueco lo pone el propio grid y si no se descuadran entre ellas. */
.tarjeta + .tarjeta{margin-top:18px}
.rejilla > .tarjeta + .tarjeta{margin-top:0}
.tarjeta h2,.tarjeta h3{margin-top:0}
.rejilla{display:grid;gap:18px}
@media(min-width:760px){
  .rejilla.dos{grid-template-columns:1fr 1fr}
  .rejilla.tres{grid-template-columns:repeat(3,1fr)}
}

/* la tarjeta grande de la próxima sesión */
.proxima{
  background:linear-gradient(152deg,var(--pine),var(--teal));
  color:var(--cream);border:none;position:relative;overflow:hidden;
}
.proxima::after{
  content:"";position:absolute;inset:auto -60px -110px auto;
  width:280px;height:280px;border-radius:50%;
  background:#ffffff14;
}
.proxima h2,.proxima h3{color:var(--cream)}
.proxima .eyebrow{color:#f3f0e7b0}
/* La fecha en serif, que se lee bonita; la hora en sans, que en Cormorant
   el 11 parece dos íes. */
.proxima .cuando{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(30px,4.6vw,46px);line-height:1.08;letter-spacing:-.03em;display:block;margin:2px 0 6px}
.proxima .cuando .hora-grande{
  font-family:'Ohlala Sans','DM Sans',system-ui,sans-serif;
  font-size:.62em;font-weight:500;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  display:inline-block;margin-left:.42em;
}
.proxima .cuando .hora-grande::before{
  content:"·";margin-right:.42em;opacity:.55;font-weight:400;
}
.proxima .detalle{color:#f3f0e7cc;font-size:15px}
.proxima .button{background:var(--cream);color:var(--pine);border-color:var(--cream);position:relative;z-index:1}
.proxima .button:hover{background:#fff;color:var(--pine);border-color:#fff}

/* --- listas de material --------------------------------------------------- */
.lista{list-style:none;margin:0;padding:0}
.lista li{
  display:flex;gap:16px;align-items:flex-start;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.lista li:last-child{border-bottom:none}
.lista .icono{
  flex:0 0 42px;height:42px;border-radius:12px;
  display:grid;place-items:center;background:#08676c12;color:var(--pine);
}
.lista .icono svg{width:20px;height:20px}
.lista .cuerpo{flex:1;min-width:0}
.lista .cuerpo strong{display:block;font-weight:600;font-size:16px;color:var(--ink)}
.lista .cuerpo span{color:var(--suave);font-size:14px}
.lista .accion{flex:0 0 auto;align-self:center}

.etiqueta{
  display:inline-block;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 10px;border-radius:60px;
  background:#08676c12;color:var(--pine);
}
.etiqueta.arena{background:#d5b68133;color:var(--copper)}
.etiqueta.verde{background:#0b8b8c1f;color:var(--teal)}
.etiqueta.gris{background:#8a9a961f;color:var(--suave)}

/* --- formularios ---------------------------------------------------------- */
label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin:0 0 6px}
input[type=text],input[type=email],input[type=password],input[type=date],
input[type=number],select,textarea{
  width:100%;font:inherit;font-size:16px;color:var(--ink);
  background:var(--papel);border:1px solid var(--line);border-radius:var(--radio-s);
  padding:12px 14px;transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px #0b8b8c22;
}
textarea{min-height:110px;resize:vertical}
.campo{margin:0 0 18px}
.ayuda{font-size:13px;color:var(--suave);margin:6px 0 0}

.aviso{
  border-radius:var(--radio-s);padding:14px 16px;margin:0 0 20px;font-size:15px;
  border:1px solid var(--line);background:var(--papel);
}
.aviso.bien{background:#0b8b8c14;border-color:#0b8b8c3d;color:var(--pine)}
.aviso.mal{background:#98553314;border-color:#9855333d;color:#8b4a2d}
.aviso.local{background:#d5b68126;border-color:#d5b68166;color:var(--copper)}

/* --- entrar --------------------------------------------------------------- */
.entrada{max-width:440px;margin:6vh auto;text-align:center}
.entrada .tarjeta{text-align:left;padding:30px}
.entrada .marca{margin:0 auto 26px;max-width:210px}
.entrada .button{width:100%;justify-content:center}

/* --- huecos de cita -------------------------------------------------------
   OJO: esta «.dia» es la tarjeta de un dia de la pantalla de pedir cita, NO la
   casilla del calendario del mes, que tambien se llama .dia y esta mas arriba.
   Sin acotarla a .dias, su padding de 14/16 se comia el ancho de las casillas
   del calendario en el movil y las citas salian de 6 px. */
.dias{display:grid;gap:14px}
.dias > .dia{border:1px solid var(--line);border-radius:var(--radio-s);padding:14px 16px;background:var(--blanco);
  display:block;min-height:0;cursor:auto;overflow:visible}
.dias > .dia h4{margin:0 0 10px;font-family:'Ohlala Sans',sans-serif;font-size:14px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--suave)}
.horas{display:flex;flex-wrap:wrap;gap:8px}
.hora{
  font:inherit;font-size:15px;padding:9px 15px;border-radius:60px;cursor:pointer;
  background:var(--papel);border:1px solid var(--line);color:var(--ink);
  transition:all .22s var(--ease);
}
.hora:hover{border-color:var(--teal);background:#0b8b8c12}
.hora.elegida{background:var(--pine);border-color:var(--pine);color:var(--cream)}

/* --- tablas (gestión) ----------------------------------------------------- */
.tabla{width:100%;border-collapse:collapse;font-size:15px}
.tabla th,.tabla td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line)}
.tabla th{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--suave);font-weight:600}
.tabla tr:last-child td{border-bottom:none}
.tabla td.derecha,.tabla th.derecha{text-align:right}
.codigo{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:14px;color:var(--pine)}

/* Lo que ella le deja, visto sin salir de la pagina: la foto se ve, el video
   se pone y el audio se escucha. Nada de esto se estira mas de lo que cabe. */
.media{
  display:block;margin:12px 0 2px;max-width:420px;width:100%;
  border-radius:14px;border:1px solid #08676c1f;background:#08676c08;
}
.media--foto{padding:0;line-height:0;overflow:hidden;background:none}
.media--foto img{display:block;width:100%;height:auto;border-radius:14px}
video.media{max-height:420px;background:#0d2f31}
.media--audio{height:44px;border:0;background:none;border-radius:0}
@media(max-width:700px){ .media{max-width:100%} }

/* Quien es quien. Manda el nombre; el codigo va detras, pequeno y apagado,
   que es cosa de la maquina. */
.quien{font-weight:600;color:var(--ink)}
.ident{
  margin-left:7px;font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;
  font-size:11px;letter-spacing:.04em;color:var(--suave);
  background:#08676c0d;border:1px solid #08676c1f;border-radius:5px;
  padding:1px 5px;white-space:nowrap;vertical-align:1px;font-weight:400;
}
.ident--solo{margin-left:0}
td .ident{margin-left:0}

/* Las cifras nunca en serif: en Cormorant el 1 se lee como una I. */
.cifra{
  font-family:'Ohlala Sans','DM Sans',system-ui,sans-serif;
  font-size:clamp(30px,3.4vw,38px);font-weight:500;
  letter-spacing:-.02em;line-height:1.1;color:var(--pine);
  display:block;margin:0;
}

.vacio{text-align:center;padding:38px 20px;color:var(--suave)}
.vacio svg{width:38px;height:38px;opacity:.45;margin:0 auto 12px}

/* --- pie ------------------------------------------------------------------ */
.site-footer{border-top:1px solid var(--line);padding:26px 0 40px;color:var(--suave);font-size:14px}
.site-footer .envoltorio{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.site-footer a{min-height:44px;display:inline-flex;align-items:center;color:var(--ink);font-weight:600}

/* --- móvil ---------------------------------------------------------------- */
@media(max-width:700px){
  body{font-size:16px}
  .site-header .envoltorio{min-height:64px;gap:10px;flex-wrap:wrap}
  .brand img{width:84px}
  .header-nav{gap:2px;width:100%;order:3;padding-bottom:10px;overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .header-nav::-webkit-scrollbar{display:none}
  .header-nav a{font-size:14px;padding:7px 11px;white-space:nowrap}
  main{padding:26px 0 56px}
  .tarjeta{padding:20px}
  /* En el teléfono no caben el texto y los botones en la misma línea: la
     fecha se partía palabra a palabra contra el «Confirmar». Se apila: el
     icono y el texto arriba, y los botones debajo a todo lo ancho. */
  .lista li{ gap:12px; flex-wrap:wrap }
  .lista .cuerpo{ flex:1 1 auto; min-width:0 }
  .lista .accion{
    flex:1 0 100%; align-self:stretch;
    display:flex; flex-wrap:wrap; gap:8px; margin-top:2px;
  }
  .lista .accion form{ flex:1 1 auto }
  .lista .accion .button{ width:100%; justify-content:center }
  .lista .accion .etiqueta{ align-self:center }
  .tabla{display:block;overflow-x:auto}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* --- lo que pide Premium ----------------------------------------------------
   No se esconde ni se pinta como un anuncio: se ve qué es, qué le daría y
   cuánto cuesta. La franja de la izquierda en cobre para que se distinga de
   lo que sí tiene. */
.premium{
  display:flex;gap:22px;flex-wrap:wrap;align-items:center;
  background:var(--blanco);
  border:1px solid var(--line);
  border-left:3px solid var(--copper);
  border-radius:var(--radio);
  padding:22px 24px;
  margin:0 0 16px;
}
.premium__cuerpo{flex:1 1 300px;min-width:0}
.premium__sello{
  font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--copper);margin:0 0 8px;
}
.premium__titulo{
  font-size:clamp(19px,2.2vw,23px);color:var(--pine);margin:0 0 8px;letter-spacing:-.02em;
}
.premium__que{color:var(--suave);font-size:14.5px;margin:0 0 8px;max-width:58ch}
.premium__daria{color:var(--ink);font-size:14.5px;margin:0;max-width:58ch}
.premium__daria strong{color:var(--copper)}

.premium__precio{
  flex:0 0 auto;text-align:right;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  padding-left:22px;border-left:1px solid var(--line);
}
.premium__euros{
  font-family:'Ohlala Sans','DM Sans',system-ui,sans-serif;
  font-size:30px;font-weight:600;color:var(--pine);line-height:1;
  font-variant-numeric:tabular-nums;
}
.premium__mes{font-size:13px;color:var(--suave);margin-bottom:4px}
.premium__letra{font-size:12px;color:var(--suave);margin-bottom:12px}

/* --- el contador de pacientes del plan -------------------------------------- */
.cupo{
  background:var(--blanco);border:1px solid var(--line);
  border-radius:var(--radio);padding:20px 24px;margin:0 0 18px;
}
.cupo__linea{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.cupo__cifra{
  font-family:'Ohlala Sans','DM Sans',system-ui,sans-serif;
  font-size:30px;font-weight:600;color:var(--pine);line-height:1;
  font-variant-numeric:tabular-nums;
}
.cupo__de{color:var(--suave);font-size:15px}
.cupo__barra{
  height:8px;border-radius:60px;background:#08676c14;overflow:hidden;margin:0 0 10px;
}
.cupo__lleno{
  height:100%;border-radius:60px;background:var(--teal);
  transition:width .8s var(--ease);
}
.cupo.apurado .cupo__lleno{background:var(--sand)}
.cupo.pasado  .cupo__lleno{background:var(--copper)}
.cupo.apurado .cupo__cifra{color:var(--copper)}
.cupo.pasado  .cupo__cifra{color:var(--fallo)}
.cupo__nota{color:var(--suave);font-size:13.5px;margin:0}

@media(max-width:700px){
  .premium{padding:18px 18px;gap:16px}
  .premium__precio{
    text-align:left;align-items:flex-start;
    padding-left:0;border-left:none;border-top:1px solid var(--line);padding-top:14px;width:100%;
  }
}

/* --- los atajos del resumen -------------------------------------------------
   Lo primero que ve al entrar: qué puede hacer, sin buscarlo en el menú. */
.atajos{display:grid;gap:12px}
@media(min-width:620px){ .atajos{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){ .atajos{grid-template-columns:repeat(4,1fr)} }
.atajo{
  display:flex;align-items:center;gap:14px;
  background:var(--blanco);border:1px solid var(--line);
  border-radius:var(--radio);padding:16px 18px;
  color:var(--ink);text-decoration:none;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.atajo:hover{
  text-decoration:none;transform:translateY(-2px);
  border-color:#08676c55;box-shadow:var(--sombra);
}
.atajo__icono{
  flex:0 0 42px;height:42px;border-radius:12px;
  display:grid;place-items:center;background:#08676c12;color:var(--pine);
}
.atajo__icono svg{width:20px;height:20px}
.atajo__texto{display:flex;flex-direction:column;min-width:0}
.atajo__texto strong{font-size:15.5px;font-weight:600;color:var(--pine);line-height:1.3}
.atajo__texto span{font-size:13px;color:var(--suave);line-height:1.35}

/* --- el aviso de la contraseña de arranque ---------------------------------
   Se ve en todas sus páginas hasta que la cambia. Con el color de aviso, no
   con el de error: no ha hecho nada mal, solo le falta un paso. */
.aviso-clave{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between;
  background:#d5b6811f;border:1px solid #d5b68166;border-left:3px solid var(--copper);
  border-radius:var(--radio);padding:16px 20px;margin:0 0 22px;
  color:var(--copper);font-size:15px;
}
.aviso-clave strong{color:var(--copper)}
.aviso-clave span{display:block;color:#8a7a5f;font-size:13.5px;margin-top:2px}
.aviso-clave__clave{
  display:inline-block;
  font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;
  font-size:15px;letter-spacing:.06em;
  background:var(--blanco);border:1px solid #d5b68199;border-radius:8px;
  padding:1px 9px;color:var(--pine);
}
.aviso-clave .button{background:var(--copper);border-color:var(--copper);flex:0 0 auto}
.aviso-clave .button:hover{background:#7f5930;border-color:#7f5930}
/* En la Agenda va en una sola línea y sin la contraseña (27-09-2026): el aviso
   entero se comía media pantalla y había que bajar para ver el calendario. En
   el móvil se queda en lo justo: la frase y «Cambiar». */
.aviso-clave--corto{flex-wrap:nowrap;gap:14px;padding:7px 8px 7px 16px;margin:0 0 12px;
  border-radius:var(--radio-s);font-size:14.5px}
.aviso-clave--corto p{margin:0;min-width:0;line-height:1.4;font-weight:600}
.aviso-clave--corto p span{display:inline;margin:0;font-size:inherit;font-weight:400}
.aviso-clave--corto .button{padding:6px 16px;font-size:13.5px}
.aviso-clave--corto .button span{display:inline;margin:0;font-size:inherit;color:inherit}
@media(max-width:700px){
  .aviso-clave--corto{gap:10px;padding:6px 6px 6px 12px;font-size:13.5px}
  .aviso-clave--corto p span,.aviso-clave--corto .button .aviso-clave__mas{display:none}
  .aviso-clave--corto .button{min-height:42px;padding:6px 14px}
}

/* --- qué hago con este paciente --------------------------------------------
   Todo lo de una persona detrás de un solo botón, para que la tabla no sea
   una fila de seis botones que no se lee. */
.acciones-fila{position:relative;display:inline-block;text-align:left}
.acciones-fila > summary{list-style:none;cursor:pointer;display:inline-flex}
.acciones-fila > summary::-webkit-details-marker{display:none}
.acciones-fila[open] > summary{background:var(--pine);color:var(--cream);border-color:var(--pine)}
.acciones-fila__caja{
  position:absolute;right:0;top:calc(100% + 8px);z-index:20;
  width:min(92vw,340px);
  background:var(--blanco);border:1px solid var(--line);border-radius:var(--radio);
  box-shadow:0 10px 40px -14px #08676c66;
  padding:18px;
  /* Dentro de una celda con nowrap, los textos se salían de lado (25-09-2026). */
  white-space:normal;
}
.acciones-fila__caja .campo{margin:0 0 14px}
.acciones-fila__caja label{font-size:12.5px;margin:0 0 4px}
.acciones-fila__caja input,.acciones-fila__caja select{font-size:15px;padding:9px 11px}
.acciones-fila__otras{
  display:flex;flex-direction:column;gap:8px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
}
.acciones-fila__otras .button{width:100%;justify-content:center}
.button.peligro{color:var(--fallo);border-color:#9d4a3055}
.button.peligro:hover{background:#9d4a3012;color:var(--fallo);border-color:var(--fallo)}

@media(max-width:700px){
  .acciones-fila__caja{position:static;width:100%;box-shadow:none;margin-top:10px}
}

/* ============================================================================
   LA BARRA DE ABAJO (solo en el movil)
   ----------------------------------------------------------------------------
   En el telefono las pestanas de arriba se salian de la pantalla: habia que
   arrastrarlas de lado y media la mitad ni se veia. Aqui van abajo, como en
   cualquier aplicacion: cuatro sitios fijos, un «Mas» con el resto, y todo a
   la altura del pulgar.
   ========================================================================== */
.barra{ display:none }

@media(max-width:700px){
  /* arriba se queda solo el logo */
  .site-header .header-nav{ display:none }
  .site-header .envoltorio{ min-height:58px; flex-wrap:nowrap }

  .barra{
    /* minmax(0,1fr) y no 1fr: con 1fr la columna nunca baja del ancho de su
       palabra mas larga y la barra entera se iba a 613 px en una pantalla de
       393, arrastrando la pagina de lado. */
    display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:color-mix(in srgb,var(--cream) 94%,transparent);
    backdrop-filter:blur(16px);
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .barra__sitio{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-height:56px; padding:8px 2px 7px;
    color:var(--suave); font-size:10.5px; line-height:1.2; text-align:center;
    text-decoration:none; -webkit-tap-highlight-color:transparent;
    list-style:none; cursor:pointer; min-width:0; overflow:hidden;
  }
  .barra > *{ min-width:0 }
  .barra__sitio::-webkit-details-marker{ display:none }
  .barra__sitio svg{ width:23px; height:23px; display:block }
  .barra__sitio span{
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .barra__sitio.activo,
  .barra__mas.activo > .barra__sitio,
  .barra__mas[open] > .barra__sitio{ color:var(--pine); font-weight:600 }
  .barra__sitio.activo svg{
    background:var(--pine); color:var(--cream);
    border-radius:60px; padding:3px 9px; width:41px; height:26px;
  }

  /* --- el «Mas» y su sabana ------------------------------------------------ */
  .barra__mas{ position:relative }
  .barra__sabana{
    position:absolute; right:4px; bottom:calc(100% + 8px);
    min-width:208px; padding:7px;
    background:var(--cream);
    border:1px solid var(--line); border-radius:16px;
    box-shadow:0 22px 48px -18px rgba(7,95,101,.42);
    display:flex; flex-direction:column;
  }
  .barra__sabana a{
    display:flex; align-items:center; gap:12px;
    padding:12px 14px; border-radius:11px; min-height:46px;
    color:var(--ink); font-size:15px; text-decoration:none;
  }
  .barra__sabana a svg{ width:20px; height:20px; flex:0 0 auto; color:var(--teal) }
  .barra__sabana a.activo{ background:var(--pine); color:var(--cream) }
  .barra__sabana a.activo svg{ color:var(--cream) }

  /* que la barra no tape el final de la pagina */
  main{ padding-bottom:calc(74px + env(safe-area-inset-bottom)) }
  .site-footer{ padding-bottom:calc(78px + env(safe-area-inset-bottom)) }

  /* con el dedo, nada por debajo de 44 px */
  .button, a.button, button.button{ min-height:46px }
  input[type=checkbox], input[type=radio]{ width:22px; height:22px; accent-color:var(--pine) }
  label:has(> input[type=checkbox]){ display:flex; align-items:center; gap:10px; min-height:44px }
  input[type=file]{ min-height:44px; padding:10px 0 }
  .lista .accion .button.pequeno{ min-height:42px; padding-inline:16px }

  /* Las pastillas de pestana median 33 px: con el dedo se falla. */
  .pestana, a.pestana, .ficha__saltos a{
    min-height:42px; display:inline-flex; align-items:center;
    padding-top:0; padding-bottom:0;
  }
  /* La × de quitarle un material median 19 px. Se le da sitio para el dedo
     sin hinchar la chapa: 30 px de circulo dentro de una chapa de 36. */
  .chapa{ min-height:36px; padding-left:13px }
  .chapa__x{
    min-width:30px; min-height:30px; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:17px;
  }
}

/* ----------------------------------------------------------------------------
   LAS TABLAS EN EL MOVIL
   Se apilan: cada fila pasa a ser una fichita y cada dato lleva delante el
   nombre de su columna, que lo pone espacio.js copiandolo de la cabecera.
   Si el JavaScript no llega, la tabla se queda arrastrandose de lado, que es
   feo pero funciona.
   -------------------------------------------------------------------------- */
@media(max-width:700px){
  .tabla.tabla--apilable{ display:block; overflow:visible; border-collapse:separate }
  .tabla--apilable thead{ display:none }
  .tabla--apilable tbody{ display:block }
  .tabla--apilable tr{
    display:block; margin:0 0 10px;
    border:1px solid var(--line); border-radius:13px;
    padding:11px 15px; background:#fff;
  }
  .tabla--apilable tr:last-child{ margin-bottom:0 }
  .tabla--apilable td{
    display:flex; align-items:baseline; justify-content:space-between; gap:16px;
    border:0; padding:6px 0; text-align:right; width:auto;
  }
  .tabla--apilable td::before{
    content:attr(data-et);
    flex:0 0 auto; text-align:left;
    color:var(--suave); font-size:11.5px; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase;
  }
  .tabla--apilable td:not([data-et])::before,
  .tabla--apilable td[data-et=""]::before{ content:none }
  /* La celda de los botones: apilados y a todo lo ancho.
     Va con :has() porque «derecha» la llevan tambien las cifras, y esas
     tienen que seguir siendo etiqueta + valor en la misma linea.
     Y con !important porque los formularios llevan display:inline y
     white-space:nowrap escritos en el propio atributo style, que si no
     ganan ellos: dos botones en linea que no pueden partirse empujaban la
     pagina a 613 px en una pantalla de 393. */
  .tabla--apilable td:has(form),
  .tabla--apilable td:has(.button){
    display:flex; flex-direction:column; align-items:stretch; gap:8px;
    white-space:normal !important; text-align:left;
    padding-top:11px; margin-top:5px; border-top:1px solid var(--line);
  }
  .tabla--apilable td:has(form) > form{ display:block !important; width:100% }
  .tabla--apilable td:has(form) .button,
  .tabla--apilable td:has(.button) > .button{ width:100%; justify-content:center }
  .tabla--apilable td:empty{ display:none }
}

/* ============================================================================
   LAS DOS MITADES DE SU CASA
   Arriba del todo, dos pestanas grandes: la web (metricas y solicitudes, que
   vive en /admin/) y la consulta (pacientes, citas y facturas, que es esto).
   La misma contrasena abre las dos, asi que se pasa de una a otra sin teclear.
   ========================================================================== */
.mundos{
  background:color-mix(in srgb,var(--cream) 92%,transparent);
  border-bottom:1px solid var(--line);
  position:sticky; top:74px; z-index:35;
  backdrop-filter:blur(14px);
}
.mundos .envoltorio{ display:flex; gap:8px; padding-block:9px }
.mundo{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; gap:1px;
  padding:9px 16px; border-radius:14px;
  border:1px solid transparent; text-decoration:none;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.mundo:hover{ background:#08676c0f; text-decoration:none }
.mundo__que{ font-size:15px; color:var(--ink); font-weight:600 }
.mundo__cual{ font-size:12.5px; color:var(--suave) }
.mundo.activo{ background:var(--pine); border-color:var(--pine) }
.mundo.activo .mundo__que{ color:var(--cream) }
.mundo.activo .mundo__cual{ color:#f3f0e7aa }

@media(max-width:700px){
  .mundos{ position:static }
  .mundos .envoltorio{ gap:6px; padding-block:8px }
  .mundo{ padding:8px 12px; border-radius:12px }
  .mundo__que{ font-size:13.5px }
  .mundo__cual{ font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
}

/* ============================================================== arrastrar
   La caja de subir. El aro gira alrededor del logo mientras sube y se
   cierra como una barra de progreso cuando el navegador sabe cuanto queda. */
.subida{position:relative}
.soltar{
  display:flex;gap:22px;align-items:center;
  padding:26px 24px;margin:0 0 22px;
  border:2px dashed var(--line);border-radius:var(--radio);
  background:var(--papel);cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
.soltar:hover{border-color:var(--teal);background:#08676c06}
.soltar--encima{border-color:var(--teal);background:#08676c0f;transform:scale(1.005)}
.soltar__campo{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.soltar__dibujo{position:relative;flex:0 0 96px;width:96px;height:96px;display:grid;place-items:center}
.soltar__aro{position:absolute;inset:0;width:96px;height:96px;transform:rotate(-90deg);overflow:visible}
.soltar__pista{fill:none;stroke:var(--line);stroke-width:3}
.soltar__avance{
  fill:none;stroke:var(--teal);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:339.29;stroke-dashoffset:339.29;
  transition:stroke-dashoffset .3s var(--ease),stroke .3s var(--ease);
}
.soltar__logo{width:58px;height:auto;opacity:.9;transition:transform .45s var(--frenada),opacity .3s}
.soltar:hover .soltar__logo{transform:translateY(-2px)}
.soltar__texto{display:block;min-width:0}
.soltar__titular{display:block;font-weight:600;font-size:17px;color:var(--pine);margin-bottom:3px}
.soltar__pie{display:block;color:var(--suave);font-size:14px;line-height:1.5}
.soltar__elegido{display:none;margin-top:8px;font-size:14px;color:var(--teal);font-weight:600}
.soltar__elegido:not(:empty){display:block}

/* subiendo: el aro da vueltas y el logo respira */
.soltar--subiendo{cursor:progress;border-style:solid;border-color:var(--teal)}
.soltar--subiendo .soltar__aro{animation:soltar-gira 1.5s linear infinite}
.soltar--subiendo .soltar__logo{animation:soltar-respira 1.8s var(--ease) infinite}
@keyframes soltar-gira{to{transform:rotate(270deg)}}
@keyframes soltar-respira{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}

/* hecho: el aro se cierra entero y da un golpecito */
.soltar--hecho{border-style:solid;border-color:var(--teal);background:#0b8b8c0f}
.soltar--hecho .soltar__avance{stroke-dashoffset:0}
.soltar--hecho .soltar__logo{animation:soltar-ole .6s var(--frenada)}
@keyframes soltar-ole{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
.soltar--mal{border-style:solid;border-color:var(--fallo);background:#9d4a300d}
.soltar--mal .soltar__avance{stroke:var(--fallo)}
@media (prefers-reduced-motion:reduce){
  .soltar__aro,.soltar__logo{animation:none!important;transition:none}
}

/* ================================================= pestañas y buscador */
.filtros{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:0 0 14px;margin:0 0 6px;border-bottom:1px solid var(--line);
}
.filtros__pestanas,.periodo__pestanas{display:flex;flex-wrap:wrap;gap:6px}
.pestana,a.pestana{
  appearance:none;border:1px solid transparent;background:transparent;
  font-family:inherit;font-size:14.5px;color:var(--suave);
  padding:7px 14px;border-radius:999px;cursor:pointer;line-height:1.2;
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.pestana:hover{background:#08676c0d;color:var(--pine);text-decoration:none}
.pestana--aqui,a.pestana--aqui{background:var(--pine);color:var(--cream)}
.pestana--aqui:hover{background:var(--pine);color:var(--cream)}
.pestana__n{
  font-size:11.5px;font-variant-numeric:tabular-nums;
  background:#08676c14;color:inherit;border-radius:999px;padding:1px 7px;opacity:.8;
}
.pestana--aqui .pestana__n{background:#ffffff26}
.filtros__buscar{flex:0 1 260px}
.filtros__buscar input{
  width:100%;margin:0;padding:9px 14px;font-size:15px;
  border:1px solid var(--line);border-radius:999px;background:var(--papel);
  font-family:inherit;color:var(--ink);
}
.filtros__buscar input:focus{outline:none;border-color:var(--teal);background:var(--blanco)}

/* ==================================================== fichas de la lista */
.lista--materiales li,.lista--facturas li{align-items:flex-start;padding:18px 0}
.lista--materiales .icono,.lista--facturas .icono{margin-top:2px}
.material__datos{display:block}
.material__nota{display:block;margin-top:2px}
.material__nadie{display:block;margin-top:6px;font-size:13.5px;color:var(--suave);font-style:italic}
.material__acciones{display:flex;flex-wrap:wrap;gap:6px;align-items:center;align-self:flex-start!important}
.material__acciones form{margin:0}
.factura__titulo{display:flex!important;flex-wrap:wrap;gap:8px;align-items:center}

.tienen{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.tienen__titulo{font-size:13px;color:var(--suave)}
.chapa{
  display:inline-flex;align-items:center;gap:4px;
  background:#0b8b8c14;color:var(--teal);border-radius:999px;
  padding:3px 5px 3px 11px;font-size:13px;font-weight:600;
}
.chapa form{margin:0;display:inline-flex}
.chapa__x{
  appearance:none;border:0;background:transparent;color:inherit;cursor:pointer;
  font-size:15px;line-height:1;padding:2px 5px;border-radius:999px;opacity:.55;
}
.chapa__x:hover{opacity:1;background:#0b8b8c22}

.estado{display:inline-block;margin-top:6px;font-size:13px;font-weight:600}
.estado--bien{color:var(--teal)}
.estado--ojo{color:var(--copper)}
.estado--mal{color:var(--fallo)}
/* Contabilidad (25-09-2026): cada cobro y su factura con su color; la regla gris de .lista .cuerpo span lo tapaba */
#cobros .lista .cuerpo .estado--bien{color:var(--teal)}
#cobros .lista .cuerpo .estado--ojo{color:var(--copper)}
#cobros .lista .cuerpo .estado--mal{color:var(--fallo)}

/* ---- Ajustes, Contabilidad y lo nuevo del 23-09-2026 --------------------
   Cada cosa montada pero sin encender lleva su etiqueta con las mismas
   palabras en todas partes: «funcionando», «listo · falta tu clave»,
   «montado · apagado». */
.ajuste{display:flex;gap:16px;align-items:flex-start;text-decoration:none;color:inherit;margin:0;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.ajuste:hover{border-color:var(--pine);text-decoration:none}
.ajuste__icono,.dar__icono{flex-shrink:0;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:#08676c12;color:var(--pine)}
.ajuste__icono svg,.dar__icono svg{width:24px;height:24px}
.ajuste__texto{display:flex;flex-direction:column;gap:6px;min-width:0}
.ajuste__texto strong{font-size:17px;color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ajuste__texto span{color:var(--suave);font-size:14.5px;line-height:1.55}
.conexion{margin:0}
.conexion > p{font-size:15.5px;line-height:1.65}
.conexion__cabecera{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin:0 0 10px}
.conexion__cabecera h3{margin:0}
.conexion__lista{margin:0 0 14px;padding-left:18px;color:var(--ink);font-size:14.5px;line-height:1.7}
.conexion__conectar{margin:14px 0 0;border-top:1px solid var(--line);padding-top:12px}
.conexion__conectar summary{cursor:pointer;font-weight:600;color:var(--pine)}
.conexion__conectar summary span{font-weight:400;color:var(--suave)}
.conexion__elegir fieldset{border:0;margin:0 0 12px;padding:0}
.conexion__elegir legend{font-weight:600;font-size:14px;margin:0 0 6px;color:var(--ink)}
.conexion__encender{margin-top:14px}
.conexion__quitar{margin-top:10px}
.opcion{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-size:14.5px;line-height:1.5;cursor:pointer;font-weight:400}
.opcion input{margin-top:4px;flex-shrink:0}
.dar__opcion{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;margin:0;
  transition:border-color .25s var(--ease)}
.dar__opcion:hover{border-color:var(--pine);text-decoration:none}
.dar__opcion strong{font-size:18px;color:var(--ink)}
.dar__opcion span{color:var(--suave);font-size:14.5px;line-height:1.6}
.dar__opcion .dar__pie{margin-top:auto;font-size:13px;color:var(--pine);font-weight:600}
.opcion-pago{margin:0}
.opcion-pago h2{margin:0 0 6px}
.opcion-pago__cuanto{margin:0 0 14px;color:var(--suave)}
.opcion-pago__cuanto strong{font-size:30px;color:var(--pine);font-family:inherit}
.opcion-pago ul{margin:0;padding-left:18px;font-size:14.5px;line-height:1.75;color:var(--ink)}
.tabla--pagos th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--suave);font-weight:600}
.tabla--pagos td,.tabla--pagos th{padding:11px 8px;border-bottom:1px solid var(--line)}
.tabla-scroll{overflow-x:auto}
@media(max-width:700px){
  /* En el móvil cada fila es una ficha: la primera celda es su título, no un par
     etiqueta-valor (si no, «Tu espacio» y el resto de la frase se separaban). */
  .tabla--pagos td:first-child{display:block;text-align:left;font-size:15px;padding:2px 0 9px;margin:0 0 4px;border-bottom:1px solid var(--line)}
}
.ejemplo-sitios .tarjeta{margin:0}
.ejemplo-fila{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:12px;background:#f7f5f1;margin:8px 0 10px}
.ejemplo-fila strong{color:var(--ink)}
.ejemplo-fila > span{font-size:14px;color:var(--suave)}
.ejemplo-botones{display:flex;gap:6px;margin-top:4px}
.papel-factura{position:relative;max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:28px 28px 22px;box-shadow:var(--sombra);overflow:hidden}
.papel-factura__sello{display:block;margin:-28px -28px 20px;padding:7px 12px;text-align:center;background:var(--fallo);color:#fff;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.papel-factura__cabecera{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:0 0 20px}
.papel-factura__cabecera div{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--suave)}
.papel-factura__cabecera strong{color:var(--ink);font-size:15.5px}
.papel-factura__ley{font-size:13px;color:var(--suave);margin:14px 0}
.papel-factura__pie{display:flex;gap:14px;align-items:center;font-size:13.5px;color:var(--suave);border-top:1px dashed var(--line);padding-top:14px}
.papel-factura__qr{flex-shrink:0;width:64px;height:64px;border:2px dashed var(--suave);border-radius:6px;display:grid;place-items:center;
  font-weight:700;color:var(--suave);font-size:13px}
.suelto__form{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.suelto__form select{max-width:220px}
.suelto__otra{display:inline-block}
.suelto__otra > summary{list-style:none;cursor:pointer}
.suelto__otra > summary::-webkit-details-marker{display:none}
.suelto__otra[open] > summary{margin-bottom:8px}
.suelto__otra .ayuda{flex-basis:100%;margin:0}
@media(max-width:640px){.suelto__form select{max-width:none;flex:1 1 100%}.suelto__otra{display:block;width:100%}}
.copiar-factura{margin-top:6px}

/* ---- las carpetas de cada paciente (23-09-2026) ---- */
.carpetas{display:grid;gap:10px;margin-top:18px}
.carpeta{border:1px solid var(--line);border-radius:var(--radio-s);background:var(--blanco)}
.carpeta[open]{background:#fcfbf8}
.carpeta__cabecera{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;list-style:none}
.carpeta__cabecera::-webkit-details-marker{display:none}
.carpeta__icono{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#d5b68133;color:var(--copper);flex-shrink:0}
.carpeta__icono svg{width:20px;height:20px}
.carpeta__nombre{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.35}
.carpeta__nombre strong{color:var(--ink);font-size:15.5px}
.carpeta__nombre span{color:var(--suave);font-size:13.5px}
.carpeta__cuantos{min-width:28px;height:28px;border-radius:14px;display:grid;place-items:center;background:#08676c12;color:var(--pine);font-weight:700;font-size:13px}
.carpeta .lista{margin:0 12px 10px}
.carpeta__vacia{margin:0 14px 12px 60px;color:var(--suave);font-size:14px}

/* lo que se despliega dentro de una ficha */
.plegable{
  margin:14px 0 2px;padding:16px;border-radius:var(--radio-s);
  background:var(--papel);border:1px solid var(--line);
  animation:plegable-abre .22s var(--ease);
}
@keyframes plegable-abre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.plegable .campo{margin:0 0 12px}
.plegable label{font-size:12.5px}
.plegable__botones{display:flex;gap:8px;flex-wrap:wrap}

/* =============================================== el tramo de las facturas */
.periodo{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  margin:0 0 18px;
}
.periodo--pegajoso{
  position:sticky;top:112px;z-index:18;
  background:color-mix(in srgb,var(--fondo) 95%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:10px 12px;margin-left:-12px;margin-right:-12px;
  border:1px solid transparent;border-radius:14px;
}
.periodo--pegajoso.is-stuck{
  border-color:var(--line);box-shadow:0 8px 24px #1e49421a;
}
/* Al saltar a un apartado de Contabilidad, que la barra pegada no lo tape (07-10-2026). */
#apuntar,#sueltos,#cobros,#subida{scroll-margin-top:196px}
@media(max-width:700px){#apuntar,#sueltos,#cobros,#subida{scroll-margin-top:296px}}
.periodo__cual{display:flex;gap:8px;align-items:center;margin:0}
.periodo__cual input,.periodo__cual select{
  margin:0;padding:8px 13px;font-size:15px;font-family:inherit;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;background:var(--blanco);
}
.periodo__nota{font-size:14px;color:var(--suave)}

.cuentas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 24px}
.cuenta{
  background:var(--blanco);border:1px solid var(--line);border-radius:var(--radio);
  padding:18px 20px;box-shadow:var(--sombra);min-width:0;
}
.cuenta--fuerte{background:var(--pine);border-color:var(--pine);color:var(--cream)}

/* ---- Resumen: hoy y mañana en bloques horarios (23-09-2026) ----------------
   Cada bloque lleva el color de su calendario, el mismo que en la Agenda. El
   fondo va primero en un tono fijo por si el navegador no sabe color-mix. */
.dia-bloques__cabecera{display:flex;align-items:baseline;justify-content:space-between;gap:6px 12px;margin:0 0 14px;flex-wrap:wrap}
.dia-bloques__cabecera h2{margin:0}
.dia-bloques__cabecera span{color:var(--suave);font-size:14px}
.dia-bloques__entero{margin:0 0 12px;font-size:14px;color:var(--suave)}
.dia-bloques__entero span{font-weight:600;color:var(--ink)}
.bloques{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bloque{display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:12px;
  background:#f7f5f1;background:color-mix(in srgb,var(--cita) 9%,#fff);border-left:5px solid var(--cita)}
.bloque__hora{display:flex;flex-direction:column;min-width:50px;font-variant-numeric:tabular-nums;line-height:1.25}
.bloque__hora strong{font-size:16px;color:var(--ink)}
.bloque__hora span{font-size:13px;color:var(--suave)}
.bloque__que{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.35}
.bloque__que strong{font-size:15.5px;color:var(--ink);overflow-wrap:anywhere}
.bloque__que > span{font-size:13.5px;color:var(--suave)}
.bloque__boton{margin-left:auto;flex-shrink:0}
.bloque--suave{background:#faf8f4;border-left-style:dashed}
.bloque--pasado{opacity:.55}
@media(min-width:960px){ .atajos.atajos--tres{grid-template-columns:repeat(3,1fr)} }
/* La pasarela que ha elegido, marcada sin gritar. */
.tarjeta--elegida{border-color:var(--pine);box-shadow:inset 0 0 0 1px var(--pine),var(--sombra)}
.cuenta__que{display:block;font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--suave);margin-bottom:6px}
.cuenta--fuerte .cuenta__que{color:#ffffffb0}
.cuenta__cuanto{
  display:block;font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:34px;line-height:1.05;letter-spacing:-.03em;color:var(--pine);
  font-variant-numeric:tabular-nums;
}
.cuenta--fuerte .cuenta__cuanto{color:var(--cream)}
.cuenta__pie{display:block;margin-top:5px;font-size:13px;color:var(--suave)}
.cuenta--fuerte .cuenta__pie{color:#ffffffa8}
.cuenta__pie--ojo{color:var(--copper);font-weight:600}

/* ================================================== cómo se ve el papel */
.ojeada{
  margin:16px 0 4px;border:1px solid var(--line);border-radius:var(--radio-s);
  background:var(--papel);overflow:hidden;
}
.ojeada__cabecera{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-bottom:1px solid var(--line);
  font-size:14px;color:var(--pine);
}
.ojeada__papel{width:100%;height:460px;border:0;display:block;background:var(--blanco)}

@media (max-width:860px){
  .cuentas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .soltar{flex-direction:column;text-align:center;gap:14px;padding:22px 18px}
  .soltar__dibujo{flex:0 0 78px;width:78px;height:78px}
  .soltar__aro{width:78px;height:78px}
  .cuentas{grid-template-columns:1fr}
  .cuenta__cuanto{font-size:30px}
  .filtros{flex-direction:column;align-items:stretch}
  .filtros__buscar{flex:1 1 auto}
  .periodo{flex-direction:column;align-items:stretch}
  /* En columna, un hijo con min-width:auto estira la linea entera hasta su
     ancho minimo. Con los cuatro sitios de la agenda (Rocafort, Moncada,
     Valencia, Videollamada) eso ponia la fila en 435 px dentro de una
     pantalla de 393 y la pagina entera se arrastraba de lado. */
  .filtros > *, .periodo > *{min-width:0}
  .periodo__pestanas{flex-wrap:wrap;overflow-x:visible;padding-bottom:0}
  .periodo__cual{flex-wrap:wrap}
  .periodo__cual input[type=date]{flex:1 1 auto;min-width:0}
  /* Cuatro botones uno debajo de otro hacian la ficha larguisima en el
     telefono: van de dos en dos. */
  .material__acciones{width:100%;margin-top:12px;gap:8px}
  .material__acciones > *{flex:1 1 calc(50% - 4px);min-width:0}
  .material__acciones .button{width:100%;justify-content:center}
  .ojeada__papel{height:60vh}
}

/* ================================================== cada sitio, su sección */
.rejilla.cuatro{grid-template-columns:1fr}
@media (min-width:720px){.rejilla.cuatro{grid-template-columns:repeat(4,1fr)}}

.sitio{
  background:var(--blanco);border:1px solid var(--line);border-radius:var(--radio);
  box-shadow:var(--sombra);overflow:hidden;margin:0 0 22px;
}
.sitio__cabecera{
  position:relative;min-height:132px;display:flex;align-items:flex-end;
  padding:22px 24px;gap:14px;
  background:linear-gradient(120deg,#08676c 0%,#0b8b8c 58%,#146f74 100%);
  color:var(--cream);isolation:isolate;
}
/* Sin foto, un patrón suyo: las mismas ondas de agua de su web */
.sitio__cabecera::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.22;
  background-image:radial-gradient(circle at 18% 120%,#b9d6d2 0,transparent 42%),
                   radial-gradient(circle at 86% -30%,#d5b681 0,transparent 46%);
}
.sitio--online .sitio__cabecera{
  background:linear-gradient(120deg,#986c3e 0%,#b98a55 55%,#8a5f36 100%);
}
.sitio__foto{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.sitio__velo{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,#08676c00 22%,#04494dcc 100%);
}
.sitio__texto{position:relative;z-index:2;flex:1;min-width:0}
.sitio__texto h2{color:var(--cream);margin:0 0 4px;font-size:clamp(25px,3.2vw,34px)}
.sitio__texto .eyebrow{color:#ffffffb5;margin:0 0 2px}
.sitio__pie{margin:0;font-size:14px;color:#ffffffcf}

.sitio__camara{position:relative;z-index:2;flex:0 0 auto}
.sitio__subefoto{
  margin:0;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:#ffffff1f;border:1px solid #ffffff44;color:var(--cream);
  border-radius:999px;padding:7px 14px;font-size:13.5px;
  backdrop-filter:blur(6px);transition:background .18s var(--ease);
}
.sitio__subefoto:hover{background:#ffffff33}
.sitio__subefoto input[type=file]{
  position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;
}
.sitio__subefoto svg{width:17px;height:17px;display:block}

.sitio__cuerpo{padding:6px 24px 22px}

.franjas{list-style:none;margin:0;padding:0}
.franja{
  display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.franja:last-of-type{border-bottom:none}
.franja__dia{flex:0 0 110px;font-weight:600;color:var(--ink)}
.franja__horas{
  font-variant-numeric:tabular-nums;font-size:16px;color:var(--pine);
  background:#08676c0d;border-radius:999px;padding:4px 13px;
}
.franja__sesion{flex:1;min-width:120px;font-size:14px;color:var(--suave)}
.franja__botones{display:flex;gap:6px;flex-wrap:wrap}
.franja__botones form{margin:0}
.franja .plegable{flex:1 0 100%}

.dias{display:flex;flex-wrap:wrap;gap:7px}
.dias__uno{display:inline-flex;margin:0;font-weight:400;cursor:pointer}
.dias__uno input{position:absolute;opacity:0;width:0;height:0}
.dias__uno span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:52px;padding:8px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--blanco);
  font-size:13.5px;letter-spacing:.02em;color:var(--suave);
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
}
.dias__uno input:checked + span{background:var(--pine);border-color:var(--pine);color:var(--cream)}
.dias__uno input:focus-visible + span{outline:2px solid var(--teal);outline-offset:2px}

.sitio__anadir{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}
.sitio__anadir form{margin:0}
.sitio__anadir .plegable{flex:1 0 100%;order:9}
.sitio__nota{
  margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--suave);
}

@media (max-width:620px){
  .sitio__cabecera{flex-direction:column;align-items:flex-start;padding:18px}
  .sitio__cuerpo{padding:4px 18px 18px}
  .franja__dia{flex:0 0 100%}
  .franja__sesion{flex:0 0 100%}
  .franja__botones{width:100%}
  .franja__botones .button{flex:1}
  .dias__uno span{min-width:46px;padding:7px 10px}
}

/* ==================================================== la ficha de una persona */
.migas{margin:0 0 14px;font-size:14px}
.migas a{color:var(--suave)}
.migas a:hover{color:var(--teal)}

.ficha{
  background:var(--blanco);border:1px solid var(--line);border-radius:var(--radio);
  box-shadow:var(--sombra);padding:24px 26px;margin:0 0 22px;
}
.ficha__quien{display:flex;gap:18px;align-items:center}
.ficha__quien > div{min-width:0}
.ficha__quien h1{font-size:clamp(30px,4.4vw,44px);margin:0 0 4px}
/* Un nombre larguísimo sin espacios (de un Excel) se parte en vez de sacar la
   página de lado a cualquier ancho (25-09-2026). */
.ficha__quien h1,.cabecera-pagina h1,.quien{overflow-wrap:anywhere}
/* Lo mismo donde sale su nombre o el título de un documento: los avisos del
   Resumen, las cabeceras de cada parte de la ficha y las listas. */
.aviso,.cabecera-seccion h2,.cabecera-seccion p,.lista .cuerpo strong,.lista .cuerpo span,.material__titulo{overflow-wrap:anywhere}
.cabecera-seccion{min-width:0}
.interruptor span,.estado{overflow-wrap:anywhere;min-width:0}
.sitio__nuevo,.sitio__anadir > *{min-width:0}
.ficha__inicial{
  flex:0 0 62px;width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#08676c,#0b8b8c);color:var(--cream);
  font-family:"Cormorant Garamond",Georgia,serif;font-size:29px;line-height:1;
}
.ficha__datos{margin:0;font-size:14px;color:var(--suave)}
.ficha__numeros{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--line);
}
.ficha__numero{font-size:14px;color:var(--suave)}
.ficha__numero strong{
  display:block;font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:26px;line-height:1.1;color:var(--pine);font-variant-numeric:tabular-nums;
}
.ficha__numero--ojo strong{color:var(--copper)}
.ficha__proxima{
  margin:16px 0 0;padding:12px 16px;border-radius:var(--radio-s);
  background:#08676c0a;font-size:14.5px;
}
.ficha__enlace{font-weight:600}
.ficha__enlace:hover{text-decoration:none;opacity:.8}

.nota__texto{
  margin:9px 0 0;padding:13px 16px;border-radius:var(--radio-s);
  background:var(--papel);border:1px solid var(--line);
  font-size:15px;line-height:1.6;color:var(--ink);white-space:normal;
  /* Un enlace o un correo largo sin espacios se parte en vez de sacar la
     página de lado en el móvil (25-09-2026). */
  overflow-wrap:anywhere;min-width:0;
}

.interruptor{
  display:flex;gap:10px;align-items:center;margin:0 0 14px;
  font-weight:400;font-size:14.5px;cursor:pointer;
}
.interruptor input{width:auto;margin:0}

@media (max-width:620px){
  .ficha{padding:20px 18px}
  .ficha__quien{gap:14px}
  .ficha__inicial{flex:0 0 50px;width:50px;height:50px;font-size:24px}
  .ficha__numeros{gap:10px 18px}
}

/* ========================================== el día abierto, hora por hora */
.horario-dia{list-style:none;margin:6px 0 0;padding:0;display:block}
.hora-fila{
  display:flex;gap:14px;align-items:center;
  padding:12px 14px;margin-bottom:6px;border-radius:var(--radio-s);
  border:1px solid var(--line);background:var(--blanco);
}
.hora-fila__hora{
  flex:0 0 64px;font-variant-numeric:tabular-nums;font-weight:600;
  font-size:16px;color:var(--pine);
}
.hora-fila__que{flex:1;min-width:0}
.hora-fila__que strong{display:block;font-weight:600;font-size:15px;color:var(--ink)}
.hora-fila__que span{display:block;font-size:13.5px;color:var(--suave)}
.hora-fila__boton{flex:0 0 auto}
.hora-fila__boton form{margin:0}

.hora-fila--libre{border-left:4px solid var(--teal)}
.hora-fila--cogida{border-left:4px solid var(--pine);background:#08676c08}
.hora-fila--cerrada{border-left:4px solid var(--line);background:var(--papel);opacity:.78}
.hora-fila--cerrada .hora-fila__hora{color:var(--suave);text-decoration:line-through}
.hora-fila--pasada{opacity:.55}

@media (max-width:620px){
  .hora-fila{flex-wrap:wrap;gap:8px 12px}
  .hora-fila__que{flex:1 1 60%}
  .hora-fila__boton{flex:1 1 100%}
  .hora-fila__boton .button{width:100%;justify-content:center}
}

.lista .cuerpo .material__datos strong{display:inline;font-size:inherit}
/* Una negrita en medio de la frase de debajo no es un titulo: se queda en su
   linea. Sin esto «Tiene API» salia solo, partiendo la frase (23-09-2026). */
.lista .cuerpo > span strong{display:inline;font-size:inherit}
.lista .cuerpo .quien{display:inline}
/* La revisión de la factura ocupa su propia fila, sin comprimir el cobro. */
#cobros .material:has(> .factura-revision){flex-wrap:wrap}
#cobros .factura-revision{flex:1 1 100%;min-width:0;max-width:100%}
#cobros .factura-revision > .tarjeta{box-sizing:border-box;width:100%;margin-top:12px;overflow-wrap:anywhere}

.hora-fila__que .ident--solo{display:inline;width:auto}

/* ================================================ la historia clínica */
.ficha__saltos{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.ficha__saltos a{
  font-size:13.5px;color:var(--pine);background:#08676c0d;border-radius:999px;
  padding:6px 13px;text-decoration:none;
}
.ficha__saltos a:hover{background:#08676c1a}
.historia{display:grid;gap:14px;margin:0 0 16px}
.historia__bloque .eyebrow{margin:0 0 6px}
.historia__bloque .nota__texto{margin-top:0}

/* ===================================================== la página de pago */
.pago{min-height:70vh;display:grid;place-items:center;padding:24px 0}
.pago__papel{
  background:var(--blanco);border:1px solid var(--line);border-radius:var(--radio);
  box-shadow:var(--sombra);padding:34px 32px;max-width:460px;width:100%;text-align:center;
}
.pago__papel h1{font-size:clamp(32px,5vw,44px);margin:0 0 10px}
.pago__papel > p{color:var(--suave);max-width:38ch;margin:0 auto 6px}
.pago__cuenta{
  margin:24px 0 18px;padding:18px 20px;border-radius:var(--radio-s);
  background:var(--papel);border:1px solid var(--line);text-align:left;
}
.pago__linea{display:flex;justify-content:space-between;gap:16px;padding:6px 0;font-size:15px}
.pago__linea--suave{color:var(--suave);font-size:14px}
.pago__linea--total{
  border-top:1px solid var(--line);margin-top:8px;padding-top:12px;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:22px;color:var(--pine);
}
.pago__linea--total strong{font-weight:400;font-size:26px;font-variant-numeric:tabular-nums}
.pago__cita{font-size:14px;color:var(--suave);margin:0 0 18px}
.pago__ref{font-size:13px;color:var(--suave);margin:16px 0 0}
.pago__pie{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--suave);line-height:1.6}
.pendiente-pago{border-left:4px solid var(--copper)}

/* ============================================ el detalle de una sesión */
.sesion-detalle td{
  padding-top:0!important;border-top:0!important;
  font-size:13.5px;color:var(--suave);
}
.sesion-detalle__que{display:inline-block;margin-right:14px}
.sesion-detalle__que--nadie{color:var(--copper)}
.sesion-detalle__duracion{display:inline-flex;gap:8px;align-items:center;margin:0}
.sesion-detalle__duracion label{margin:0;font-size:13px;font-weight:400;color:var(--suave);
  display:inline-flex;gap:6px;align-items:center}
.sesion-detalle__duracion input{
  width:66px;margin:0;padding:5px 9px;font-size:14px;text-align:center;
  border:1px solid var(--line);border-radius:8px;background:var(--blanco);
}
@media (max-width:620px){
  .sesion-detalle__duracion{display:flex;margin-top:8px}
  .pago__papel{padding:26px 20px}
}

/* ============================================================================
   LA AGENDA, COMO SU GOOGLE CALENDAR (24-09-2026)
   ----------------------------------------------------------------------------
   Lo que pidió el 23-09: «exactamente como Google Calendar». A la izquierda
   «Mis calendarios»; en medio la semana hora a hora (o el día, o el mes); y
   a la derecha, al pulsar, todo lo de ese día sin salir de la pantalla. En el
   móvil la semana es una lista día a día y el panel, una hoja que sube.
   Los colores de cada cosa llegan en --c (fondo) y --ct (letra).
   ========================================================================== */
.p-g-agenda .envoltorio{max-width:1720px}
.p-g-agenda main{padding-top:20px}
.ag{--alto-hora:48px;--ag-raya:#08676c1c;--ag-ahora:#d93025;--ag-cals:240px;--ag-panel:370px}
.ag-apagado,.ag-sobra{display:none !important}

/* --- la barra de arriba ---------------------------------------------------- */
.ag-barra{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;margin:0 0 16px}
.ag-barra__hoy.button{min-height:40px;padding:8px 20px}
.ag-barra__flechas{display:inline-flex;gap:2px}
.ag-flecha{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink);font-size:26px;line-height:1;text-decoration:none;padding-bottom:3px}
.ag-flecha:hover{background:#08676c12;text-decoration:none}
.ag-barra__titulo{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(24px,2.6vw,32px);
  font-weight:500;color:var(--pine);letter-spacing:-.02em;line-height:1.1;margin:0 6px 0 4px;min-width:0}
.ag-vistas{margin-left:auto;display:inline-flex;gap:2px;padding:3px;background:var(--blanco);
  border:1px solid var(--line);border-radius:60px}
.ag-vistas__una{padding:7px 16px;border-radius:60px;font-size:14.5px;color:var(--ink);text-decoration:none;
  min-height:36px;display:inline-flex;align-items:center}
.ag-vistas__una:hover{background:#08676c10;text-decoration:none}
.ag-vistas__una.aqui{background:var(--pine);color:var(--cream)}
/* Con .ag-barra delante: si no, «button.button» (display:inline-flex) le
   ganaba y el botón salía también en el ordenador, donde no abría nada. */
.ag-barra .ag-barra__cals{display:none}

/* --- las tres columnas ----------------------------------------------------- */
.ag-cuerpo{display:grid;grid-template-columns:var(--ag-cals) minmax(0,1fr);gap:18px;align-items:start}
.ag--con-panel .ag-cuerpo{grid-template-columns:var(--ag-cals) minmax(0,1fr) var(--ag-panel)}
.ag-principal{min-width:0;background:var(--blanco);border:1px solid var(--line);border-radius:var(--radio);
  box-shadow:var(--sombra)}

/* --- Mis calendarios ------------------------------------------------------- */
.ag-cals{position:sticky;top:14px;min-width:0;max-height:calc(100vh - 28px);overflow:auto;
  padding:4px 2px 12px;scrollbar-width:thin}
.ag-cals__cabeza{display:flex;align-items:center;gap:8px}
.ag-cals__cabeza h2{font-family:'Ohlala Sans','DM Sans',sans-serif;font-size:15px;font-weight:600;
  letter-spacing:0;color:var(--ink);margin:0}
.ag-cals .ag-cals__cerrar{display:none}
.ag-cals__ayuda{font-size:13px;color:var(--suave);line-height:1.5;margin:6px 0 10px}
.ag-cals__rapidos{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px}
.ag-cals__rapidos form{margin:0}
.ag-chip{font:inherit;font-size:13px;font-weight:600;color:var(--pine);background:var(--blanco);
  border:1px solid var(--line);border-radius:60px;padding:6px 12px;cursor:pointer;min-height:34px}
.ag-chip:hover{border-color:var(--pine);background:#08676c0a}
.ag-cals__lista{list-style:none;margin:0 0 6px;padding:0}
.ag-cal{display:flex;align-items:center;gap:4px;border-radius:10px;padding:0 2px 0 0}
.ag-cal:hover{background:#08676c0b}
.ag-cal__ver{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;margin:0;padding:6px 6px;
  font-weight:400;font-size:14px;cursor:pointer;min-height:40px}
.ag-cal__casilla{flex:0 0 auto;width:18px;height:18px;margin:0;accent-color:var(--c,var(--pine));cursor:pointer}
/* En el móvil «input[type=checkbox]{accent-color:var(--pine)}» les ganaba. */
.ag-cals .ag-cal__casilla{accent-color:var(--c,var(--pine))}
.ag-cal__nombre small.ag-cal__viejo{color:#a3321f}
.ag-cals__viejo{font-size:13px;line-height:1.5;color:#7a2a1f;background:#fbe9e6;border-radius:10px;
  padding:8px 10px;margin:0 0 10px}
.ag-cals__cuenta{font-size:13px;color:var(--suave);line-height:1.5;margin:0 0 10px;overflow-wrap:anywhere}
.ag-cals__cuenta strong{color:var(--ink);font-weight:600}
.ag-cal__nombre{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.ag-cal__nombre > span{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-cal__nombre small{font-size:11.5px;color:var(--suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-cal--oculto .ag-cal__nombre{opacity:.5}
.ag-cal__color{flex:0 0 auto;display:inline-flex;align-items:center;gap:2px}
.ag-cal__elegir{-webkit-appearance:none;appearance:none;width:24px;height:24px;padding:0;border:2px solid #fff;
  border-radius:7px;background:var(--c);box-shadow:0 0 0 1px var(--line);cursor:pointer;flex:0 0 auto}
.ag-cal__elegir::-webkit-color-swatch-wrapper{padding:0}
.ag-cal__elegir::-webkit-color-swatch{border:0;border-radius:5px}
.ag-cal__elegir::-moz-color-swatch{border:0;border-radius:5px}
.ag-cal__elegir:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
.ag-cal__google{width:28px;height:28px;border:0;border-radius:50%;background:none;color:var(--suave);
  font-size:15px;cursor:pointer;display:grid;place-items:center}
.ag-cal__google:hover{background:#08676c12;color:var(--pine)}
.ag-cal__google[hidden]{display:none}
.ag-cal__mezcla{display:inline-flex;gap:2px;padding-right:6px}
.ag-cal__mezcla i{width:8px;height:18px;border-radius:3px;background:var(--c)}
.ag-cal__punto{width:18px;height:18px;border-radius:5px;background:var(--c);flex:0 0 auto;opacity:.35}
.ag-cal--sitio .ag-cal__ver{cursor:default}
.ag-cals__sub{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--suave);
  font-weight:600;margin:12px 6px 2px}
.ag-cals__google{border-top:1px solid var(--line);margin-top:10px;padding:12px 6px 0}
.ag-cals__google form{margin:0}
.ag-cals__pisar{display:flex;align-items:center;gap:8px;font-weight:400;font-size:13px;color:var(--suave);margin:8px 0 0}
.ag-cals__pisar input{width:16px;height:16px;margin:0;accent-color:var(--pine)}
.ag-cals__nota,.ag-cals__otros{font-size:13px;color:var(--suave);line-height:1.55;margin:10px 0 0}
.ag-cals__otro{white-space:nowrap;color:var(--ink)}
.ag-cals__otro::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--c);margin:0 4px 1px 0}

/* --- la semana y el día, hora a hora --------------------------------------- */
.ag-rej{--cols:7;position:relative}
/* Como Google: la cabecera y la fila de todo el día quietas, y las horas se
   mueven dentro de su caja. El hueco de la barra de desplazamiento se guarda
   también arriba (scrollbar-gutter) para que las columnas casen. */
.ag-rej__cabeza{display:grid;grid-template-columns:56px repeat(var(--cols),minmax(0,1fr));
  position:relative;z-index:6;background:var(--blanco);border-bottom:1px solid var(--ag-raya);
  border-radius:var(--radio) var(--radio) 0 0;overflow-y:hidden;scrollbar-gutter:stable}
.ag-rej__zona{align-self:end;font-size:10px;color:var(--suave);text-align:right;padding:0 8px 6px 0}
.ag-dh{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 2px 8px;
  color:var(--suave);text-decoration:none;border-radius:14px;min-width:0}
.ag-dh:hover{text-decoration:none}
.ag-dh__dia{font-size:11px;font-weight:600;letter-spacing:.1em}
.ag-dh__num{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:24px;
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;transition:background .15s ease}
.ag-dh:hover .ag-dh__num{background:#08676c12}
.ag-dh--hoy .ag-dh__dia{color:var(--pine)}
.ag-dh--hoy .ag-dh__num,.ag-dh--hoy:hover .ag-dh__num{background:var(--pine);color:#fff}
.ag-dh.ag-elegido .ag-dh__num{box-shadow:0 0 0 2px var(--copper)}
.ag-dh--pasado .ag-dh__num{color:var(--suave)}

.ag-rej__todo{display:grid;grid-template-columns:56px minmax(0,1fr);border-bottom:1px solid var(--ag-raya);
  overflow-y:hidden;scrollbar-gutter:stable}
.ag-rej__todo-et{font-size:10px;color:var(--suave);text-align:right;padding:8px 8px 0 0;line-height:1.2}
.ag-rej__pista{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-rows:24px;
  row-gap:2px;padding:4px 0 6px;min-height:34px;
  background:linear-gradient(to right,var(--ag-raya) 1px,transparent 1px) 0 0/calc(100% / var(--cols)) 100%}
.ag-evd{margin:0 4px;border-radius:6px;background:var(--c);color:var(--ct);font-size:12px;font-weight:600;
  padding:0 8px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;min-width:0}
.ag-evd:hover{text-decoration:none;filter:brightness(.95)}

.ag-rej__cuerpo{display:grid;grid-template-columns:56px repeat(var(--cols),minmax(0,1fr));position:relative;
  padding:8px 0 10px;max-height:max(420px,calc(100vh - 250px));overflow-y:auto;scrollbar-gutter:stable;
  scrollbar-width:thin;border-radius:0 0 var(--radio) var(--radio)}
.ag-horas{position:relative;height:calc(var(--horas) * var(--alto-hora))}
.ag-horas span{position:absolute;right:8px;top:calc(var(--h) * var(--alto-hora) - 8px);font-size:11px;
  color:var(--suave);font-variant-numeric:tabular-nums;line-height:16px}
.ag-col{position:relative;min-width:0;height:calc(var(--horas) * var(--alto-hora));border-left:1px solid var(--ag-raya);
  background-image:repeating-linear-gradient(to bottom,var(--ag-raya) 0,var(--ag-raya) 1px,transparent 1px,transparent var(--alto-hora))}
.ag-col--hoy{background-color:#08676c06}
/* La columna entera de un día también abre el panel: que se note al pasar. */
.ag-col{cursor:pointer}
@media (hover:hover){
  .ag-col:hover{background-color:#08676c09}
  .ag-col--hoy:hover{background-color:#08676c10}
}
.ag-ev{position:absolute;box-sizing:border-box;
  top:calc(var(--ini) * var(--alto-hora) + 1px);height:calc(var(--dura) * var(--alto-hora) - 2px);min-height:17px;
  left:calc(var(--x,0) * (100% - 8px) / var(--n,1) + 2px);width:calc((100% - 8px) / var(--n,1) - 1px);
  background:var(--c);color:var(--ct);border-radius:6px;padding:3px 6px 2px 7px;font-size:12px;line-height:1.3;
  overflow:hidden;text-decoration:none;box-shadow:0 0 0 1px var(--blanco);z-index:1;cursor:pointer;
  transition:filter .15s ease,box-shadow .15s ease}
.ag-ev:hover{text-decoration:none;filter:brightness(.95);z-index:3}
.ag-ev__tit{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-ev__hora{display:block;font-variant-numeric:tabular-nums;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-ev--corto{padding-top:0;padding-bottom:0;line-height:15px;display:flex;gap:5px;align-items:baseline}
.ag-ev--corto .ag-ev__tit{flex:0 1 auto;min-width:24px}
.ag-ev--corto .ag-ev__hora{flex:0 1 auto;min-width:0;font-size:11px}
/* Lo que le han pedido y aún no ha confirmado: como Google con lo pendiente. */
.ag-ev--pedida,.ag-evd--pedida,.ag-lr--pedida{background:var(--blanco);color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--c)}
.ag-ev--pedida{border-left:4px dashed var(--c)}
.ag-ev--tachado .ag-ev__tit,.ag-evd--tachado,.ag-mev--tachado .ag-mev__tit,.ag-lr--tachado .ag-lr__tit{text-decoration:line-through}
.ag-ev--tachado{opacity:.72}
.ag-ev.ag-elegido,.ag-evd.ag-elegido{box-shadow:0 0 0 2px var(--ink),0 8px 18px -8px #0007;z-index:4}
.ag-ahora{position:absolute;left:-1px;right:0;top:calc(var(--ahora,0) * var(--alto-hora));height:2px;
  background:var(--ag-ahora);z-index:5;pointer-events:none}
.ag-ahora::before{content:'';position:absolute;left:-6px;top:-5px;width:12px;height:12px;border-radius:50%;background:var(--ag-ahora)}
.ag-ahora[hidden]{display:none}

/* --- el mes ---------------------------------------------------------------- */
.ag-mes__cab{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--ag-raya)}
.ag-mes__cab span{text-align:center;font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--suave);padding:10px 0 8px}
.ag-mes__rej{display:flex;flex-direction:column}
/* Cada semana es su fila: las siete casillas y, encima, las barras de lo que
   es de todo el día o dura varios días, que cruzan la semana como en Google. */
.ag-mes__semana{--carril:20px;--num-alto:32px;position:relative;display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));min-height:122px}
.ag-md{min-width:0;display:flex;flex-direction:column;gap:1px;padding:4px 4px 6px;cursor:pointer;
  border-right:1px solid var(--ag-raya);border-bottom:1px solid var(--ag-raya)}
.ag-md:nth-child(7){border-right:0}
.ag-md__evs{margin-top:calc(var(--carriles,0) * var(--carril))}
.ag-mbar{position:absolute;z-index:2;box-sizing:border-box;top:calc(var(--num-alto) + var(--fila,0) * var(--carril));
  left:calc(var(--a) * 100% / 7 + 3px);width:calc((var(--b) - var(--a) + 1) * 100% / 7 - 6px);height:18px;
  border-radius:5px;background:var(--c);color:var(--ct);font-size:12px;font-weight:600;line-height:18px;padding:0 6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.ag-mbar:hover{text-decoration:none;filter:brightness(.95)}
.ag-mbar--pedida{background:var(--blanco);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--c)}
.ag-mbar--tachado{text-decoration:line-through}
.ag-mbar.ag-elegido{box-shadow:0 0 0 2px var(--ink)}
.ag-md:hover{background:#08676c05}
.ag-md.ag-elegido{box-shadow:inset 0 0 0 2px var(--copper)}
.ag-md__num{align-self:center;min-width:26px;height:26px;padding:0 6px;border-radius:13px;display:grid;place-items:center;
  font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:none;margin-bottom:2px;white-space:nowrap}
.ag-md__num:hover{background:#08676c12;text-decoration:none}
.ag-md--hoy .ag-md__num,.ag-md--hoy .ag-md__num:hover{background:var(--pine);color:#fff}
.ag-md--fuera .ag-md__num{color:#8a9a96b0}
.ag-md__evs{display:flex;flex-direction:column;gap:1px;min-width:0}
.ag-mev{display:flex;align-items:center;gap:5px;min-width:0;padding:1px 6px;border-radius:5px;font-size:12px;
  line-height:18px;color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden}
.ag-mev:hover{background:#08676c10;text-decoration:none}
.ag-mev__punto{width:8px;height:8px;border-radius:50%;background:var(--c);flex:0 0 auto}
.ag-mev__hora{flex:0 0 auto;color:var(--suave);font-variant-numeric:tabular-nums}
.ag-mev__tit{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ag-mev--dia{background:var(--c);color:var(--ct);font-weight:600}
.ag-mev--dia:hover{background:var(--c);filter:brightness(.95)}
.ag-mev--pedida{box-shadow:inset 0 0 0 1.5px var(--c);background:var(--blanco);color:var(--ink)}
.ag-mev.ag-elegido{box-shadow:0 0 0 2px var(--ink)}
.ag-md__mas{align-self:flex-start;font:inherit;font-size:12px;font-weight:600;color:var(--ink);background:none;border:0;
  border-radius:5px;padding:1px 6px;cursor:pointer;line-height:18px}
.ag-md__mas:hover{background:#08676c12}
.ag-md__mas[hidden]{display:none}

/* --- la semana en el móvil: una lista día a día ---------------------------- */
.ag-lista{display:none;list-style:none;margin:0;padding:0}
.ag-ld{border-bottom:1px solid var(--ag-raya);padding:10px 12px 12px}
.ag-ld:last-child{border-bottom:0}
.ag-ld__cabeza{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-height:44px;border-radius:12px}
.ag-ld__cabeza:hover{text-decoration:none}
.ag-ld__fecha{display:flex;flex-direction:column;align-items:center;width:44px;flex:0 0 auto;line-height:1.1}
.ag-ld__fecha strong{font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}
.ag-ld__fecha span{font-size:10.5px;letter-spacing:.1em;font-weight:600;color:var(--suave)}
.ag-ld--hoy .ag-ld__fecha strong{background:var(--pine);color:#fff;border-radius:50%;width:38px;height:38px;display:grid;place-items:center;font-size:19px}
.ag-ld--hoy .ag-ld__fecha span{color:var(--pine)}
.ag-ld--pasado{opacity:.62}
.ag-ld.ag-elegido{background:#08676c08}
.ag-ld__sitios{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.ag-ld__evs{list-style:none;margin:4px 0 0 56px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.ag-ld__nada{margin:2px 0 0 56px;font-size:13.5px;color:var(--suave)}
/* Con el color entero de su calendario y su letra, como los bloques de la
   rejilla y como su Google en el teléfono (con un tinte del 16 %, Rocafort y
   Moncada salían casi iguales). */
.ag-lr{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px 6px 12px;border-radius:10px;
  text-decoration:none;color:var(--ct);background:var(--c)}
.ag-lr:hover{text-decoration:none;filter:brightness(.96)}
.ag-lr__barra{display:none;align-self:stretch;width:5px;border-radius:0 4px 4px 0;background:var(--c);flex:0 0 auto}
.ag-lr__hora{flex:0 0 auto;min-width:48px;font-size:13px;font-variant-numeric:tabular-nums;color:inherit;opacity:.86}
.ag-lr--pedida{padding-left:0}
.ag-lr--pedida .ag-lr__barra{display:block}
.ag-lr--pedida .ag-lr__hora{color:var(--suave);opacity:1}
/* En el móvil la semana empieza hoy; lo de antes, detrás de este botón. */
.ag-lista__antes{display:none}
.ag-lr__tit{min-width:0;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-lr.ag-elegido{box-shadow:0 0 0 2px var(--ink)}

/* Los sitios de un día, como pastillas de su color. */
.ag-sitio{display:inline-flex;align-items:center;font-size:12px;font-weight:600;line-height:1;
  padding:5px 9px;border-radius:60px;background:var(--c);color:var(--ct);white-space:nowrap}

/* --- el panel de la derecha ------------------------------------------------ */
.ag-panel{position:sticky;top:14px;max-height:calc(100vh - 28px);overflow:auto;overscroll-behavior:contain;
  background:var(--blanco);border:1px solid var(--line);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:16px 18px 22px;min-width:0;outline:none}
.ag-panel[hidden]{display:none}
.ag-panel__cabeza{display:flex;align-items:flex-start;gap:8px;margin:0 0 12px}
.ag-panel__fecha{flex:1 1 auto;min-width:0}
.ag-panel__fecha .eyebrow{margin:2px 0 2px}
.ag-panel__fecha h2{font-size:30px;margin:0 0 6px}
.ag-panel__sitios{display:flex;flex-wrap:wrap;gap:5px;margin:0}
.ag-panel__sitios:empty{display:none}
.ag-cerrar{flex:0 0 auto;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--ink);
  font-size:28px;line-height:1;cursor:pointer;display:grid;place-items:center;margin:-6px -8px 0 0}
.ag-cerrar:hover{background:#08676c12}
.ag-panel__sub{font-family:'Ohlala Sans','DM Sans',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--suave);margin:18px 0 8px}
.ag-panel__nada,.ag-panel__ocultos{font-size:14px;color:var(--suave);margin:4px 0 12px}

.ag-tarjeta{position:relative;border:1px solid var(--line);border-radius:14px;padding:12px 14px 12px 18px;
  margin:0 0 10px;background:var(--blanco)}
.ag-tarjeta::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:5px;border-radius:0 4px 4px 0;background:var(--c)}
.ag-tarjeta--elegida{border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 12px 28px -18px #08676c66}
.ag-tarjeta--pedida::before{background:repeating-linear-gradient(to bottom,var(--c) 0 6px,transparent 6px 10px)}
.ag-tarjeta__hora{font-size:13px;color:var(--suave);font-variant-numeric:tabular-nums;margin:0 0 2px}
.ag-tarjeta__tit{font-family:'Ohlala Sans','DM Sans',sans-serif;font-size:18px;font-weight:600;letter-spacing:0;
  color:var(--ink);line-height:1.3;margin:0 0 8px;overflow-wrap:anywhere}
.ag-tarjeta--tachada .ag-tarjeta__tit{text-decoration:line-through;opacity:.75}
.ag-dato{display:grid;grid-template-columns:86px minmax(0,1fr);gap:8px;font-size:14px;line-height:1.45;margin:0 0 6px}
.ag-dato__et{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--suave);padding-top:2px}
.ag-dato__valor{min-width:0;overflow-wrap:anywhere;color:var(--ink)}
.ag-tarjeta__quien{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.ag-tarjeta__quien .ident{margin-left:0}
.ag-tarjeta__ficha{font-size:13px;font-weight:600}
.ag-tarjeta__cal{display:inline-flex;align-items:center;gap:7px}
.ag-punto{width:10px;height:10px;border-radius:50%;background:var(--c);flex:0 0 auto;display:inline-block}
.ag-tarjeta__desc{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.55;color:var(--ink);
  background:var(--papel);border-radius:10px;padding:10px 12px;margin:8px 0 4px;max-height:260px;overflow:auto}
.ag-enlace{overflow-wrap:anywhere}
.ag-tarjeta__botones{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px}
.ag-tarjeta__tapa{font-size:12.5px;color:var(--suave);margin:8px 0 0}
.ag-filas{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.ag-fila{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 10px;border:1px solid var(--line);
  border-radius:10px;background:var(--blanco);font:inherit;font-size:14px;color:var(--ink);text-align:left;cursor:pointer}
.ag-fila:hover{border-color:var(--pine)}
.ag-fila__hora{flex:0 0 auto;min-width:46px;font-variant-numeric:tabular-nums;color:var(--suave);font-size:13px}
.ag-fila__tit{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.ag-ver-dia{margin:10px 0 0;font:inherit;font-size:14px;font-weight:600;color:var(--pine);background:none;border:0;
  padding:8px 0;cursor:pointer;min-height:44px}
.ag-ver-dia:hover{text-decoration:underline}

/* Sus horas de consulta, dentro del panel. */
.ag-horas-dia{border-top:1px solid var(--line);margin-top:18px;padding-top:14px}
.ag-horas-dia__tit{font-family:'Ohlala Sans','DM Sans',sans-serif;font-size:16px;font-weight:600;letter-spacing:0;
  color:var(--ink);margin:0 0 2px}
.ag-horas-dia__ayuda,.ag-horas-dia__nada{font-size:13px;color:var(--suave);margin:0 0 10px}
.ag-sitio-horas{margin:0 0 14px}
.ag-sitio-horas__cab{display:flex;align-items:baseline;gap:8px;margin:0 0 6px;font-size:14px}
.ag-sitio-horas__cab strong{color:var(--pine)}
.ag-sitio-horas__cab span{color:var(--suave);font-size:13px}
.ag-hf-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.ag-hf{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 10px;border-radius:10px;border-left:4px solid var(--teal);
  background:#0b8b8c0d;min-height:46px}
.ag-hf--cogida{border-left-color:var(--pine);background:#08676c12}
.ag-hf--cerrada{border-left-color:#8a9a9666;background:var(--papel)}
.ag-hf--cerrada .ag-hf__hora{text-decoration:line-through;color:var(--suave)}
.ag-hf--pasada{opacity:.55}
.ag-hf__hora{flex:0 0 auto;min-width:44px;font-weight:600;font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink)}
.ag-hf__que{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.ag-hf__que strong{font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-hf__que span{font-size:12.5px;color:var(--suave)}
.ag-form{margin:0;flex:0 0 auto}
.ag-hf .button.pequeno{padding:6px 12px;font-size:13px}
.ag-sitio-horas__pie{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ag-horas-dia__horario{display:inline-block;font-size:13.5px;font-weight:600;margin-top:2px}

/* Las marcas de lo elegido en la rejilla. */
.ag-velo{position:fixed;inset:0;z-index:84;background:#0b2f3140;backdrop-filter:blur(1.5px)}
.ag-velo[hidden]{display:none}
.ag-aviso{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:95;max-width:min(520px,92vw);
  background:var(--ink);color:var(--cream);border-radius:14px;padding:11px 18px;font-size:14.5px;
  box-shadow:0 18px 40px -18px #000a;margin:0}
.ag-aviso[hidden]{display:none}

/* --- anchos ------------------------------------------------------------------
   Desde 1280 el panel es una tercera columna. Entre 1024 y 1279 flota a la
   derecha para no estrujar la semana. Por debajo de 1024, «Mis calendarios»
   se abre con un botón y el panel entra desde un lado. En el móvil, los dos
   son hojas que suben desde abajo, por encima de la barra. */
/* Que quepa entera en la pantalla, como Google (24-09-2026). La agenda mide
   lo que queda de pantalla desde donde empieza hasta abajo, y solo se mueven
   sus cajas por dentro: la de las horas, «Mis calendarios», el panel y, en el
   móvil, la lista de la semana y el mes. Antes la semana no cabía, había dos
   barras de desplazamiento y, al bajar la página, el panel y las cabeceras de
   los días se escondían bajo la cabecera fija.
   27-09-2026: llega hasta abajo del todo (el pie se queda debajo, fuera de la
   vista: no se le guarda sitio) y también en el móvil, hasta la barra de
   abajo. Lo de arriba lo mide espacio.js (--ag-arriba: la cabecera, «Métricas
   / Tu espacio», el aviso, un recado y la barra de la agenda), y en el móvil
   la barra de abajo (--ag-abajo). Lo alto de la pantalla lo pone el CSS con
   svh, que en el iPhone no baila cuando Safari esconde o enseña su barra; con
   vh delante para los navegadores que no lo entienden. */
.ag-cuerpo{--ag-hueco:14px;
  height:calc(100vh - var(--ag-arriba,300px) - var(--ag-abajo,0px) - var(--ag-hueco));
  height:calc(100svh - var(--ag-arriba,300px) - var(--ag-abajo,0px) - var(--ag-hueco));
  min-height:280px;align-items:stretch}
.ag-principal{display:flex;flex-direction:column;overflow:hidden;min-height:0}
.ag-rej,.ag-mes{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.ag-rej__cabeza{flex:0 0 auto}
.ag-rej__todo{flex:0 0 auto;max-height:96px;overflow-y:auto}
.ag-rej__cuerpo{flex:1 1 auto;min-height:0;max-height:none;overscroll-behavior:contain}
.ag-mes__cab{flex:0 0 auto}
.ag-mes__rej{flex:1 1 auto;min-height:0;display:grid;grid-template-rows:repeat(var(--semanas,6),minmax(0,1fr))}
.ag-mes__semana{min-height:0}
.ag-md{overflow:hidden}
@media (min-width:701px){
  .p-g-agenda main{padding-bottom:14px;min-height:0}
}
/* Con la agenda a la medida de la pantalla, debajo solo queda el pie: en esta
   página la cabecera y «Métricas / Tu espacio» se van con la página en vez de
   quedarse fijas. Si no, al bajar hasta el pie (basta la rueda encima del mes)
   la barra de la agenda se escondía debajo de ellas. Al entrar se ve igual. */
.p-g-agenda .site-header,.p-g-agenda .mundos{position:relative;top:auto}
/* Desde 1024 el panel es la tercera columna, a la altura de todo lo demás. */
@media (min-width:1024px){
  .ag-cals,.ag-panel{position:static;top:auto;height:100%;max-height:none;min-height:0;overflow:auto;
    overscroll-behavior:contain}
}
/* Con el panel abierto y poco ancho, «Mis calendarios» se pliega (vuelve al
   cerrar el panel, o con el botón «Calendarios»): si no, la semana se quedaba
   en columnas de 75 px con los títulos cortados en tres letras. */
@media (min-width:1024px) and (max-width:1599px){
  .ag--con-panel .ag-cuerpo{grid-template-columns:minmax(0,1fr) var(--ag-panel)}
  .ag--con-panel .ag-cals{display:none}
  .ag--con-panel .ag-barra .ag-barra__cals{display:inline-flex}
}
@media (min-width:1024px) and (max-width:1279px){
  .ag{--ag-panel:340px}
}
@media (max-width:1023px){
  .ag{--ag-cals:0px}
  .ag-cuerpo,.ag--con-panel .ag-cuerpo{grid-template-columns:minmax(0,1fr);gap:0}
  .ag-barra .ag-barra__cals{display:inline-flex}
  .ag-cals{position:fixed;top:0;left:0;bottom:0;width:min(340px,88vw);max-height:none;z-index:90;background:var(--cream);
    padding:16px 16px 24px;box-shadow:0 30px 70px -30px #08676caa;transform:translateX(-105%);visibility:hidden;
    transition:transform .28s var(--ease),visibility 0s linear .28s}
  .ag-cals--abierta{transform:none;visibility:visible;transition:transform .28s var(--ease)}
  .ag-cals .ag-cals__cerrar{display:grid;margin-left:auto}
  .ag-panel{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);max-height:none;z-index:90;border-radius:0;
    border-width:0 0 0 1px;padding:16px 18px calc(24px + env(safe-area-inset-bottom))}
  .ag-cal__ver{min-height:44px}
  .ag-cal__elegir{width:30px;height:30px}
  .ag-cal__google{width:40px;height:40px}
  .ag-chip{min-height:40px}
}
@media (max-width:700px){
  .p-g-agenda main{padding-top:12px}
  .ag{--alto-hora:46px}
  .ag-barra{gap:6px;margin-bottom:12px}
  .ag-barra__titulo{order:5;flex:1 1 100%;margin:2px 0 0;font-size:clamp(23px,6.4vw,25px)}
  .ag-barra__hoy.button{min-height:44px;padding:8px 16px}
  .ag-flecha{width:44px;height:44px}
  .ag-vistas{order:6;margin-left:0;flex:1 1 auto}
  .ag-vistas__una{flex:1 1 0;justify-content:center;min-height:40px;padding:6px 8px}
  .ag-barra__cals{order:7;min-height:46px}
  /* La semana: la lista día a día en vez de siete columnas. */
  .ag--semana .ag-rej{display:none}
  .ag--semana .ag-lista{display:block}
  .ag--semana .ag-lista__antes{display:flex;align-items:center;gap:8px;width:100%;min-height:46px;padding:10px 14px;
    background:none;border:0;border-bottom:1px solid var(--ag-raya);font:inherit;font-size:14px;font-weight:600;
    color:var(--pine);text-align:left;cursor:pointer}
  .ag-lista--desde-hoy .ag-ld--pasado{display:none}
  .ag-principal{border-radius:14px}
  .ag-rej__cabeza{border-radius:14px 14px 0 0}
  .ag-rej__cuerpo,.ag-rej__cabeza{grid-template-columns:46px repeat(var(--cols),minmax(0,1fr))}
  .ag-rej__todo{grid-template-columns:46px minmax(0,1fr)}
  .ag-ev{font-size:12.5px}
  /* En el día, su cabecera en una sola fila (el título de arriba ya dice qué
     día es): 35 px más de horas a la vista (27-09-2026). */
  .ag--dia .ag-dh{flex-direction:row;justify-content:center;gap:10px;padding:5px 2px}
  .ag--dia .ag-dh__num{width:34px;height:34px;font-size:19px}
  /* Cabe hasta la barra de abajo, con un hueco pequeño (27-09-2026). Las
     horas se mueven por dentro, como en el ordenador; la semana (una lista) y
     el mes, si no caben, también, sin que se corte nada. */
  .ag-cuerpo{--ag-hueco:8px;min-height:240px}
  .ag--semana .ag-principal{display:block;overflow-y:auto;overscroll-behavior:contain}
  .ag-mes{overflow-y:auto;overscroll-behavior:contain}
  .ag-mes__cab{position:sticky;top:0;z-index:3;background:var(--blanco)}
  .ag-mes__rej{min-height:calc(var(--semanas,6) * 54px)}
  /* El mes: en cada casilla, barritas de color, como la app de Google. */
  .ag-mes__semana{--carril:8px;--num-alto:30px}
  .ag-mbar{height:6px;border-radius:3px;font-size:0;line-height:0;padding:0;pointer-events:none;
    left:calc(var(--a) * 100% / 7 + 2px);width:calc((var(--b) - var(--a) + 1) * 100% / 7 - 4px)}
  .ag-md{padding:3px 2px 4px;gap:2px}
  .ag-md__num{font-size:12px;min-width:24px;height:24px;padding:0 4px}
  .ag-mev{height:6px;padding:0;border-radius:3px;background:var(--c);font-size:0;line-height:0}
  .ag-mev__punto,.ag-mev__hora,.ag-mev__tit{display:none}
  /* Con el dedo, la casilla entera abre el día: las barritas son muy finas. */
  .ag-mev{pointer-events:none}
  .ag-md,.ag-fila,.ag-lr,.ag-ld__cabeza{-webkit-tap-highlight-color:transparent}
  .ag-mev--pedida{background:var(--blanco);box-shadow:inset 0 0 0 1.5px var(--c)}
  .ag-md__mas{font-size:10.5px;padding:0 1px;line-height:14px;white-space:nowrap}
  .ag-mes__cab span{font-size:10px;letter-spacing:.04em}
  /* Las dos hojas suben desde abajo, por encima de la barra de abajo. */
  .ag-cals,.ag-panel{top:auto;left:0;right:0;bottom:0;width:auto;max-height:84dvh;border-radius:20px 20px 0 0;
    border:0;padding:10px 16px calc(22px + env(safe-area-inset-bottom));overflow:auto;box-shadow:0 -24px 60px -24px #08676caa}
  .ag-cals{transform:translateY(105%)}
  .ag-cals--abierta{transform:none}
  .ag-panel{z-index:92;background:var(--blanco)}
  .ag-cals::before,.ag-panel::before{content:'';display:block;width:42px;height:5px;border-radius:3px;background:#08676c33;margin:0 auto 8px}
  .ag-panel__fecha h2{font-size:27px}
  .ag-dato{grid-template-columns:minmax(0,1fr);gap:0}
  .ag-hf{flex-wrap:wrap}
  .ag-hf .ag-form{margin-left:auto}
  .ag-hf .button.pequeno{min-height:42px}
  .ag-aviso{bottom:calc(84px + env(safe-area-inset-bottom))}
}
/* Un móvil tumbado (844x390, 667x375) o una ventana muy bajita (27-09-2026):
   la cabecera y «Métricas / Tu espacio» se comían 200 px de 390 y debajo no
   cabía ningún calendario. Aquí la agenda (su barra y el calendario) mide una
   pantalla justa desde su barra (en el móvil, hasta la barra de abajo): se
   baja una vez y se ve entera, sin nada tapado, porque en la Agenda la
   cabecera no se queda fija (ver arriba). espacio.js mide desde la barra de la
   agenda y no desde arriba de la página. La cabecera de cada día va en una
   fila, para que se vean más horas, y el mes, si no cabe, se mueve por dentro. */
@media (max-height:500px){
  .ag-barra{margin-bottom:8px}
  .ag-cuerpo{--ag-hueco:8px;min-height:150px}
  .ag-dh{flex-direction:row;justify-content:center;gap:8px;padding:5px 2px}
  .ag-dh__num{width:32px;height:32px;font-size:18px}
  .ag-mes{overflow-y:auto;overscroll-behavior:contain}
  .ag-mes__cab{position:sticky;top:0;z-index:3;background:var(--blanco)}
}
/* Con semanas de 56 px el «+N más» se cortaba: 72 como poco. */
@media (min-width:701px) and (max-height:500px){
  .ag-mes__rej{min-height:calc(var(--semanas,6) * 72px)}
}
/* En el móvil pequeño tumbado sobra ancho: el título sube a la fila de «Hoy»
   y la barra de la agenda queda en dos filas en vez de tres. */
@media (max-width:700px) and (max-height:500px){
  .ag-barra__titulo{order:0;flex:1 1 auto;margin:0 4px;font-size:22px}
}
html.ag-quieto{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .ag-cals,.ag-cals--abierta{transition:none}
}

/* ============================================================================
   RESUMEN: HOY Y MAÑANA CON LOS COLORES DE SU GOOGLE (24-09-2026)
   Cada bloque va relleno del color de su calendario, como en Google, con el
   título que tiene allí. Al pulsarlo se abre la Agenda en ese día.
   ========================================================================== */
.bloque{position:relative;background:var(--c,var(--pine));color:var(--ct,#fff);border:0;border-radius:12px;
  padding:10px 14px}
.bloque__hora strong,.bloque__hora span,.bloque__que strong,.bloque__que > span{color:inherit}
.bloque__hora span,.bloque__que > span{opacity:.88}
.bloque__abrir{position:static;color:inherit;text-decoration:none}
.bloque__abrir::after{content:'';position:absolute;inset:0;border-radius:12px}
.bloque__abrir:hover{text-decoration:none}
.bloque:hover{filter:brightness(.96)}
.bloque__abrir:focus-visible::after{outline:3px solid var(--ink);outline-offset:2px}
.bloque__boton{position:relative;z-index:1}
.bloque .button.claro{background:#ffffffe6;color:var(--pine);border-color:#ffffffe6}
.bloque--pedida{background:var(--blanco);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--c)}
.bloque--tachado .bloque__que strong{text-decoration:line-through}
/* Lo ya pasado no se apaga (en su Google tampoco: a media tarde todo «Hoy»
   salía desvaído y el rojo de Rocafort parecía el rosa de Moncada). Solo la
   hora, un poco más suave. */
.bloque--pasado{opacity:1}
.bloque--pasado .bloque__hora{opacity:.62}
.bloque--suave{background:var(--c,var(--pine))}
.dia-bloques__entero{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
/* Hoy y Mañana nunca más anchas que la pantalla: sin esto, la tarjeta
   crecía hasta lo que medía la pastilla más larga (439 px en un 393). */
.rejilla.dos-dias{grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){ .rejilla.dos-dias{grid-template-columns:repeat(2,minmax(0,1fr))} }
.dos-dias > *{min-width:0}
/* Un título largo de su calendario rompía la tarjeta en el móvil: se corta
   con «…» (el entero va en el title). */
.dia-bloques__entero .ag-sitio{position:relative;font-size:12.5px;padding:6px 10px;display:block;max-width:100%;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
.dia-bloques__entero a.ag-sitio:hover{text-decoration:none;filter:brightness(.96)}
.dia-bloques__ocultos{font-size:13px;color:var(--suave);margin:10px 0 0}

/* ============================================================================
   TU ASISTENTE (24-09-2026)
   La conversación a la izquierda y, al lado, lo que lleva gastado y lo que
   sabe. En el móvil se apila: primero la conversación. Todo con min-width:0
   para que un texto largo del modelo no empuje la página de lado.
   ========================================================================== */
.asis{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
@media(min-width:960px){ .asis{grid-template-columns:minmax(0,1fr) 290px} }
.asis > *{min-width:0}
/* «Copiar», «Nueva conversación» y lo de «Revisar» se esconden con hidden;
   .button lleva display propio y sin esto se seguían viendo. */
.asis [hidden]{display:none !important}
.asis--apagado .asis__chat{opacity:.6}
.asis-falta{margin:0 0 22px}
.asis-falta h2{margin:0 0 8px}
.asis__chat{padding:22px 24px}
.asis__cabeza{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin:0 0 14px}
.asis__titulo{font-size:clamp(24px,2.6vw,30px);margin:0}
.asis__botones-cabeza{display:flex;gap:8px;flex-wrap:wrap}
.asis__mensajes{display:flex;flex-direction:column;gap:14px;margin:0 0 16px}
.asis__mensajes:empty{display:none}
/* Sin conversación, el título «Conversación» se queda solo encima de nada:
   se esconde hasta el primer mensaje y así el cuadro de escribir sube. */
.asis:not(.asis--hablando) .asis__cabeza{display:none}
.asis:not(.asis--hablando) .asis__escribir{border-top:0;padding-top:0}
.asis-cabecera{margin-bottom:22px}

/* --- los mensajes ---------------------------------------------------------- */
.asis-msg{border-radius:14px;padding:12px 16px;min-width:0;overflow-wrap:anywhere}
.asis-msg--yo{background:#08676c0d;border:1px solid var(--line);align-self:flex-end;max-width:min(100%,640px)}
.asis-msg--asis{background:var(--blanco);border:1px solid var(--line);box-shadow:var(--sombra)}
.asis-msg__quien{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--suave);margin:0 0 6px}
.asis-msg--yo .asis-msg__texto{white-space:pre-wrap;font-size:15.5px;line-height:1.6}
.asis-msg__pie{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.asis-msg__fuentes{font-size:12.5px;color:var(--suave);line-height:1.45;min-width:0}
.asis-msg__fuentes > summary{cursor:pointer;list-style:none;padding:6px 0}
.asis-msg__fuentes > summary::-webkit-details-marker{display:none}
.asis-msg__fuentes > summary::after{content:" ▸"}
.asis-msg__fuentes[open]{flex-basis:100%}
.asis-msg__fuentes[open] > summary::after{content:" ▾"}
.asis-msg__fuentes ul{margin:2px 0 0;padding-left:1.1em}
.asis-msg__fuentes li{margin:.15em 0}
.asis-pensando{margin:0;color:var(--suave);font-style:italic}
.asis-pensando__punto{animation:asis-punto 1.2s infinite both}
.asis-pensando__punto:nth-child(2){animation-delay:.2s}
.asis-pensando__punto:nth-child(3){animation-delay:.4s}
@keyframes asis-punto{0%,80%,100%{opacity:.15}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .asis-pensando__punto{animation:none} }

/* --- el markdown mínimo de las respuestas ---------------------------------- */
.asis-md{font-size:15.5px;line-height:1.65;max-width:70ch}
.asis-md > :first-child{margin-top:0}
.asis-md > :last-child{margin-bottom:0}
.asis-md p{margin:0 0 .8em}
.asis-md .asis-md__titulo{font-family:'Ohlala Sans','DM Sans',system-ui,sans-serif;font-weight:600;letter-spacing:0;
  color:var(--pine);line-height:1.3;margin:1.1em 0 .4em}
.asis-md h3.asis-md__titulo{font-size:17px}
.asis-md h4.asis-md__titulo{font-size:15.5px}
.asis-md ul,.asis-md ol{margin:0 0 .9em;padding-left:1.3em}
.asis-md li{margin:.2em 0}
.asis-md li > ul,.asis-md li > ol{margin:.2em 0}
.asis-md blockquote{margin:0 0 .9em;padding:8px 14px;border-left:3px solid var(--sand);background:var(--papel);border-radius:0 10px 10px 0}
.asis-md blockquote p{margin:0}
.asis-md code{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:.9em;background:var(--papel);padding:1px 5px;border-radius:5px}
.asis-md hr{border:0;border-top:1px solid var(--line);margin:1em 0}
.asis-md strong{color:var(--pine);font-weight:600}
.asis-tabla{overflow-x:auto;margin:0 0 .9em;-webkit-overflow-scrolling:touch}
.asis-tabla table{border-collapse:collapse;font-size:14px;min-width:100%}
.asis-tabla th,.asis-tabla td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top;
  /* .asis-msg parte cualquier palabra (overflow-wrap:anywhere) y en el móvil
     las celdas salían «Tie/mp/o». Aquí no: la tabla se desliza en su caja. */
  overflow-wrap:normal;word-break:normal;min-width:7.5em}
.asis-tabla th{background:var(--papel);font-weight:600}

/* --- escribir -------------------------------------------------------------- */
.asis__escribir{border-top:1px solid var(--line);padding-top:16px}
.asis__encargos{border:0;margin:0 0 14px;padding:0;min-width:0}
.asis__encargos legend{font-size:14px;font-weight:600;color:var(--ink);margin:0 0 8px;padding:0}
/* Los encargos, en pastillas de una línea: en el ordenador caben en dos
   filas; en el móvil, una sola fila que se desliza con el dedo, para que el
   cuadro de escribir se vea al entrar. */
.asis__chips{display:flex;flex-wrap:wrap;gap:6px}
.asis-chip{display:inline-flex;align-items:center;flex:0 0 auto;min-height:38px;white-space:nowrap;
  text-align:left;font:inherit;cursor:pointer;padding:6px 11px;border-radius:60px;
  border:1px solid var(--line);background:var(--papel);color:var(--ink);
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.asis-chip strong{font-size:13px;font-weight:600;line-height:1.25}
.asis-chip:hover{border-color:var(--teal)}
.asis-chip[aria-pressed="true"]{background:var(--pine);border-color:var(--pine);color:var(--cream)}
.asis-chip:focus-visible{outline:3px solid #0b8b8c55;outline-offset:2px}
.asis--ocupado .asis-chip{pointer-events:none;opacity:.7}
.asis__campo{margin:0 0 12px}
.asis__campo label{display:flex;flex-wrap:wrap;gap:2px 6px;align-items:baseline}
.asis__encargo{font-weight:500;color:var(--teal)}
.asis__campo textarea{min-height:150px}
.asis__privado{display:flex;gap:7px;align-items:flex-start;font-size:12.5px;color:var(--copper);margin:8px 0 0;line-height:1.45}
.asis__privado svg{flex:0 0 15px;width:15px;height:15px;margin-top:1px}
.asis__pie{display:flex;align-items:flex-end;justify-content:flex-end;gap:10px 14px;flex-wrap:wrap}
.asis__cuenta{font-size:12.5px;color:var(--suave);font-variant-numeric:tabular-nums;margin-right:auto;align-self:center}
.asis__cuenta--mucho{color:var(--fallo)}
.asis__ficha{flex:0 1 260px;min-width:0}
.asis__ficha label{font-size:13px;margin-bottom:4px}
.asis__ficha select{padding:9px 12px;font-size:15px}

/* --- revisar ----------------------------------------------------------------- */
.asis__revision{margin-top:18px;padding:16px 18px;border-radius:var(--radio-s);background:var(--papel);border:1px solid #d5b68199}
.asis__revision .eyebrow{margin:0 0 6px}
.asis__resumen{font-size:14.5px;margin:0 0 8px;color:var(--ink)}
.asis__rev-encargo{font-size:13.5px;color:var(--teal);margin:0 0 8px}
.asis__tapado{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.6;background:var(--blanco);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;max-height:340px;overflow:auto}
.asis-marca{background:#d5b68166;color:var(--ink);border-radius:5px;padding:0 3px;font-weight:600;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.asis__rev-ojo{margin:8px 0 0;font-size:13px;line-height:1.5}
.asis__rev-web{margin:10px 0 0;font-size:13.5px}
.asis__rev-material{margin:8px 0 0}
.asis__rev-material-titulo{font-size:13.5px;font-weight:600;margin:0 0 4px;color:var(--ink)}
.asis__rev-ficha{margin:10px 0 0}
.asis__rev-ficha summary{cursor:pointer;font-weight:600;color:var(--pine);font-size:14.5px}
.asis__rev-ficha .ayuda{margin:6px 0 8px}
.asis__botones{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.asis__estado{margin:0 0 14px;padding:10px 14px;border-radius:var(--radio-s);font-size:14.5px;
  border:1px solid var(--line);background:var(--papel);color:var(--ink)}
.asis__estado--mal{background:#98553314;border-color:#9855333d;color:#8b4a2d}
.asis__estado--info{color:var(--pine)}
.asis__estado a{font-weight:600}

/* --- al lado: el gasto y lo que sabe ------------------------------------------ */
.asis__lado{display:grid;gap:18px;min-width:0}
.asis__lado .tarjeta{padding:20px 22px;margin:0}
.asis__lado .tarjeta + .tarjeta{margin-top:0}
.asis__lado h3{font-size:23px;margin:0 0 8px}
.asis-uso__cifra{margin:0 0 8px;color:var(--suave);font-size:14.5px}
.asis-uso__cifra strong{font-size:26px;color:var(--pine);font-weight:500;margin-right:4px;font-variant-numeric:tabular-nums}
.asis-uso__barra{-webkit-appearance:none;appearance:none;display:block;width:100%;height:8px;border:0;border-radius:60px;
  background:#08676c14;overflow:hidden;margin:0 0 10px;color:var(--teal)}
.asis-uso__barra::-webkit-progress-bar{background:#08676c14;border-radius:60px}
.asis-uso__barra::-webkit-progress-value{background:var(--teal);border-radius:60px}
.asis-uso__barra::-moz-progress-bar{background:var(--teal);border-radius:60px}
.asis-uso--local .asis-uso__barra::-webkit-progress-value{background:var(--copper)}
.asis-uso--local .asis-uso__barra::-moz-progress-bar{background:var(--copper)}
.asis-uso--mal .asis-uso__barra::-webkit-progress-value{background:var(--fallo)}
.asis-uso--mal .asis-uso__barra::-moz-progress-bar{background:var(--fallo)}
.asis-uso__linea{font-size:14px;margin:0 0 8px}
.asis-uso__aviso{font-size:14px;line-height:1.5;margin:0 0 8px;padding:9px 12px;border-radius:10px;background:#d5b68126;color:var(--copper)}
.asis-uso--mal .asis-uso__aviso{background:#98553314;color:#8b4a2d}
.asis-uso .ayuda{margin:0}
.asis-sabe p{font-size:14.5px;margin:0 0 8px}
.asis-sabe p.ayuda{font-size:13px;margin:0}
.asis-sabe__alias{font-size:13.5px !important;line-height:1.5;padding:9px 12px;border-radius:10px;background:#d5b68126;color:var(--copper)}
.asis-uso__proveedor{margin-top:8px !important;color:var(--copper)}

/* --- «Más» en un móvil apaisado y bajito (640x360): con el sexto sitio la
   sábana ya no cabía y se salía por arriba. Tope de alto y se desliza. ------ */
@media(max-width:700px){
  .barra__sabana{max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px - env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain}
}

/* --- /gestion/pacientes en tablet: «Su ficha / Qué hago con este» no partía
   línea y empujaba la página 3 px de lado a 768. Ahora baja a otra línea. -- */
@media (min-width:701px) and (max-width:1023px){
  .tabla td.derecha{white-space:normal !important}
  .tabla td.derecha .acciones-fila{margin-top:4px}
}

/* --- en Ajustes ---------------------------------------------------------------- */
.asis-ajustes__acciones{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0}
.asis-ajustes .codigo{overflow-wrap:anywhere}
.asis-ajustes__acciones form{margin:0}
.asis-ajustes__indice{margin:0 0 16px}
.asis-ajustes__indice .conexion__conectar{margin:0 0 12px;border-top:0;padding-top:0}
/* «Proveedor y nombres exactos» iba pegado al botón «Guardar». */
#asistente-form > .conexion__conectar{margin:4px 0 16px}
#asistente-form > .conexion__conectar[open]{padding-bottom:4px}
.asis-ajustes input[type=radio],.asis-ajustes__fichas input[type=checkbox]{accent-color:var(--pine)}
.asis-ajustes__sobre{border-top:1px solid var(--line);padding-top:14px}
.asis-ajustes__fichas{max-width:none}
.asis-prueba{margin:14px 0 0}
.asis-prueba__ojo{margin:8px 0 0;font-size:14px}
.asis-modelos{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.asis-modelos li{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:12.5px;padding:3px 9px;border-radius:60px;
  background:#08676c12;color:var(--pine);overflow-wrap:anywhere;min-width:0}
.asis-modelos li.elegido{background:var(--pine);color:var(--cream)}

@media(max-width:700px){
  .asis__chat{padding:18px 16px}
  .asis__chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;margin:0 -16px;padding:2px 16px 4px;scroll-padding-inline:16px;
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent)}
  .asis__chips::-webkit-scrollbar{display:none}
  .asis-chip{min-height:44px}
  .asis__encargos{margin-bottom:10px}
  .asis-cabecera{margin-bottom:16px}
  .asis__campo textarea{min-height:130px}
  .asis__pie > .button{width:100%;justify-content:center}
  .asis__ficha{flex:1 1 100%}
  .asis__botones .button{flex:1 1 auto;justify-content:center}
  .asis__cabeza .button.pequeno{min-height:42px}
  .asis-msg{padding:11px 13px}
  .asis__revision{padding:14px 14px}
}

/* --- el aviso flotante (25-09-2026) -------------------------------------------
   «Guardado», «Eliminado», «No se ha podido guardar: …». Lo pone espacio.js
   con el recado de la página: arriba en el ordenador, abajo en el móvil
   (encima de la barra), sin tapar la cabecera. Se va solo o con la ✕. */
.aviso-flotante{
  position:fixed;left:50%;top:86px;transform:translateX(-50%);z-index:97;
  box-sizing:border-box;width:max-content;max-width:min(560px,calc(100vw - 32px));
  display:flex;gap:10px;align-items:flex-start;
  border-radius:14px;padding:11px 8px 11px 16px;font-size:15px;line-height:1.45;
  background:var(--pine);color:var(--cream);box-shadow:0 18px 40px -16px #000a;
  overflow-wrap:anywhere;
}
.aviso-flotante--mal{background:#8b4a2d}
.aviso-flotante__texto{margin:0;flex:1 1 auto;min-width:0;min-height:1.45em}
.aviso-flotante__x{
  flex:0 0 auto;border:0;background:transparent;color:inherit;font:inherit;font-size:16px;line-height:1;
  cursor:pointer;padding:4px 8px;border-radius:8px;min-width:32px;min-height:28px;
}
.aviso-flotante__x:hover,.aviso-flotante__x:focus-visible{background:#ffffff26;outline:none}
@media(max-width:700px){
  .aviso-flotante{top:auto;bottom:calc(74px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:no-preference){
  .aviso-flotante{animation:aviso-entra .22s ease-out}
  @keyframes aviso-entra{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
}
@media print{ .aviso-flotante{display:none !important} }

/* Historiales largos: cinco entradas primero, con el control en el mismo
   sitio para enseñar todo o volver a recogerlo. */
[data-historial] > [hidden]{display:none !important}
.historial-ver{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:10px 0 0;padding:8px 16px;
  border:1px solid var(--teal);border-radius:999px;background:transparent;color:var(--pine);font:inherit;font-size:14px;
  font-weight:600;cursor:pointer}
.historial-ver:hover,.historial-ver:focus-visible{background:#08676c0d;outline:none}
.historial-ver:focus-visible{box-shadow:0 0 0 3px #0b8b8c33}
/* La Agenda: por qué está cerrado un día en un sitio (un festivo, un cambio por fechas). 25-09-2026 */
.ag-sitio-horas__motivo{margin:2px 0 8px;font-size:13px;color:var(--copper)}
/* «Tu firma para Gmail» (29-09-2026): la firma como se verá, el botón y los pasos. */
.firma-muestra{border:1px solid var(--line);border-radius:var(--radio-s);padding:22px 22px 18px;overflow-x:auto;background:var(--blanco)}
.firma-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px}
.firma-dice{margin:0}
.firma-dice:empty{display:none}
.firma-pasos{margin:0 0 14px;padding-left:22px;display:grid;gap:10px;line-height:1.55}
.firma-movil summary{cursor:pointer;color:var(--ink)}
.firma-movil summary + p{margin:14px 0 0}
.firma-texto{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--papel);border:1px solid var(--line);border-radius:var(--radio-s);padding:14px 16px;font:13.5px/1.55 Arial,Helvetica,sans-serif;margin:12px 0 0}
@media (max-width:600px){.firma-muestra{padding:16px 14px 14px}}
/* Los desplegables de acción: el botón «Cancelar» que se les pone (02-10-2026). */
.acciones-fila__cancelar{margin-top:10px}
/* Una cita pedida: confirmar o cambiar (02-10-2026). */
.cita__como{margin:4px 0 8px;font-size:14px;font-weight:600;color:var(--ink)}
.cita__no-puedo{margin:12px 0 0}
/* Darle una cita desde su ficha (02-10-2026). */
.dar-cita{margin:0 0 18px}
.dar-cita > summary{list-style:none;display:inline-flex;cursor:pointer}
.dar-cita > summary::-webkit-details-marker{display:none}
.dar-cita[open] > summary{background:var(--pine);color:var(--cream);border-color:var(--pine)}
.dar-cita__form{margin-top:14px;padding:18px;border:1px solid var(--line);border-radius:var(--radio-s);background:var(--papel)}
/* La Agenda a pantalla completa (02-10-2026): la pantalla entera para el calendario. */
.ag.ag--grande{position:fixed;inset:0;z-index:300;margin:0;padding:14px 18px;background:var(--papel);overflow:auto}
.ag.ag--grande .ag-cuerpo{min-height:calc(100vh - 90px)}
body.ag-entera{overflow:hidden}
body.ag-entera nav.barra,body.ag-entera .site-footer{display:none}
.ag-barra__grande{margin-left:auto}

/* Cambios de la reunión de octubre: aviso y seguimientos. */
.novedades-aviso{display:flex;align-items:center;gap:14px;padding:14px 18px;margin:0 0 20px;border:1px solid var(--sand);border-left:4px solid var(--copper);border-radius:14px;background:var(--papel)}
.novedades-aviso>div{flex:1;min-width:0}.novedades-aviso>div>span{display:block;font-size:.85rem;margin-top:2px;color:var(--suave)}
.novedades-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.novedades-lista h2{margin-top:12px}
.seguimiento-altas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:20px 0}
.seguimiento-altas form,.seguimiento-form{display:grid;gap:14px}.seguimiento-form{margin-top:16px}.seguimiento-form .button,.seguimiento-altas .button{justify-self:start}
.seguimiento-form label,.seguimiento-altas label{display:grid;gap:6px}.ident--primero{font-size:.95em;font-weight:700;margin:0 6px 0 0}
@media(max-width:700px){.novedades-aviso{flex-wrap:wrap;gap:10px}.novedades-aviso .button{margin-left:0}.novedades-lista,.seguimiento-altas{grid-template-columns:1fr}}

.horario-habitual__dias{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:20px 0}.horario-habitual__dias input{width:100%}@media(max-width:400px){.horario-habitual__dias{grid-template-columns:1fr}}

@media(max-width:700px){.novedades-aviso{display:grid;grid-template-columns:auto 1fr;align-items:start}.novedades-aviso>.button{grid-column:2;justify-self:start}.novedades-aviso>div{width:auto}.novedades-aviso>.etiqueta{margin-top:3px}}

@media(max-width:700px){.novedades-aviso{display:flex;gap:12px;padding:12px}.novedades-aviso>.etiqueta,.novedades-aviso>div>span{display:none}.novedades-aviso>div{flex:1}.novedades-aviso strong{font-size:14px}.novedades-aviso>.button{flex:0 1 120px;text-align:center;font-size:13px}}
@media print{.novedades-aviso{display:none!important}}