/* ═══════════════════════════════════════════════════════════════════════════
   EL SUELO TIPOGRÁFICO — léelo antes de escribir un font-size
   ═══════════════════════════════════════════════════════════════════════════
   Nada de esta hoja baja de 14 px. Las micro-etiquetas en versalitas
   (text-transform:uppercase) pueden bajar a 12,5, porque las mayúsculas se leen
   más grandes de lo que miden y son rótulos de una palabra.

   POR QUÉ. Medido el 24 de agosto de 2026: de 154 reglas de font-size, 91
   estaban por debajo de 14 px y 32 a 12 px o menos. La más pequeña, 9,5. No lo
   notó nadie porque quien escribe el CSS ve bien; buena parte de quien usa
   Pautia lleva las gafas de cerca encima de la mesa. Se subieron todas de
   golpe, y el cuerpo de la app pasó a 16.

   Y HAY UNA COMPROBACIÓN QUE LO VIGILA: herramientas/revisar-tipografia.py, que
   llama tools/revisar-sw.py antes de publicar. Si necesitas bajar de ahí,
   añádelo a su lista de EXCEPCIONES con el motivo escrito. Las únicas que hay
   hoy son las del cronograma impreso, cuyo tamaño lo manda que la semana entera
   entre en un A4 y no la pantalla.

   OJO CON LA JERARQUÍA. Subir el suelo aplasta el contraste entre lo principal
   y lo secundario: si lo secundario sube a 14, lo principal no puede quedarse
   en 14,5. Por eso el cuerpo está en 16. Cuando añadas algo, mira qué hay a su
   lado antes de elegir el número. */

/* ═══════════════════════════════════════════════════════════════════════════
   COLOR
   ═══════════════════════════════════════════════════════════════════════════
   Todo el color pasa por estas variables, y el modo oscuro no es más que
   volverlas a definir más abajo. Si añades un color literal en una regla, ese
   trozo de interfaz se quedará en claro cuando alguien encienda el modo oscuro:
   mete el color aquí y úsalo con var().

   Excepción a propósito: `color:#fff` sí se deja literal. Es el texto que va
   encima de los botones y cabeceras de color, que siguen siendo verdes en los
   dos modos, así que ese blanco es correcto en ambos. */
:root{
  --bg:#F6F4EE; --paper:#FFFFFF; --ink:#232323; --ink-soft:#5A5A5A;
  --linea:#E2DFD5;
  --teal:#0B5D53; --teal-dark:#08423B; --teal-soft:#DCEFEC;
  /* Fondo de las barras y cabeceras. Verde oscuro con texto blanco en los
     dos modos: es la identidad de la app y no cambia al oscurecer. Va
     aparte de --teal-dark porque esa, en oscuro, tiene que ACLARARSE para
     seguir leyéndose como color de texto destacado. */
  --barra:#08423B;
  --morning-bg:#FFF6DA; --morning-ink:#7A5A00;
  /* Borde de las cajas de "esto queda pendiente". */
  --ambar-linea:#D9A93A;
  --afternoon-bg:#FFEBDA; --afternoon-ink:#8A4413;
  --evening-bg:#E4ECFB; --evening-ink:#1F4F9E;
  --midday-bg:#EAF4E4; --midday-ink:#3D6B2A;
  --night-bg:#EBE5F7; --night-ink:#4B2E8C;
  --red:#8F241A; --red-soft:#FBE7E3;
  /* Velo sobre las franjas de color, para las tarjetas de cada toma. */
  --sobre-franja:rgba(255,255,255,.6);
  --sobre-franja-suave:rgba(255,255,255,.5);
  --sombra-fab:rgba(0,0,0,.2);
}

/* ── Modo oscuro ──────────────────────────────────────────────────────────
   Los colores por franja se mantienen reconocibles —mañana ámbar, noche azul,
   al acostarse morado— pero desaturados y oscuros, con el texto en el tono
   claro de la misma familia. La alternativa habitual, gris para todo, se carga
   la única señal que permite ubicarse de un vistazo en la pantalla de Hoy.

   No es negro puro: sobre OLED el negro absoluto con texto blanco cansa y hace
   que el texto parezca vibrar al desplazar. */
:root[data-tema="oscuro"]{
  --bg:#14171A; --paper:#1D2126; --ink:#EDEBE6; --ink-soft:#A7A49C;
  --linea:#333940;
  --teal:#5FBFAF; --teal-dark:#8FD6C7; --teal-soft:#17322F;
  --barra:#0B2523;
  --morning-bg:#332B14; --morning-ink:#F0CE72;
  --ambar-linea:#6B5723;
  --afternoon-bg:#35251A; --afternoon-ink:#F3B183;
  --evening-bg:#1B2740; --evening-ink:#9FBEF2;
  --midday-bg:#1F2C1A; --midday-ink:#A8D18C;
  --night-bg:#251E3C; --night-ink:#BFA9F0;
  --red:#F0938A; --red-soft:#3A1D19;
  --sobre-franja:rgba(255,255,255,.07);
  --sobre-franja-suave:rgba(255,255,255,.05);
  --sombra-fab:rgba(0,0,0,.5);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
/* Ningún campo de escritura por debajo de 16px. Safari de iOS hace zoom solo al
   enfocar un campo más pequeño, y eso descoloca la pantalla entera. Esta regla
   es la red de seguridad para los campos que se añadan más adelante y se olviden
   en las reglas concretas; las casillas y los botones quedan fuera porque no
   reciben escritura. */
input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]),
select, textarea{font-size:max(16px, 1em);}
/* El atributo hidden trae un display:none flojito que pierde contra cualquier
   display explícito de una clase. Aquí hay bloques con display:flex que se
   ocultan con hidden, así que se refuerza una sola vez y para todos. */
[hidden]{display:none !important;}
html,body{height:100%;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,"Segoe UI",sans-serif;}
.app{max-width:480px;width:100%;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;}
.topbar{background:var(--barra);color:#fff;padding:14px 18px 12px;position:sticky;top:0;z-index:10;}
.topbar .eyebrow{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.85;font-weight:700;}
.topbar h1{font-size:19px;margin:2px 0 10px;font-weight:800;}
.daynav{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);border-radius:14px;padding:8px 10px;}
/* 44 y no 38. El proyecto tiene escrito el suelo táctil desde la v33 —«todo lo
   que se pulsa con el pulgar llega a 44 px»— pero solo se había aplicado dentro
   del asistente. Estas flechas se pulsan varias veces seguidas para ir a un día
   de atrás, que es justo cuando más se falla. */
.daynav button{width:44px;height:44px;border-radius:12px;border:none;background:rgba(255,255,255,.18);color:#fff;font-size:18px;font-weight:900;}
.daynav .dayinfo{flex:1;text-align:center;font-size:16px;font-weight:800;}
.content{flex:1;padding:14px 14px 90px;}
.banner{background:#FAECE7;border:2px solid #D85A30;color:#712B13;border-radius:12px;padding:10px 14px;font-size:14px;font-weight:700;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.banner button{background:#D85A30;color:#fff;border:none;border-radius:8px;padding:7px 10px;font-size:14px;font-weight:800;}
.slot{border-radius:16px;padding:14px 16px;margin-bottom:12px;}
.slot.morning{background:var(--morning-bg);color:var(--morning-ink);}
.slot.midday{background:var(--midday-bg);color:var(--midday-ink);}
.slot.afternoon{background:var(--afternoon-bg);color:var(--afternoon-ink);}
.slot.evening{background:var(--evening-bg);color:var(--evening-ink);}
.slot.night{background:var(--night-bg);color:var(--night-ink);}
/* Hora concreta: gris neutro a propósito, para que se distinga de un vistazo
   de las franjas de colores y nadie la confunda con una de ellas. */
.slot.hora-exacta{background:#EFEDE6;color:#3A3A3A;border:1.5px solid var(--linea);}
.slot.hora-exacta .slot-head{align-items:baseline;gap:9px;}
.hora-grande{font-size:18px;font-weight:800;letter-spacing:-.02em;}
/* Sin opacity: al 60 % este "HORA EXACTA" se quedaba en 3,29:1 y no llegaba al
   mínimo de 4,5:1, ni en claro ni en oscuro. Ya se distingue de la hora por el
   tamaño (11 px frente a 18) y por las mayúsculas, que no tocan el contraste. */
.hora-nota{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
.slot-head{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;margin-bottom:10px;}
.med-row{display:flex;align-items:flex-start;gap:12px;background:var(--sobre-franja);border-radius:12px;padding:12px 14px;margin-bottom:8px;color:var(--ink);}
.med-row:last-child{margin-bottom:0;}
/* EL HALLAZGO MÁS IMPORTANTE DE LA AUDITORÍA. Esta casilla es la acción que más
   se usa en toda la app —marcar que se ha dado una pastilla— y su objetivo
   táctil eran 26×26 px. El proyecto tiene escrito el suelo de 44 desde la v33,
   y aquí no se había aplicado nunca.

   El recuadro sigue midiendo 26 px: lo que crece es el área que se puede tocar,
   con un ::after invisible centrado de 44×44. Agrandar el dibujo habría
   cambiado el aspecto de la pantalla de Hoy entera; agrandar el área no cambia
   nada de lo que se ve, y la fila mide 107 px, así que sitio hay de sobra. */
.checkbox{position:relative;width:26px;height:26px;border-radius:8px;border:2.5px solid #9A9A9A;background:var(--paper);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:transparent;}
.checkbox::after{content:'';position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);}
.checkbox.taken{background:var(--teal);border-color:var(--teal);color:#fff;}
.checkbox.forgotten{background:var(--red);border-color:var(--red);color:#fff;}
/* min-width:0 y overflow-wrap NO son adorno. Un hijo de flex no se encoge por
   debajo de lo que mide su palabra más larga, y los nombres de medicamento son
   justo eso: «FLUOXETINA» de una pieza. Con el texto en «Muy grande» (zoom 1,3)
   sobre una pantalla de 320 px, el nombre se salía de la fila. */
.med-text{font-size:16px;line-height:1.35;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;}
.med-name{font-weight:800;}
.med-name.done{text-decoration:line-through;}
.med-cond{display:block;font-size:14px;color:var(--ink-soft);font-weight:600;margin-top:3px;}

/* ── De quién es cada toma ──────────────────────────────────────────────────
   Solo se aplica cuando hay más de una persona (lo decide today.js poniendo la
   clase .con-persona). Dos señales para lo mismo: la banda de color agrupa de
   un vistazo, y el nombre escrito lo dice. El color por sí solo no serviría:
   ni para quien no distingue colores, ni para saber CUÁL de los dos hijos es.

   Los colores son fuertes y saturados a propósito. Las franjas del día son
   lavados pálidos, así que aunque a alguien le toque el morado sobre la franja
   morada de la noche, la pastilla no se confunde con el fondo. */
.med-row.con-persona{border-left:5px solid var(--persona);padding-left:11px;}
/* max-width:100% es lo que impide que un nombre largo —«Marcos Fernández de la
   Torre»— se salga de la tarjeta: sin él la chapa es una caja inline-block que
   crece hasta donde haga falta y se va fuera de la pantalla. Con él parte en
   dos líneas, que es feo pero legible; salirse no es ninguna de las dos cosas. */
.persona-chapa{display:inline-block;max-width:100%;background:var(--persona);color:var(--persona-tinta);
  font-weight:800;font-size:14px;letter-spacing:.01em;padding:2px 8px;border-radius:100px;
  margin-right:7px;vertical-align:1px;overflow-wrap:anywhere;}

/* Texto blanco sobre color oscuro: entre 5,26:1 y 7,42:1, todos por encima del
   4,5:1 que pide el mínimo. */
.persona-0{--persona:#1F5FA8; --persona-tinta:#fff;}
.persona-1{--persona:#A33A6B; --persona-tinta:#fff;}
.persona-2{--persona:#2F7A45; --persona-tinta:#fff;}
.persona-3{--persona:#8A5A0B; --persona-tinta:#fff;}
.persona-4{--persona:#6A3FA0; --persona-tinta:#fff;}
.persona-5{--persona:#A33B2C; --persona-tinta:#fff;}
/* Los cuatro de abajo se añadieron cuando seis se quedaron cortos: con los dos
   padres, dos hijos y los cuatro abuelos ya se repetía color.
   Diez es el tope razonable, y no es una limitación técnica: con el texto en
   blanco encima, el color tiene que ser lo bastante oscuro para leerse, y ahí
   dentro no caben veinte tonos que alguien pueda distinguir de un vistazo. Se
   eligen repartidos por el círculo y separados de los seis de arriba:
   turquesa, pizarra, oliva y marrón no se parecen a ninguno de los otros.
   Y el color NUNCA va solo: al lado está siempre el nombre escrito. */
.persona-6{--persona:#0F6B72; --persona-tinta:#fff;}
.persona-7{--persona:#4C5A69; --persona-tinta:#fff;}
.persona-8{--persona:#5E6B1F; --persona-tinta:#fff;}
.persona-9{--persona:#6E4630; --persona-tinta:#fff;}

/* En oscuro se invierte: la pastilla se aclara y el texto se oscurece. Los
   mismos tonos oscuros del modo claro se comerían el fondo de la tarjeta y la
   banda del lado izquierdo no se vería. */
:root[data-tema="oscuro"] .persona-0{--persona:#A9C9F2; --persona-tinta:#14171A;}
:root[data-tema="oscuro"] .persona-1{--persona:#F2AFC9; --persona-tinta:#14171A;}
:root[data-tema="oscuro"] .persona-2{--persona:#A6DBB4; --persona-tinta:#14171A;}
:root[data-tema="oscuro"] .persona-3{--persona:#EBC98A; --persona-tinta:#14171A;}
:root[data-tema="oscuro"] .persona-4{--persona:#C9B0F0; --persona-tinta:#14171A;}
:root[data-tema="oscuro"] .persona-5{--persona:#F0B0A4; --persona-tinta:#14171A;}
:root[data-tema="oscuro"] .persona-6{--persona:#97D4D9; --persona-tinta:#14171A;}
:root[data-tema="oscuro"] .persona-7{--persona:#BCC7D4; --persona-tinta:#14171A;}
:root[data-tema="oscuro"] .persona-8{--persona:#CDD98F; --persona-tinta:#14171A;}
:root[data-tema="oscuro"] .persona-9{--persona:#DDB79C; --persona-tinta:#14171A;}
.ask-block{flex:1;}
.ask-row{display:flex;gap:8px;margin-top:6px;}
.ask-row button{flex:1;font-size:14px;font-weight:800;border-radius:9px;padding:8px 6px;border:none;}
.ask-yes{background:var(--teal);color:#fff;}
.ask-no{background:var(--red);color:#fff;}
.none-slot{font-size:14px;font-weight:700;background:var(--sobre-franja-suave);border-radius:12px;padding:10px 14px;color:var(--ink-soft);text-align:center;}
.empty{text-align:center;color:var(--ink-soft);font-size:14px;padding:40px 20px;}
/* La primera pantalla de quien acaba de entrar. Deja de ser una nota gris para
   convertirse en lo único que hay que mirar, porque literalmente es lo único
   que hay en la pantalla. El botón va a 44 px de alto: es el primero que va a
   pulsar alguien que quizá no ve bien de cerca. */
.empty-titulo{font-size:19px;font-weight:800;color:var(--ink);margin:0 0 8px;}
.empty-texto{font-size:16px;line-height:1.5;max-width:34ch;margin:0 auto 22px;}
.empty .btn-primary{min-height:44px;padding:12px 20px;font-size:16px;}
.tcard{background:var(--paper);border:2px solid var(--linea);border-radius:14px;padding:14px 16px;margin-bottom:10px;}
.tcard h3{margin:0 0 4px;font-size:16px;}
.tcard .meta{font-size:14px;color:var(--ink-soft);margin-bottom:8px;}

/* Filtro por persona en Mis tratamientos.
   Las pastillas llevan el MISMO color que en la pantalla de Hoy, porque salen de
   la misma función: una persona es siempre del mismo color en toda la app. Si
   aquí se pintara con otro criterio, el color dejaría de servir para reconocer a
   nadie, que es justo para lo que está. */
.filtro-personas{margin-bottom:12px;}
/* Sin seleccionar: solo el borde y el texto llevan el color de la persona, para
   que la fila no parezca un semáforo. Al pulsar, se rellena. */
/* .chip.chip-persona y no .chip-persona a secas: la regla general de .chip está
   más abajo en este fichero y, con la misma especificidad, ganaba ella. El
   filtro salía en gris y el color no se veía por ninguna parte. */
.chip.chip-persona{border-color:var(--persona);color:var(--persona);}
.chip.chip-persona.on{background:var(--persona);border-color:var(--persona);color:var(--persona-tinta);}
/* Y la misma regla otra vez para el modo oscuro. No es un descuido: más abajo
   hay un `:root[data-tema="oscuro"] .chip.on` que pinta de verde el chip
   seleccionado, y con la misma especificidad que la línea de arriba ganaba él
   por ir después. Resultado: en claro el filtro salía del color de la persona y
   en oscuro todos en verde. Con el selector del tema delante, esta gana. */
:root[data-tema="oscuro"] .chip.chip-persona.on{
  background:var(--persona);border-color:var(--persona);color:var(--persona-tinta);}
.tcard .meds{font-size:14px;color:var(--ink-soft);}
/* flex-wrap: en un iPhone SE (375 px) los cinco botones no caben y 'Eliminar'
   se salía de la tarjeta, cortado y sin poder pulsarse. Con wrap bajan a una
   segunda fila. El min-width evita que se estrujen hasta ser ilegibles. */
.tcard .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
/* LA PEOR DE TODAS, y por eso va con su motivo escrito: aquí están «Archivar»
   y «Eliminar», uno al lado del otro, y estaban a 35 px de alto. En una app de
   medicación, fallar un toque ahí borra un tratamiento. 44 px. */
.tcard .actions button{flex:1 1 auto;min-width:84px;min-height:44px;font-size:14px;font-weight:700;padding:8px 12px;border-radius:10px;border:1.5px solid var(--linea);background:var(--paper);}
.fab{position:fixed;bottom:74px;right:calc(50% - 240px + 18px);width:56px;height:56px;border-radius:50%;background:var(--teal);color:#fff;font-size:28px;border:none;box-shadow:0 4px 12px rgba(0,0,0,.2);z-index:15;}
.tabbar{position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--linea);display:flex;z-index:10;}
.tabbar button{flex:1;padding:11px 4px;border:none;background:none;font-size:14px;font-weight:700;color:var(--ink-soft);}
.tabbar button.active{color:var(--teal-dark);}
.tabbar .ic{font-size:19px;display:block;margin-bottom:2px;}
.overlay{position:fixed;inset:0;background:var(--bg);max-width:480px;margin:0 auto;z-index:30;display:none;flex-direction:column;overflow-y:auto;}
.overlay.open{display:flex;}

/* La pantalla de instalar tiene que poder abrirse DESDE la bienvenida, y la
   bienvenida es un .lockscreen, que va en la capa 60. Con la capa 30 del resto
   de overlays se abría por detrás: el botón funcionaba, se le llamaba a la
   función, pero no se veía nada. Parecía un botón muerto.
   La pantalla de bloqueo por PIN también es un .lockscreen, pero desde ella no
   hay ningún botón que lleve aquí, así que subir esta capa no la tapa. */
#instalarOverlay{z-index:70;}
.ohead{background:var(--barra);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:12px;position:sticky;top:0;}
/* La flecha de volver. El área que se toca ya eran 44 px (ver más abajo), pero
   la FLECHA se dibujaba a 20 px dentro de esa caja: se veía diminuta y no
   parecía un botón, sino un adorno de la barra. Un objetivo táctil grande no
   sirve de nada si nadie lo ve. Ahora el trazo es de 28 px y lleva un fondo
   tenue que dice dónde hay que tocar. */
.ohead button{background:rgba(255,255,255,.14);border:none;color:#fff;font-size:28px;
  line-height:1;border-radius:12px;padding:0;}
.ohead button:active{background:rgba(255,255,255,.28);}
.ohead h2{margin:0;font-size:17px;font-weight:800;}
.oform{padding:16px;flex:1;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:14px;font-weight:700;color:var(--ink-soft);margin-bottom:5px;}
/* 16px no es un capricho de diseño: por debajo de ese tamaño, Safari de iOS
   hace zoom solo al enfocar el campo y deja la pantalla descolocada. Es lo
   que permite quitar el maximum-scale del viewport y no bloquear el zoom. */
/* min-height y no solo padding: con 11 px arriba y abajo salían 43,5, medio
   píxel por debajo del suelo táctil. Medio píxel no se nota tocando, pero un
   suelo que se cumple «casi» deja de ser un suelo. */
.field input[type=text],.field input[type=number],.field input[type=date],.field input[type=time],.field select,.field textarea{width:100%;min-height:44px;padding:11px 12px;border-radius:10px;border:1.5px solid var(--linea);font-size:16px;font-family:inherit;background:var(--paper);}
.field textarea{min-height:70px;resize:vertical;}
.campo-nota{font-size:14px;color:var(--ink-soft);line-height:1.45;margin:6px 0 0;}
.radiorow{display:flex;gap:8px;flex-wrap:wrap;}
.radiorow label{flex:1;min-width:100px;display:flex;align-items:center;gap:6px;border:1.5px solid var(--linea);border-radius:10px;padding:9px 10px;font-size:14px;}
.chiprow{display:flex;gap:8px;flex-wrap:wrap;}
.chip{border:1.5px solid var(--linea);border-radius:100px;padding:7px 13px;font-size:14px;font-weight:700;background:var(--paper);color:var(--ink-soft);}
.chip.on{background:var(--teal);border-color:var(--teal);color:#fff;}
.medlist{margin-top:6px;}
.medlist .item{background:var(--teal-soft);border-radius:10px;padding:9px 12px;font-size:14px;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.medlist .item .item-name{flex:1;}
.medlist .item.editing{outline:2px solid var(--teal);}
.medlist .item .item-actions{display:flex;gap:12px;align-items:center;flex-shrink:0;}
.medlist .item .item-actions button{background:none;border:none;font-weight:800;}
.medlist .item .edit-btn{color:var(--teal-dark);font-size:14px;}
.medlist .item .rm-btn{color:var(--red);font-size:16px;}
.editing-tag{background:var(--teal);color:#fff;font-size:14px;font-weight:800;padding:6px 10px;border-radius:8px;margin-bottom:10px;display:inline-block;}
.addmedbox{border:2px dashed var(--linea);border-radius:12px;padding:14px;margin-top:6px;}
.btn{width:100%;padding:13px;border-radius:12px;border:none;font-weight:800;font-size:16px;}
/* .btn nació para <button>, que ya viene centrado y sin subrayado. Como enlace
   hay que decírselo todo a mano, o el texto sale pegado a la izquierda, con
   subrayado y con el borde desbordando por el padding. */
a.btn{display:block;box-sizing:border-box;text-align:center;text-decoration:none;}
.btn-primary{background:var(--teal);color:#fff;}
.btn-outline{background:var(--paper);border:1.5px solid var(--teal);color:var(--teal);margin-top:8px;}
/* 44 px de alto también aquí. Son «Quitar» una persona, «Cambiar el nombre» y
   «He perdido el correo»: acciones de verdad, aunque estén escritas en pequeño,
   y «Quitar» además estaba a 41 px de ancho. */
.btn-text{background:none;border:none;color:var(--ink-soft);text-decoration:underline;font-weight:700;font-size:14px;padding:8px 10px;min-height:44px;margin-top:2px;}
/* Rojo, pero de contorno y no macizo: tiene que verse que es destructivo sin
   convertirse en lo más llamativo de la pantalla de Ajustes. */
.btn-peligro{background:var(--paper);border:1.5px solid #B3261E;color:#B3261E;margin-top:8px;}

.cima-box{background:var(--paper);border:1.5px solid var(--linea);border-radius:12px;padding:12px;margin-bottom:4px;}
.cima-box label{display:block;font-size:14px;font-weight:700;color:var(--ink-soft);margin-bottom:3px;}
.cima-hint{font-size:14px;color:var(--ink-soft);margin-bottom:8px;}
/* Se envuelve si no cabe. Con el texto en "Muy grande" el botón no entra al
   lado del campo, y sin wrap se salía de la pantalla llevándose por delante el
   ancho de todo el paso del asistente. */
.cima-search-row{display:flex;flex-wrap:wrap;gap:8px;}
.cima-search-row input{flex:1 1 150px;min-width:0;padding:11px 12px;border-radius:10px;border:1.5px solid var(--linea);font-size:16px;font-family:inherit;}
.cima-search-row button{flex:1 0 auto;padding:0 16px;border-radius:10px;border:none;background:var(--teal);color:#fff;font-weight:800;font-size:14px;}
.cima-search-row button:disabled{opacity:.6;}
#scanBtn{margin-top:8px;}
.cima-status{font-size:14px;font-weight:700;color:var(--ink-soft);margin-top:8px;}
.cima-status-error{color:var(--red);}
.cima-results{margin-top:8px;max-height:260px;overflow-y:auto;}
.cima-results-head{font-size:14px;font-weight:700;color:var(--ink-soft);margin-bottom:6px;}
.cima-result-item{background:var(--teal-soft);border-radius:10px;padding:9px 12px;margin-bottom:6px;cursor:pointer;}
.cima-result-item:active{opacity:.8;}
.cima-result-name{display:block;font-size:14px;font-weight:800;color:var(--ink);}
.cima-result-meta{display:block;font-size:14px;color:var(--ink-soft);margin-top:1px;}
.cima-results-more{font-size:14px;color:var(--ink-soft);text-align:center;padding:4px;}
.cima-tag{background:var(--teal-soft);color:var(--teal-dark);font-size:14px;font-weight:700;padding:8px 10px;border-radius:8px;margin-top:8px;display:flex;justify-content:space-between;align-items:center;gap:8px;}
.cima-tag button{background:none;border:none;color:var(--teal-dark);text-decoration:underline;font-weight:700;font-size:14px;flex-shrink:0;}
.field-divider{text-align:center;font-size:12.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;margin:12px 0;}

.updatebar{display:none;align-items:center;justify-content:space-between;gap:10px;background:var(--teal-soft);color:var(--teal-dark);padding:10px 14px;font-size:14px;font-weight:700;}
.updatebar.open{display:flex;}
.updatebar button{background:var(--teal);color:#fff;border:none;border-radius:10px;
  padding:7px 14px;min-height:44px;font-size:14px;font-weight:800;flex-shrink:0;}
.updatebar button:disabled{opacity:.6;}
.subsbar{background:#FAECE7;color:#712B13;}
/* #D85A30 con texto blanco se quedaba en 3,87:1. Este tono da 5,95:1 con el
   blanco y 5,17:1 contra el fondo de la barra, y es el mismo color de la
   familia, solo un punto más oscuro. */
.subsbar button{background:#B03D18;}

.plan-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
/* flex-wrap + min-width:0: el precio y el botón llevan white-space:nowrap (y con
   razón, «14,99 €» no se parte), así que si el nombre del plan no cede, la fila
   entera crece y el botón «Suscribirme» se sale por la derecha. Es lo que pasaba
   con el texto en «Muy grande». Que el botón caiga a la línea de abajo cuando no
   cabe es la salida buena. */
.plan{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;border:1.5px solid var(--linea);border-radius:12px;padding:11px 13px;background:var(--paper);}
.plan > span:first-child{flex:1 1 130px;min-width:0;}
.plan-nombre{font-size:14px;font-weight:800;color:var(--ink);overflow-wrap:anywhere;}
.plan-detalle{display:block;font-size:14px;color:var(--ink-soft);font-weight:600;margin-top:1px;}
.plan-precio{font-size:16px;font-weight:800;color:var(--teal-dark);white-space:nowrap;}
/* Es un botón de comprar: 44 px de alto como todo lo demás. */
.plan a{text-decoration:none;background:var(--teal);color:#fff;border-radius:10px;
  padding:8px 14px;min-height:44px;display:inline-flex;align-items:center;
  font-size:14px;font-weight:800;white-space:nowrap;cursor:pointer;}
/* Sin aceptar las condiciones el botón se ve apagado, pero sigue siendo pulsable
   para poder explicar por qué no pasa nada. Un botón que desaparece o que ignora
   el dedo en silencio se lee como una app rota, no como un paso pendiente. */
.plan a[aria-disabled="true"]{background:var(--linea);color:#6B6B6B;}
#aceptoCondicionesLabel{border-radius:10px;padding:8px;margin-left:-8px;margin-right:-8px;}
#aceptoCondicionesLabel.destacado{background:#FFF6DA;box-shadow:0 0 0 2px #E0B33A;}
#aceptoCondicionesLabel input{margin-top:2px;flex:none;width:18px;height:18px;}

.instalarbar{background:#FFF6DA;color:#7A5A00;}
.instalarbar button{background:#7A5A00;}

/* Copia de seguridad y avisos del calendario. Azul y no rojo a propósito: no es
   una alarma, es una tarea pendiente. Lleva "Ahora no" porque un aviso del que
   no puedes librarte se acaba ignorando entero. */
/* Aviso de cambio en la política de privacidad. En verde y no en ámbar ni en
   rojo a propósito: no es un problema que resolver ni algo que se te haya
   olvidado, es información. Reutiliza la estructura de .cuidadobar, que ya
   resuelve el caso de dos botones y texto largo. */
/* Versión retirada (PAUTIA-SEC-022). Ambar y no rojo: es «atención», no
   «alarma». Quien lo lee no tiene que hacer nada —la actualización ya se está
   aplicando— y asustar a alguien que gestiona medicación no ayuda a nadie.
   Sin botón, así que el texto ocupa la barra entera. */
.retiradabar{background:#FFF6DA;color:#7A5A00;}
.retiradabar span{flex:1 1 auto;font-weight:700;}

.privacidadbar{background:var(--teal-soft);color:var(--teal-dark);flex-wrap:wrap;}
.privacidadbar span{flex:1 1 100%;}
.privacidadbar button{background:var(--teal);color:#fff;}
.privacidadbar button.mas-tarde{background:none;color:var(--teal-dark);text-decoration:underline;}
.privacidadbar #privacidadBarBtn{margin-left:auto;order:3;}

.cuidadobar{background:#E4ECFB;color:#1F4F9E;flex-wrap:wrap;}
.cuidadobar span{flex:1 1 100%;}
.cuidadobar button{background:#1F4F9E;}
/* Los dos botones se van juntos a la derecha, debajo del texto: si comparten
   línea con él, en una pantalla estrecha el mensaje se parte y no se entiende. */
.cuidadobar button.mas-tarde{background:none;color:#1F4F9E;text-decoration:underline;
  padding:7px 2px;font-weight:700;order:2;}
.cuidadobar #cuidadoBarBtn{margin-left:auto;order:3;}

/* Bloques plegables de Ajustes */
.ajuste{background:var(--paper);border:2px solid var(--linea);border-radius:14px;margin-bottom:10px;overflow:hidden;}
.ajuste summary{padding:15px 16px;font-weight:800;font-size:16px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;}
.ajuste summary::-webkit-details-marker{display:none;}
.ajuste summary span{flex:1;}
.ajuste summary small{font-size:14px;font-weight:700;color:var(--ink-soft);text-align:right;}
.ajuste summary::after{content:'+';font-size:20px;font-weight:800;color:var(--teal);flex-shrink:0;line-height:1;}
.ajuste[open] summary::after{content:'−';}
.ajuste[open] summary{border-bottom:1px solid #EFEBE1;}
.ajuste-cuerpo{padding:14px 16px 16px;}
.ajuste-sub{font-size:13px;font-weight:800;color:var(--teal-dark);text-transform:uppercase;letter-spacing:.03em;margin:20px 0 6px;}
.ajuste-cuerpo > .ajuste-sub:first-child{margin-top:0;}
/* Un bloque plegable DENTRO de otro ("Contar aperturas", dentro de "Sobre
   Pautia"). Se distingue del de fuera bajando el peso: fondo del papel de la
   página en vez de tarjeta, y el título sin la negrita de los grandes. Sigue
   siendo un plegable con su título y su signo, así que se ve y se puede abrir;
   lo que no hace es competir por la atención con los bloques de primer nivel. */
.ajuste-anidado{background:var(--bg);border-width:1.5px;border-radius:12px;margin:18px 0 4px;}
.ajuste-anidado summary{padding:12px 13px;font-size:16px;font-weight:700;}
.ajuste-anidado .ajuste-cuerpo{padding:12px 13px 13px;}

.settings-section{background:var(--paper);border:2px solid var(--linea);border-radius:14px;padding:14px 16px;margin-bottom:12px;}
.settings-section.destacada{border-color:#D8A93B;background:#FFF9E8;}
.settings-section.destacada h3{color:#7A5A00;}

/* Instalación */
.instalar-motivo{background:#FFF6DA;border:2px solid #E5C97A;color:#7A5A00;border-radius:12px;padding:13px 15px;font-size:14px;line-height:1.5;margin-bottom:14px;}
.instalar-motivo strong{display:block;margin-bottom:3px;}
.instalar-titulo{font-size:16px;margin:18px 0 8px;}
.instalar-pasos{margin:0;padding-left:22px;font-size:16px;line-height:1.6;color:var(--ink);}
.instalar-pasos li{margin-bottom:8px;}

/* Bienvenida */
.welcome-body{max-width:440px;margin:0 auto;padding:30px 22px 44px;}
.welcome-logo{width:68px;height:68px;border-radius:16px;display:block;}
.welcome-marca{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--teal-dark);margin-top:12px;}
.welcome-titulo{font-size:26px;line-height:1.2;font-weight:800;margin:4px 0 10px;}
.welcome-texto{font-size:16px;color:var(--ink-soft);margin:0 0 22px;line-height:1.5;}
.welcome-puntos{display:flex;flex-direction:column;gap:12px;margin-bottom:22px;}
.welcome-punto{display:flex;gap:12px;align-items:flex-start;}
.welcome-punto > span{font-size:22px;line-height:1.2;flex-shrink:0;}
.welcome-punto div{font-size:14px;color:var(--ink-soft);line-height:1.45;}
.welcome-punto strong{display:block;color:var(--ink);font-size:16px;}
.welcome-instalar{background:var(--barra);color:#fff;border-radius:14px;padding:16px;margin-bottom:18px;}
.welcome-instalar strong{display:block;font-size:16px;margin-bottom:5px;}
.welcome-instalar p{font-size:14px;color:rgba(255,255,255,.85);margin:0 0 12px;line-height:1.45;}
/* Botón claro sobre el panel verde oscuro. Existía en el HTML desde siempre,
   pero la clase no estaba escrita en ninguna parte: se quedaba con el .btn
   pelado, gris sobre verde, y parecía desactivado justo en el paso que más
   importa que se pulse.

   Colores literales, no variables, y por el mismo motivo que el color:#fff de
   arriba: el panel que hay debajo (--barra) es verde oscuro en los DOS temas.
   Con var(--paper) el botón salía casi negro en modo oscuro, que es como se vio
   el fallo: gris sobre verde otra vez. */
.btn-claro{background:#FFFFFF;color:#08423B;}
.welcome-ok{background:var(--teal-soft);color:var(--teal-dark);border-radius:12px;padding:13px 15px;font-size:14px;font-weight:700;margin-bottom:18px;}
.welcome-prueba{font-size:14px;color:var(--ink-soft);text-align:center;margin:10px 0 0;}

/* Aviso médico. Va en un recuadro sobrio y legible, no en gris pequeñito: es lo
   más importante que se lee en toda la pantalla. */
.welcome-aviso{border:2px solid #E0B33A;background:#FFF9E8;border-radius:14px;padding:16px;margin-bottom:18px;}
.welcome-aviso strong{display:block;font-size:16px;color:#6B4E00;margin-bottom:6px;}
.welcome-aviso p{font-size:14px;color:#5A4600;margin:0 0 12px;line-height:1.5;}
/* 44 px de alto también aquí. Es la casilla del aviso médico y la del
   consentimiento para compartir en familia: dos consentimientos explícitos, y
   los de una sola línea se quedaban en 39. Un consentimiento que cuesta marcar
   se marca mal. */
.welcome-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:700;
  color:#4A3A00;line-height:1.4;cursor:pointer;min-height:44px;padding:4px 0;}
/* Casilla grande: se pulsa con el dedo y buena parte de este público tiene la
   vista cansada. 18px es el mínimo que se acierta sin apuntar. */
.welcome-check input{flex:none;width:20px;height:20px;margin-top:1px;}
.welcome-aviso a{color:#6B4E00;}

/* Modo breve: quien ya conoce la app y solo tiene que aceptar un documento
   actualizado no necesita la presentación entera otra vez. */
.welcome-breve .welcome-solo-completa{display:none !important;}
/* La pregunta del tamaño del texto, en la bienvenida.
   Va en una caja con fondo propio para que se lea como una pregunta que hay que
   contestar y no como parte del texto de presentación. Cada botón se pinta al
   tamaño que ofrece —esa es toda la explicación que necesita— y por eso la fila
   se alinea por la base: si no, con tres tamaños distintos, las palabras bailan.
   Los tres pasan de 44 px de alto, que es el mínimo de zona de toque. */
.welcome-tamano{background:var(--teal-soft);border-radius:14px;padding:14px 15px 12px;margin:0 0 22px;}
.welcome-tamano-pregunta{font-size:16px;font-weight:800;color:var(--teal-dark);margin:0 0 10px;}
.welcome-tamano .chiprow{align-items:baseline;}
.chip-tamano{min-height:44px;padding:8px 12px;}
.chip-tamano-normal{font-size:14px;}
.chip-tamano-grande{font-size:16px;}
.chip-tamano-enorme{font-size:19px;}
.welcome-tamano-nota{font-size:14px;color:var(--ink-soft);line-height:1.45;margin:10px 0 0;}
/* El parte del día, al final de la pantalla de Hoy. Sin caja ni color: es una
   salida opcional, no una tarea pendiente, y una tarjeta destacada al final del
   día se lee como algo que falta por hacer. */
.parte-caja{margin-top:18px;}
.parte-nota{font-size:14px;color:var(--ink-soft);line-height:1.45;margin:8px 2px 0;text-align:center;}
/* La cabecera de la zona de cada persona en la lista de tratamientos. Lleva su
   color en una barra a la izquierda y no de fondo: el fondo de color compite con
   las tarjetas y hace que la lista parezca un semáforo. */
.persona-grupo{font-size:16px;font-weight:800;margin:22px 0 10px;padding-left:11px;
  border-left:5px solid var(--persona, var(--teal));color:var(--ink);}
.persona-grupo:first-of-type{margin-top:14px;}
/* La ficha de cada persona dentro de Ajustes. */
.persona-ficha{border:1.5px solid var(--linea);border-radius:12px;padding:12px 13px;margin-bottom:10px;}
.persona-ficha-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.persona-ficha-cuenta{font-size:14px;color:var(--ink-soft);font-weight:700;}
.persona-colores{margin-top:10px;}
/* Los seis colores. Redondos y sin texto dentro, pero con 44 px de zona de
   toque: el círculo se ve de 28 y el botón mide lo que tiene que medir. */
.chip-color{width:44px;height:44px;border:none;background:none;padding:8px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;}
.chip-color::before{content:'';width:100%;height:100%;border-radius:50%;background:var(--persona);
  border:2px solid transparent;}
.chip-color.on::before{border-color:var(--ink);box-shadow:0 0 0 2px var(--paper) inset;}
.persona-ficha-acciones{display:flex;gap:16px;margin-top:6px;}
.persona-ficha-acciones .btn-text{width:auto;padding:8px 10px;min-height:44px;margin:0;}

/* ═══ MODO SENCILLO ══════════════════════════════════════════════════════════
   Lo que hace la marca data-sencillo de la raíz. La lista es corta a propósito:
   un modo que cambia veinte cosas no se puede probar ni explicar. El porqué de
   cada una está en js/tema.js.

   LO QUE NO SE ESCONDE NUNCA: las copias de seguridad. Quien enciende esto es
   quien más papeletas tiene de perderlo todo al cambiar de móvil. */

/* La casilla del propio modo, que lleva un título y una explicación debajo. */
.sencillo-check{align-items:flex-start;}
.sencillo-check strong{display:block;font-size:16px;}
.sencillo-check small{display:block;font-size:14px;font-weight:600;color:var(--ink-soft);
  line-height:1.45;margin-top:3px;}

/* El buscador de CIMA del asistente. Es una vía alternativa para escribir el
   nombre, no un paso: quien está en modo sencillo escribe el nombre y sigue.
   Sigue existiendo con el modo apagado. */
:root[data-sencillo] .cima-box,
:root[data-sencillo] .field-divider{display:none;}

/* El cumplimiento es una estadística, no algo que haya que hacer. En una
   pantalla que se quiere corta, un porcentaje de adherencia además invita a
   leerse como una nota, que es justo lo que Pautia no quiere ser. */
:root[data-sencillo] .ajuste[data-bloque="cumplimiento"]{display:none;}

/* En modo sencillo, «¿cuánto se toma cada vez?» y «¿quieres que te avise?»
   tienen pantalla propia. No se les pone un título aparte: la etiqueta del campo
   YA es la pregunta, y repetirla arriba sobraría. Lo que se hace es agrandarla
   para que se lea como el título que es —y así el campo conserva su etiqueta de
   verdad, que es lo que lee un lector de pantalla. */
#cuantoHueco > .field > label,
#avisoHueco > .field > label{
  font-size:21px;font-weight:800;color:var(--ink);line-height:1.25;margin-bottom:14px;
  text-transform:none;letter-spacing:0;
}
#cuantoHueco > .field,
#avisoHueco > .field{margin-top:4px;}
/* La cantidad y la unidad, una debajo de otra en su pantalla propia. Al lado se
   quedaban en 118 px cada una y el marcador de la unidad salía cortado
   —«Ej. comprim»—; y en una pantalla que solo hace una pregunta no hay ninguna
   prisa por ahorrar alto. */
#cuantoHueco .dos-campos{flex-direction:column;}
#cuantoHueco .dos-campos > input{flex:none;width:100%;}

/* ═══ LA FOTO DEL MEDICAMENTO ════════════════════════════════════════════════
   La miniatura que va al lado del nombre se recorta en cuadrado con object-fit:
   una foto apaisada de una caja, metida a la fuerza en un cuadrado, sale
   aplastada y no se reconoce. Y con el mismo alto que el dibujo, para que las
   filas de la pantalla de Hoy no bailen según cuál tenga cada medicamento. */
.foto-marca{border-radius:5px;object-fit:cover;vertical-align:-.22em;margin-right:6px;
  flex-shrink:0;background:var(--bg);}
.foto-caja{margin-bottom:14px;}
.foto-vista{margin-bottom:10px;}
.foto-vista img{display:block;width:100%;max-width:260px;border-radius:12px;border:1.5px solid var(--linea);}
.foto-caja .btn-text{width:auto;padding:8px 10px;min-height:44px;}
/* El botón que envuelve la foto para poder ampliarla. Se comporta como si no
   estuviera: ni fondo, ni borde, ni relleno, para que la fila de Hoy se vea
   igual que antes. Lo único que añade es el foco visible, que es lo que
   necesita quien va con el teclado. */
.foto-marca-btn{background:none;border:none;padding:0;margin:0;line-height:0;
  display:inline;vertical-align:baseline;cursor:zoom-in;}
.foto-marca-btn:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px;}

/* La foto a pantalla completa. Fondo oscuro en los dos temas a propósito: lo que
   importa aquí es la foto, y un fondo claro alrededor de una foto de una caja
   la hace parecer más oscura de lo que es. */
.foto-lupa{position:fixed;inset:0;z-index:60;background:rgba(15,17,19,.97);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;}
.foto-lupa[hidden]{display:none;}
.foto-lupa img{max-width:100%;max-height:75vh;border-radius:12px;object-fit:contain;}
.foto-lupa-pie{color:#fff;font-size:16px;font-weight:700;text-align:center;margin:0;max-width:34ch;}
.foto-lupa-cerrar{position:absolute;top:12px;right:12px;width:48px;height:48px;border-radius:50%;
  border:none;background:rgba(255,255,255,.15);color:#fff;font-size:22px;line-height:1;}

/* ═══ COMPARTIR EN FAMILIA ═══════════════════════════════════════════════════
   Cada canal, una ficha. El borde rojo cuando el último intento falló: un canal
   que lleva días sin poder enviar y no lo dice es peor que no tener canal, y
   esa lección ya está aprendida en sincro.js. */
.canal-ficha{border:1.5px solid var(--linea);border-radius:12px;padding:12px 13px;margin-bottom:10px;}
.canal-ficha.canal-con-fallo{border-color:var(--red);}
.canal-ficha-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.canal-ficha-cab strong{font-size:16px;}
.canal-estado{font-size:14px;color:var(--ink-soft);font-weight:700;}
.canal-con-fallo .canal-estado{color:var(--red);}
.canal-comparte{font-size:14px;color:var(--ink-soft);margin:6px 0 2px;line-height:1.45;}
#canalPersonas .phrase-check{margin-bottom:6px;}

/* ═══ CÓMO ES LA PASTILLA ════════════════════════════════════════════════════
   Los iconos son SVG en línea, así que heredan el color del texto para los
   bordes (currentColor) y llevan el relleno que haya elegido la persona. El
   borde es obligatorio en todas las formas: sin él, una pastilla blanca
   desaparece sobre el papel en modo claro. */
.aspecto-icono{vertical-align:-.22em;margin-right:6px;flex-shrink:0;}
.aspecto-vista{display:flex;align-items:center;gap:12px;background:var(--bg);
  border-radius:12px;padding:12px 14px;margin:10px 0 14px;min-height:70px;}
.aspecto-vista .aspecto-icono{margin:0;}
.aspecto-vista-texto{font-size:16px;font-weight:700;color:var(--ink-soft);}
/* Rejilla de formas: cuatro por fila en un móvil estrecho, y cada casilla con
   su nombre debajo. El nombre no es decorativo: el dibujo solo no distingue
   "ovalada" de "alargada", y el color solo no vale para quien no lo distingue. */
.aspecto-rejilla{display:grid;grid-template-columns:repeat(auto-fill, minmax(88px, 1fr));gap:8px;}
.aspecto-op{display:flex;flex-direction:column;align-items:center;gap:5px;
  min-height:78px;padding:9px 5px;border:1.5px solid var(--linea);border-radius:12px;
  background:var(--paper);color:var(--ink);}
.aspecto-op span{font-size:14px;font-weight:700;line-height:1.2;text-align:center;}
.aspecto-op.on{border-color:var(--teal);border-width:2.5px;background:var(--teal-soft);}
.chip-color-aspecto::before{background:var(--tono);border-color:var(--linea);}
.chip-color-aspecto.on::before{border-color:var(--ink);border-width:3px;}
/* En la hoja impresa el dibujo va pequeño y pegado al nombre: la tabla ya va
   justa de ancho y cada píxel de más empuja las columnas. */
.schedule-item-txt .aspecto-icono{margin-right:3px;vertical-align:-.18em;}
.settings-section h3{margin:0 0 6px;font-size:16px;}
.settings-note{font-size:14px;color:var(--ink-soft);line-height:1.45;margin:0 0 10px;}
.settings-status{font-size:14px;font-weight:800;padding:8px 10px;border-radius:8px;margin-bottom:10px;}
.settings-status.on{background:var(--teal-soft);color:var(--teal-dark);}
.settings-status.off{background:#EFEBE1;color:var(--ink-soft);}

.phrase-warning{background:#FAECE7;border:2px solid #D85A30;color:#712B13;border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.5;margin-bottom:14px;}
.phrase-warning strong{display:block;margin-bottom:4px;}
.phrase-words{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0 16px;}
.phrase-word{background:var(--teal-soft);border-radius:10px;padding:10px 12px;font-size:16px;font-weight:700;color:var(--teal-dark);display:flex;align-items:center;gap:8px;}
.phrase-num{font-size:14px;font-weight:800;color:var(--ink-soft);min-width:16px;}
/* El <label> es el objetivo táctil de verdad: en HTML, tocar la etiqueta marca
   la casilla. Los de dos líneas ya pasaban de 44 px por su propio texto, pero
   los de una sola —«Incluir las fotos en la copia», «Contar aperturas»— se
   quedaban en 20 y 24 px, y son interruptores que se pulsan de verdad. */
.phrase-check{display:flex;align-items:flex-start;gap:8px;font-size:14px;font-weight:700;color:var(--ink-soft);margin:14px 0 10px;line-height:1.4;min-height:44px;padding:6px 0;}
.phrase-check input{margin-top:3px;flex-shrink:0;}
.btn:disabled{opacity:.5;}

.lockscreen{position:fixed;inset:0;background:var(--bg);z-index:60;display:none;overflow-y:auto;}
.lockscreen.open{display:block;}
.pin-body{max-width:400px;margin:0 auto;padding:32px 20px 40px;display:flex;flex-direction:column;align-items:center;}
.lock-brand{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--teal-dark);}
.lock-title{font-size:19px;font-weight:800;margin:6px 0 22px;}
.pin-dots{display:flex;gap:14px;margin-bottom:14px;}
.pin-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--teal);background:transparent;}
.pin-dot.filled{background:var(--teal);}
.lock-msg{font-size:14px;font-weight:700;color:var(--ink-soft);text-align:center;min-height:38px;line-height:1.4;padding:0 8px;}
.lock-msg-error{color:var(--red);}
.keypad{display:grid;grid-template-columns:repeat(3,72px);justify-content:center;gap:16px;margin-bottom:18px;}
.key{width:72px;height:72px;border-radius:50%;border:none;background:var(--paper);color:var(--ink);font-size:24px;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.key:active{background:var(--teal-soft);}
.key:disabled{opacity:.45;}
.key-empty{width:72px;height:72px;}
.key-del{background:transparent;box-shadow:none;font-size:22px;}
#pinSetup .pin-body{padding-top:24px;}

.scan-body{padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:16px;}
#scanVideo{width:100%;max-width:440px;border-radius:14px;background:#000;aspect-ratio:3/4;object-fit:cover;}
.scan-hint{font-size:14px;font-weight:700;color:var(--ink-soft);text-align:center;margin:0;}
.scan-hint-error{color:var(--red);}

.schedule-weeknav{display:flex;align-items:center;gap:10px;background:var(--teal-soft);border-radius:14px;padding:8px 10px;}
/* Las mismas flechas que las de la pantalla de Hoy, y por el mismo motivo: 44. */
.schedule-weeknav button{width:44px;height:44px;border-radius:12px;border:none;background:var(--paper);color:var(--teal-dark);font-size:18px;font-weight:900;}
.schedule-weeknav .dayinfo{flex:1;text-align:center;font-size:14px;font-weight:800;color:var(--teal-dark);}
.schedule-preview{padding:16px;overflow-x:auto;}
/* La marca va arriba a la derecha, separada de los datos: quien mira la hoja
   busca los medicamentos, no el logo. El QR está para que quien la reciba
   —un hermano, la persona que cuida— pueda llegar a Pautia sin teclear nada. */
.schedule-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;margin-bottom:10px;}
.schedule-marca{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.schedule-marca-qr{display:flex;flex-direction:column;align-items:center;gap:2px;}
.schedule-logo{width:38px;height:38px;border-radius:9px;}
.schedule-qr{width:54px;height:54px;display:block;}
.schedule-url{font-size:9.5px;font-weight:700;color:var(--ink-soft);letter-spacing:.01em;}
.schedule-title{font-size:16px;font-weight:800;color:var(--teal-dark);margin-bottom:2px;}
.schedule-header-info{font-size:12.5px;color:var(--ink-soft);}
.schedule-header-info + .schedule-header-info{margin-top:1px;}
.schedule-head + .schedule-table{margin-top:2px;}
.schedule-table{width:100%;border-collapse:collapse;font-size:11px;}
.schedule-table th,.schedule-table td{border:1px solid var(--linea);padding:6px;vertical-align:top;text-align:left;}
.schedule-table thead th{background:var(--teal-soft);color:var(--teal-dark);font-size:11px;}
.schedule-table .slot-th{background:#F6F4EE;font-weight:800;white-space:nowrap;}
.schedule-item{margin-bottom:4px;display:flex;align-items:flex-start;gap:5px;}
/* min-width:0 es lo que permite que el nombre largo se ajuste dentro de su
   propia caja en vez de desbordar la celda. */
.schedule-item-txt{flex:1;min-width:0;overflow-wrap:break-word;}
.schedule-chk{margin-top:2px;}
.schedule-chk{display:inline-block;width:11px;height:11px;border:1.3px solid #555;flex-shrink:0;}
.schedule-blank-line{display:inline-block;border-bottom:1px solid #999;flex:1;height:1em;}

/* ═══ IMPRESIÓN DEL CRONOGRAMA ═══════════════════════════════════════════════
   Esta hoja acaba en la nevera o en el bolso de quien cuida, así que tiene que
   salir bien a la primera: nadie va a pelearse con el diálogo de impresión.

   Tres cosas se hacían mal y salían páginas en blanco y la tabla descuadrada:

   1. Se ocultaba con `visibility:hidden`, que esconde pero DEJA EL HUECO. La
      app entera —asistente, ajustes, todas las pantallas— seguía ocupando su
      alto, y detrás del cronograma salían varias hojas vacías. Con
      `display:none` el hueco desaparece. Se puede ocultar por hijos directos de
      body porque #scheduleOverlay cuelga de body, no de .app.
   2. El ajuste de tamaño de texto se aplica con `zoom` sobre la raíz (ver
      js/tema.js). Quien lo tuviera en «Muy grande» imprimía la tabla un 30 %
      más grande de lo que cabe, y se partía. Al imprimir se vuelve a 1: en
      papel no hace falta, porque el papel ya es grande.
   3. La tabla no tenía ancho fijo, así que las columnas se repartían según el
      texto de cada celda y los días salían de anchos distintos. */
@media print{
  body > *{display:none !important;}
  #scheduleOverlay{
    display:block !important;position:static !important;
    background:#fff;max-width:none;margin:0;padding:0;
  }
  #scheduleOverlay .ohead,
  #scheduleOverlay .schedule-controls{display:none !important;}
  .schedule-preview{padding:0;overflow:visible;}

  :root{zoom:1 !important;}
  html,body{background:#fff;}

  /* Sin esto el navegador quita los fondos al imprimir «para ahorrar tinta», y
     la fila de cada franja pierde su banda de color, que es lo que permite
     seguir la hoja de un vistazo. */
  #scheduleOverlay *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}

  @page{size:A4 landscape;margin:10mm;}

  .schedule-table{table-layout:fixed;width:100%;font-size:8.5pt;}
  .schedule-table th,
  .schedule-table td{padding:3.5pt 3pt;overflow-wrap:break-word;word-break:normal;}
  /* La primera columna lleva el nombre de la franja; los siete días se reparten
     lo que queda a partes iguales. */
  .schedule-table .slot-th{width:13%;}
  .schedule-table thead th:not(.slot-th){width:12.4%;}
  /* Que no se parta una fila por la mitad, y que si la tabla salta de hoja la
     cabecera con los días se repita: una segunda página sin días no se entiende. */
  .schedule-table tr,
  .schedule-item{break-inside:avoid;page-break-inside:avoid;}
  .schedule-table thead{display:table-header-group;}

  .schedule-marca{gap:6pt;}
  .schedule-logo{width:11mm;height:11mm;}
  .schedule-qr{width:16mm;height:16mm;}

  /* ── Letra grande: la semana en dos hojas ────────────────────────────────
     La hoja de la nevera era lo más pequeño de todo Pautia: 8,5 pt, y ese
     tamaño no lo mandaba la pantalla sino que siete columnas por cinco franjas
     entraran en un A4. Quitando columnas hay sitio, y la letra sube a 14 pt.
     Más del doble, y sin que la tabla se parta. */
  .schedule-grande .schedule-hoja{break-after:page;page-break-after:always;}
  .schedule-grande .schedule-hoja:last-child{break-after:auto;page-break-after:auto;}
  .schedule-grande .schedule-table{font-size:14pt;}
  .schedule-grande .schedule-table th,
  .schedule-grande .schedule-table td{padding:6pt 5pt;}
  /* Cuatro días la primera hoja y tres la segunda: en vez de fijar el ancho de
     cada columna, se deja que la tabla reparta lo que sobra de la primera. */
  .schedule-grande .schedule-table .slot-th{width:16%;}
  .schedule-grande .schedule-table thead th:not(.slot-th){width:auto;}
  .schedule-grande .schedule-title{font-size:17pt;}
  .schedule-grande .schedule-header-info{font-size:11pt;}
}

/* En pantalla, las dos hojas se separan para que se vea que son dos. En papel
   las separa el salto de página. */
.schedule-grande .schedule-hoja + .schedule-hoja{margin-top:22px;padding-top:18px;
  border-top:2px dashed var(--linea);}

/* ═══ ASISTENTE DE TRATAMIENTOS ═══════════════════════════════════════════════
   Un paso cada vez, controles grandes y nada de formularios kilométricos.
   Pensado para el pulgar: los objetivos táctiles no bajan de 44 px. */

.ohead .paso-contador{margin-left:auto;font-size:14px;font-weight:700;opacity:.8;}
.paso-barra{height:3px;background:rgba(0,0,0,.06);position:sticky;top:56px;z-index:9;}
.paso-barra span{display:block;height:100%;background:var(--teal);transition:width .25s ease;}

.paso-titulo{font-size:21px;font-weight:800;color:var(--teal-dark);margin:4px 0 6px;line-height:1.2;}
.paso-titulo.centrado{text-align:center;}
.paso-ayuda{font-size:14px;color:var(--ink-soft);line-height:1.5;margin:0 0 16px;
  background:var(--teal-soft);border-radius:10px;padding:10px 12px;}
.opcional{font-weight:600;color:var(--ink-soft);text-transform:none;}

/* Pie fijo: el botón principal siempre a mano, sin buscarlo al final del scroll. */
.paso-pie{position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--linea);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;gap:10px;align-items:center;}
.paso-pie .btn{margin-top:0;}
.paso-pie #wizAtras{width:auto;flex-shrink:0;padding:13px 14px;}
.paso-pie #wizSiguiente{flex:1;}

/* Opciones grandes: una decisión por bloque, fácil de tocar. */
.opciones{display:flex;flex-direction:column;gap:8px;}
.opcion{display:flex;align-items:flex-start;gap:10px;border:1.5px solid var(--linea);border-radius:12px;
  padding:13px 14px;background:var(--paper);cursor:pointer;min-height:52px;}
.opcion input{margin-top:2px;flex-shrink:0;width:20px;height:20px;}
.opcion span{display:flex;flex-direction:column;gap:2px;}
.opcion strong{font-size:16px;color:var(--ink);}
.opcion small{font-size:14px;color:var(--ink-soft);}
.opcion:has(input:checked){border-color:var(--teal);background:var(--teal-soft);}

.chip{min-height:44px;cursor:pointer;}
.chip-dia{width:44px;padding:7px 0;text-align:center;}

.resumen-suave{background:var(--teal-soft);color:var(--teal-dark);border-radius:10px;
  padding:10px 12px;font-size:14px;font-weight:700;line-height:1.45;margin-top:8px;}
.resumen-suave:empty{display:none;}
.campo-error{color:var(--red);font-size:14px;font-weight:700;margin:6px 0 0;}
.vacio-suave{font-size:14px;color:var(--ink-soft);text-align:center;padding:16px 10px;
  border:1.5px dashed var(--linea);border-radius:12px;margin:0;}

/* flex-wrap NO es un adorno: es lo que garantiza que esto no se pise nunca.
   En iOS, <input type="time"> es un control nativo que se NIEGA a dibujarse por
   debajo de cierto ancho, aunque se le ponga width:100%. Si la fila no puede
   partirse, ese ancho mínimo empuja al campo de al lado y se montan uno encima
   del otro: es lo que se vio en un iPhone Pro Max, en «Apuntar una toma», con
   el campo de la persona pisando el de la hora.
   Con wrap y una base de 118 px, si los dos caben van en paralelo como siempre,
   y si no caben el segundo baja a su propia línea. Feo antes que roto. */
.dos-campos{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;}
/* min-width:0 NO es opcional aquí.
   Un elemento flexible vale por defecto min-width:auto, y eso significa que no
   puede encogerse por debajo de lo que mida su contenido. Dentro de estas
   columnas hay <input type="time">, que en iOS es un widget nativo ANCHO: el
   campo no cabía, se desbordaba y se montaba encima del de al lado. Visto en un
   iPhone Pro Max, en «Apuntar una toma»: el campo de la persona pisaba el de la
   hora.
   align-items:flex-start para que las dos columnas se alineen por arriba aunque
   una crezca más que la otra. */
.dos-campos .field{flex:1 1 118px;min-width:0;}
.dos-campos .field input,
.dos-campos .field select{max-width:100%;}

/* Y aquí está lo que faltaba, que costó una segunda vuelta.
   Lo de arriba da por hecho que <input type="time"> se deja encoger. NO se deja.
   Es un control nativo y cada navegador le pone su propio ancho mínimo por
   dentro; ni width:100% ni max-width:100% lo doblan. Medido en la captura de un
   móvil: la columna medía 184 px y el control se dibujó a 209, o sea 25 px
   fuera de su columna, encima del campo de al lado.
   Ojo al detalle que lo delata: los elementos de un flex NUNCA se solapan entre
   sí. Si dos se pisan, no es que la fila esté mal repartida; es que el contenido
   de uno se está saliendo. Por eso el arreglo no va en la fila, va en la columna.
   min-width:min-content dice justo lo que hace falta: esta columna no puede ser
   más estrecha que lo que lleva dentro. Con eso, si el control cabe al lado del
   otro campo van en paralelo como siempre, y si no cabe la fila parte en dos
   líneas ella sola, sin tener que adivinar el ancho de nadie ni poner un
   @media con un número inventado. Se adapta a cada navegador, que es el punto:
   el ancho del reloj nativo no es algo que podamos saber desde aquí. */
.dos-campos .field.campo-hora{min-width:min-content;}
/* Red de seguridad por si algún día se añade otra fila con hora o fecha y se
   olvida la clase. :has() lo entienden todos los navegadores desde 2023; la
   clase de arriba es la que garantiza que funcione también sin él. */
.dos-campos .field:has(input[type="time"]),
.dos-campos .field:has(input[type="date"]){min-width:min-content;}
/* En el bloque de cantidad común los campos van sueltos, sin envoltorio. */
.dos-campos > input{flex:1 1 118px;min-width:0;}

/* Cantidad común: es el campo que antes no existía y por el que la gente
   guardaba el medicamento sin decir cuánto se toma. Va destacado a propósito. */
#cantidadComunBox{background:var(--teal-soft);border:1.5px solid var(--linea);
  border-radius:14px;padding:13px 14px;}
#cantidadComunBox > label{font-size:14px;color:var(--teal-dark);margin-bottom:8px;}
.aviso-mixto{font-weight:700;}

/* Aviso de las tomas. Va en caja propia, como la cantidad, porque son las dos
   preguntas que alguien se hace al apuntar una medicación: cuánto y si le van
   a avisar. Con el fondo del papel y no en verde: dos cajas verdes seguidas
   pesan, y la de la cantidad es la que tiene que llevarse la mirada primero. */
#avisoBox{background:var(--paper);border:1.5px solid var(--linea);
  border-radius:14px;padding:13px 14px;}
#avisoBox > label{font-size:14px;color:var(--teal-dark);margin-bottom:8px;}
/* Solo sale al elegir un aviso, y ahí sí conviene que destaque: es la única
   pista de que falta un paso para que suene de verdad. */
.aviso-pendiente{background:var(--morning-bg);color:var(--morning-ink);
  border-radius:9px;padding:8px 10px;font-weight:700;}

/* Lista de tomas: cada una se toca para editarla. */
.tomas-lista{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.toma-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:var(--paper);border:1.5px solid var(--linea);border-radius:12px;padding:11px 13px;min-height:56px;}
.toma-item.es-hora{border-color:var(--linea);background:#FAF9F5;}
.toma-momento{display:flex;flex-direction:column;font-weight:800;font-size:16px;
  color:var(--teal-dark);min-width:104px;}
.toma-momento small{font-weight:600;font-size:14px;color:var(--ink-soft);text-transform:none;}
.toma-cantidad{flex:1;font-size:14px;color:var(--ink);}
.toma-cantidad.sin{color:var(--ink-soft);font-style:italic;}
.toma-editar{font-size:14px;font-weight:800;color:var(--teal);flex-shrink:0;}

/* Lo avanzado, plegado hasta que haga falta. */
.caja-avanzada{border:1.5px solid var(--linea);border-radius:12px;background:var(--paper);margin-bottom:12px;}
.caja-avanzada summary{padding:14px;font-size:14px;font-weight:800;color:var(--teal-dark);
  cursor:pointer;list-style:none;min-height:48px;display:flex;align-items:center;justify-content:space-between;}
.caja-avanzada summary::-webkit-details-marker{display:none;}
.caja-avanzada summary::after{content:"+";font-size:20px;color:var(--teal);}
.caja-avanzada[open] summary::after{content:"−";}
.caja-avanzada-cuerpo{padding:0 14px 14px;}
.caja-plegable{border:1.5px solid var(--linea);border-radius:12px;background:var(--paper);padding:14px;margin-bottom:12px;}

/* Etapas */
.etapas-lista{display:flex;flex-direction:column;gap:10px;margin:12px 0;}
.etapa-card{border:1.5px solid var(--linea);border-radius:12px;background:var(--paper);padding:13px;}
.etapa-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.etapa-cab strong{font-size:14px;color:var(--teal-dark);}
.etapa-quitar{background:none;border:none;color:var(--red);font-size:14px;font-weight:800;padding:6px;}
.etapa-rango{font-size:14px;color:var(--ink-soft);font-weight:700;margin-bottom:8px;}
.etapa-tomas{font-size:14px;line-height:1.5;background:var(--bg);border-radius:9px;padding:9px 11px;margin-bottom:8px;}
.aviso-etapa{background:#FFF6DA;color:#7A5A00;border-radius:9px;padding:9px 11px;
  font-size:14px;font-weight:700;margin-top:8px;line-height:1.45;}

/* Revisión */
.rev-cabecera{background:var(--barra);color:#fff;border-radius:14px;padding:14px 16px;margin-bottom:12px;}
.rev-persona{font-size:17px;font-weight:800;}
.rev-duracion{font-size:14px;opacity:.9;margin-top:2px;}
.rev-editar{background:none;border:none;color:var(--teal);font-size:14px;font-weight:800;padding:6px 0;}
.rev-cabecera .rev-editar{color:#fff;text-decoration:underline;}
.rev-bloque{border:1.5px solid var(--linea);border-radius:14px;background:var(--paper);padding:14px;margin-bottom:10px;}
.rev-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.rev-cab h4{margin:0 0 6px;font-size:16px;color:var(--teal-dark);}
.rev-prn{display:inline-block;background:var(--teal-soft);color:var(--teal-dark);font-size:14px;
  font-weight:800;padding:3px 9px;border-radius:999px;margin-bottom:8px;}
.rev-etapa-cab{font-size:12.5px;font-weight:800;color:var(--ink-soft);text-transform:uppercase;
  letter-spacing:.04em;margin:10px 0 5px;}
.rev-rep{font-size:14px;color:var(--teal);font-weight:700;margin-bottom:5px;}
.rev-toma{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:14px;
  border-bottom:1px solid #F0EDE5;}
.rev-toma:last-child{border-bottom:none;}
.rev-momento{font-weight:800;color:var(--teal-dark);}
.rev-momento.es-hora{font-variant-numeric:tabular-nums;}
.rev-cant{color:var(--ink-soft);text-align:right;}
.rev-total{margin-top:10px;font-size:14px;font-weight:700;color:var(--ink-soft);
  border-top:1px dashed var(--linea);padding-top:8px;}
.rev-nota{background:var(--bg);border-radius:10px;padding:10px 12px;font-size:14px;
  color:var(--ink-soft);margin-bottom:8px;line-height:1.45;}
.rev-legal{font-size:14px;color:var(--ink-soft);line-height:1.5;margin:12px 0 0;}

/* Confirmación */
.hecho-marca{width:64px;height:64px;border-radius:50%;background:var(--teal);color:#fff;
  font-size:32px;font-weight:900;display:flex;align-items:center;justify-content:center;margin:20px auto 4px;}
.hecho-proxima{background:var(--teal-soft);border-radius:14px;padding:16px;margin:16px 0;text-align:center;}
.hecho-etiqueta{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--teal);margin-bottom:4px;}
.hecho-cuando{font-size:18px;font-weight:800;color:var(--teal-dark);}
.hecho-que{font-size:14px;color:var(--ink);margin-top:3px;}
.hecho-nota{text-align:center;color:var(--ink-soft);font-size:14px;margin:16px 0;}

/* "Falta un paso para que suene".
   En ámbar y no en verde a propósito: el verde de esta pantalla significa
   "hecho", y aquí lo que se dice es justo lo contrario, que queda algo
   pendiente. Va debajo de la próxima toma y encima de los dos botones, que es
   por donde pasa la mirada antes de decidir qué pulsar. */
.hecho-avisos-caja{background:var(--morning-bg);border:2px solid var(--ambar-linea);
  border-radius:14px;padding:15px 16px;margin:0 0 14px;}
.hecho-avisos-titulo{font-size:16px;font-weight:800;color:var(--morning-ink);margin-bottom:6px;}
.hecho-avisos-texto{font-size:14px;line-height:1.5;color:var(--morning-ink);margin:0 0 12px;}
.hecho-avisos-caja .btn{margin:0;}
.hecho-avisos-pie{font-size:14px;color:var(--morning-ink);margin:8px 0 0;text-align:center;}
/* Ya enviado: el ámbar se retira y vuelve el verde de "esto está resuelto". */
.hecho-avisos-caja.enviado{background:var(--teal-soft);border-color:var(--teal);}
.hecho-avisos-caja.enviado .hecho-avisos-titulo,
.hecho-avisos-caja.enviado .hecho-avisos-texto{color:var(--teal-dark);}
.hecho-avisos-caja.enviado .hecho-avisos-texto{margin-bottom:0;}

/* Tamaño táctil mínimo dentro del asistente.
   Todo lo que se pulsa con el pulgar llega a 44 px de alto, que es el mínimo
   recomendado. Sin esto había botones de 25 y 27 px: se fallan constantemente,
   y aquí un fallo puede ser tocar "Editar" cuando querías otra cosa. */
.ohead button{min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;}
.paso-pie .btn{min-height:48px;}
#wizard .btn-text,
#wizard .rev-editar,
#wizard .etapa-quitar{min-height:44px;display:inline-flex;align-items:center;}
.rev-cab .rev-editar,
.rev-cabecera .rev-editar{padding:0 4px;}
.cima-search-row button{min-height:44px;}
#tomaEditor .btn{min-height:48px;}

/* Cambio de pauta */
.cambio-cab{background:var(--barra);color:#fff;border-radius:12px;padding:12px 14px;margin-bottom:14px;}
.cambio-cab strong{display:block;font-size:16px;}
.cambio-cab span{font-size:14px;opacity:.9;}
#cambioPauta .btn{min-height:48px;}

/* Cumplimiento */
.cumpl-cifra{background:var(--teal-soft);border-radius:12px;padding:16px;text-align:center;margin-bottom:10px;}
.cumpl-cifra strong{display:block;font-size:38px;font-weight:800;color:var(--teal-dark);line-height:1.1;}
.cumpl-cifra span{font-size:14px;color:var(--teal-dark);font-weight:700;}
.cumpl-lista{margin:10px 0 4px;}
.cumpl-fila{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--linea);font-size:14px;}
.cumpl-fila:last-child{border-bottom:none;}
.cumpl-nombre{font-weight:700;color:var(--ink);}
.cumpl-dato{color:var(--ink-soft);font-weight:700;white-space:nowrap;}

/* ═══════════════════════════════════════════════════════════════════════════
   MODO OSCURO · piezas con color propio
   ═══════════════════════════════════════════════════════════════════════════
   Los avisos y paneles llevan colores fijos porque su color ES el mensaje: el
   ámbar avisa, el azul informa, el rojo alerta. Aquí se rehacen en versión
   oscura conservando el mismo código de color, en vez de convertirlos en grises
   y perder la señal.

   El cronograma (.schedule-*) NO se toca a propósito: se imprime en papel, y en
   papel el fondo es blanco pase lo que pase en la pantalla. */

:root[data-tema="oscuro"] .slot.hora-exacta{background:#22262B;color:#C9C6BF;border-color:#343A41;}

:root[data-tema="oscuro"] .banner,
:root[data-tema="oscuro"] .phrase-warning{background:#3A1D19;border-color:#C25A45;color:#F3B4A8;}
:root[data-tema="oscuro"] .subsbar{background:#3A1D19;color:#F3B4A8;}
/* El terracota se aclara un punto: con #C25A45 el texto oscuro encima daba 4,26
   y hace falta 4,5. Con #D2745F sube a 5,63 y sigue siendo el mismo rojo de
   aviso. Es el botón de «Suscribirme» de la barra: si hay un botón que tiene
   que leerse, es el que cobra. */
:root[data-tema="oscuro"] .subsbar button,
:root[data-tema="oscuro"] .banner button{background:#D2745F;color:#1A1210;}

:root[data-tema="oscuro"] .instalarbar,
:root[data-tema="oscuro"] .instalar-motivo,
:root[data-tema="oscuro"] .settings-section.destacada,
:root[data-tema="oscuro"] .welcome-aviso,
:root[data-tema="oscuro"] #aceptoCondicionesLabel.destacado{
  background:#332B14;border-color:#8A6E22;color:#F0CE72;
}
:root[data-tema="oscuro"] .instalarbar button{background:#F0CE72;color:#332B14;}
:root[data-tema="oscuro"] .settings-section.destacada h3,
:root[data-tema="oscuro"] .welcome-aviso strong,
:root[data-tema="oscuro"] .welcome-aviso p,
:root[data-tema="oscuro"] .welcome-check,
:root[data-tema="oscuro"] .welcome-aviso a{color:#F0CE72;}

:root[data-tema="oscuro"] .privacidadbar button{background:var(--teal);color:#0E2A28;}
:root[data-tema="oscuro"] .privacidadbar button.mas-tarde{background:none;color:var(--teal-dark);}
:root[data-tema="oscuro"] .cuidadobar{background:#1B2740;color:#9FBEF2;}
:root[data-tema="oscuro"] .cuidadobar button{background:#9FBEF2;color:#1B2740;}
:root[data-tema="oscuro"] .cuidadobar button.mas-tarde{background:none;color:#9FBEF2;}

:root[data-tema="oscuro"] .settings-status.off,
:root[data-tema="oscuro"] .ajuste[open] summary{background:#22262B;border-color:#333940;}
:root[data-tema="oscuro"] .ajuste[open] summary{background:none;border-bottom-color:#333940;}

:root[data-tema="oscuro"] .btn-peligro{border-color:#F0938A;color:#F0938A;}
:root[data-tema="oscuro"] .checkbox{border-color:#6E747B;}

/* Los campos de formulario en oscuro: si se dejan en blanco, escribir en ellos
   deslumbra, que es justo lo que el modo oscuro viene a evitar. */
:root[data-tema="oscuro"] .field input[type=text],
:root[data-tema="oscuro"] .field input[type=number],
:root[data-tema="oscuro"] .field input[type=date],
:root[data-tema="oscuro"] .field select,
:root[data-tema="oscuro"] .field textarea,
:root[data-tema="oscuro"] .cima-search-row input{
  background:#22262B;color:var(--ink);border-color:#3A4048;
}
/* El selector de fecha nativo dibuja su icono en negro y desaparece. */
:root[data-tema="oscuro"] input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.7);}
:root[data-tema="oscuro"] .chip{background:#22262B;border-color:#3A4048;color:var(--ink-soft);}
:root[data-tema="oscuro"] .chip.on{background:var(--teal);border-color:var(--teal);color:#0E2A28;}

/* Los botones verdes: en oscuro --teal es claro, así que el texto encima tiene
   que ser oscuro para que se lea. Es la única regla donde color:#fff no vale. */
:root[data-tema="oscuro"] .btn-primary{background:var(--teal);color:#0E2A28;}
:root[data-tema="oscuro"] .fab{background:var(--teal);color:#0E2A28;}
:root[data-tema="oscuro"] .ask-yes{background:var(--teal);color:#0E2A28;}
:root[data-tema="oscuro"] .ask-no{background:var(--red);color:#3A1D19;}
:root[data-tema="oscuro"] .checkbox.taken{background:var(--teal);border-color:var(--teal);color:#0E2A28;}
:root[data-tema="oscuro"] .checkbox.forgotten{background:var(--red);border-color:var(--red);color:#3A1D19;}
:root[data-tema="oscuro"] .cima-search-row button{background:var(--teal);color:#0E2A28;}
:root[data-tema="oscuro"] .plan a{background:var(--teal);color:#0E2A28;}
:root[data-tema="oscuro"] .plan a[aria-disabled="true"]{background:#333940;color:#8A8F96;}
:root[data-tema="oscuro"] #susPagar[aria-disabled="true"]{background:#333940;color:#8A8F96;}

/* El cronograma se imprime en papel: ahí el fondo es blanco pase lo que pase en
   la pantalla. Se le devuelven los valores claros dentro de su propio ámbito,
   así que sigue siendo legible impreso aunque la app esté en modo oscuro. */
:root[data-tema="oscuro"] #scheduleOverlay{
  --bg:#F6F4EE; --paper:#FFFFFF; --ink:#232323; --ink-soft:#5A5A5A;
  --linea:#E2DFD5; --teal:#0B5D53; --teal-dark:#08423B; --teal-soft:#DCEFEC;
  --morning-bg:#FFF6DA; --morning-ink:#7A5A00;
  --afternoon-bg:#FFEBDA; --afternoon-ink:#8A4413;
  --evening-bg:#E4ECFB; --evening-ink:#1F4F9E;
  --midday-bg:#EAF4E4; --midday-ink:#3D6B2A;
  --night-bg:#EBE5F7; --night-ink:#4B2E8C;
  background:var(--bg);color:var(--ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOQUES DEL FINAL DEL DÍA: "si hace falta" y lo apuntado a mano
   ═══════════════════════════════════════════════════════════════════════════
   Van sin color de franja a propósito. Los colores de la pantalla de Hoy
   significan un momento del día —mañana ámbar, noche azul— y estas dos cosas
   no son un momento del día: son "aparte de lo de siempre". Darles un color de
   franja rompería la única señal que permite ubicarse de un vistazo. */
.slot.bloque-prn,
.slot.bloque-sueltas{background:var(--paper);color:var(--ink);
  border:1.5px dashed var(--linea);}
.slot.bloque-prn .med-row,
.slot.bloque-sueltas .med-row{background:var(--bg);}

/* La hora es el dato por el que se mira esta lista, así que es lo primero y lo
   que más pesa. Ancho fijo para que todas caigan alineadas. */
.suelta-hora{flex-shrink:0;min-width:52px;font-weight:800;font-size:16px;
  font-variant-numeric:tabular-nums;color:var(--teal);}
/* min-width:0 es obligatorio: sin él, un elemento flexible no baja de su ancho
   de contenido, el texto largo desborda la columna y las líneas siguientes se
   meten debajo de la hora en vez de quedarse en su sitio. */
.suelta-row .med-text{flex:1;min-width:0;}
.suelta-editar{flex-shrink:0;background:none;border:none;color:var(--ink-soft);
  font-weight:700;font-size:14px;text-decoration:underline;
  min-height:44px;padding:0 6px;cursor:pointer;}
.btn-apuntar{margin-top:10px;}
.suelta-nota{font-size:14px;color:var(--ink-soft);line-height:1.45;
  margin:8px 0 0;text-align:center;}

/* ── Enlace al prospecto oficial ─────────────────────────────────────────
   Se marca como lo que es: una salida de la app hacia la AEMPS. */
.prospectos{display:flex;flex-direction:column;gap:2px;margin:8px 0 2px;}
.prospecto-enlace{display:inline-flex;align-items:center;min-height:44px;
  color:var(--teal);font-size:14px;font-weight:700;text-decoration:underline;}

/* ── "Lo que hay guardado" ───────────────────────────────────────────────── */
.dato-bloque{background:var(--paper);border:1.5px solid var(--linea);
  border-radius:14px;padding:14px 16px;margin-bottom:12px;}
.dato-bloque h4{margin:0 0 10px;font-size:16px;color:var(--teal-dark);}
.dato-fila{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;
  padding:7px 0;border-top:1px solid var(--linea);}
.dato-fila:first-of-type{border-top:none;}
.dato-etiqueta{flex:0 0 100%;font-size:12.5px;font-weight:700;
  color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;}
/* El valor se parte por donde sea: aquí caen identificadores largos sin
   espacios, y sin esto se salen de la pantalla en el móvil. */
.dato-valor{font-size:14px;font-weight:700;color:var(--ink);
  overflow-wrap:anywhere;word-break:break-word;}
.dato-origen{font-size:14px;color:var(--ink-soft);font-weight:600;}
.dato-lista{margin:0 0 8px;padding-left:20px;font-size:14px;line-height:1.6;}
.dato-enlace{margin:10px 0 0;}
.dato-enlace a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--teal);font-size:14px;font-weight:700;}

/* ═══════════════════════════════════════════════════════════════════════════
   TRASPASO A OTRO DISPOSITIVO
   ═══════════════════════════════════════════════════════════════════════════
   El código se lee con la cámara de otro móvil, así que manda el contraste y el
   tamaño, no la decoración. Fondo blanco SIEMPRE, también en modo oscuro: un QR
   en negativo lo rechazan bastantes lectores, y aquí el que lee es un aparato
   ajeno del que no sabemos nada. */
.traspaso-qr{background:#FFFFFF;border-radius:14px;padding:12px;margin:0 auto 8px;
  max-width:320px;width:100%;aspect-ratio:1;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--linea);}
.traspaso-qr svg{display:block;width:100%;height:100%;}
.traspaso-qr-nota{text-align:center;margin-bottom:14px;}

/* El aviso de que esto va sin cifrar. En ámbar y no en rojo: no es un error,
   es algo que hay que leer antes de mandarlo por ahí. */
.nota-aviso{background:var(--morning-bg);color:var(--morning-ink);
  border:1.5px solid var(--ambar-linea);border-radius:12px;
  padding:12px 14px;margin:14px 0;font-size:14px;line-height:1.5;}
.nota-aviso strong{font-weight:800;}

#traspasoPegar{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;
  word-break:break-all;}

/* Botones de conectar con una nube. Uno debajo de otro, con aire entre medias:
   son alternativas —Drive o OneDrive—, no un paso y su confirmación. */
.btn-nube + .btn-nube{margin-top:8px;}

/* El último fallo de la sincronización, en Ajustes. Se enseña siempre que haya
   uno guardado: sin esto, una sincronización de fondo puede llevar semanas
   fallando y lo único que se nota es que el otro dispositivo va desfasado. */
.sincro-fallo{display:block;margin:6px 0 0;}

/* ── El primer minuto ────────────────────────────────────────────────────────
   La pantalla de Hoy vacía decía «añade tu primer tratamiento» a alguien que
   todavía no sabe si esto le sirve. Ahora pregunta de quién es la medicación:
   un formulario en blanco se cierra, una pregunta se contesta. */
.empty-pregunta{font-size:16px;font-weight:700;color:var(--ink);margin:22px 0 10px;}
.empty-opciones{display:flex;flex-direction:column;gap:8px;max-width:22rem;
  margin:0 auto 6px;}
.empty-opciones .btn{margin-top:0;min-height:48px;}
.ejemplo-cuerpo{margin:14px 0 6px;}
.ejemplo-cuerpo .slot{margin-bottom:10px;}

/* ── El asistente de la suscripción ──────────────────────────────────────────
   Se escribió el último y a propósito: tenía que esperar a que alguien comprara
   los tres planes de verdad. Ver suscripcion.js. */
.sus-planes{display:flex;flex-direction:column;gap:10px;margin:0 0 16px;}
.sus-plan{position:relative;display:grid;grid-template-columns:1fr auto;
  gap:2px 12px;text-align:left;width:100%;padding:16px 16px 14px;
  border:1.5px solid var(--linea);border-radius:14px;background:var(--paper);
  color:var(--ink);font:inherit;cursor:pointer;min-height:44px;}
.sus-plan:hover{border-color:var(--teal);}
.sus-plan:focus-visible{outline:3px solid var(--teal);outline-offset:2px;}
.sus-plan-mejor{border-color:var(--teal);}
/* 14 px y no 12: es el suelo del proyecto y aquí sobra sitio. Una excepción sin
   motivo es el primer paso para que vuelvan las noventa y una. */
.sus-plan-marca{grid-column:1 / -1;justify-self:start;background:var(--teal);
  color:#fff;font-size:14px;font-weight:800;letter-spacing:.03em;
  padding:3px 11px;border-radius:999px;margin-bottom:4px;}
.sus-plan-nombre{font-size:17px;font-weight:800;}
.sus-plan-precio{font-size:20px;font-weight:800;color:var(--teal-dark);
  grid-row:2;grid-column:2;align-self:center;}
.sus-plan-detalle{grid-column:1;font-size:14px;color:var(--ink-soft);}
.sus-plan-porque{grid-column:1 / -1;font-size:14px;color:var(--ink-soft);
  line-height:1.45;margin-top:6px;}

.sus-resumen{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;padding:12px 14px;border-radius:12px;background:var(--teal-soft);
  font-size:16px;font-weight:700;margin-bottom:16px;}
.sus-resumen strong{font-size:20px;}
.sus-pasos{margin-bottom:16px;}
.sus-aviso{margin-bottom:16px;}
.sus-botones{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.sus-botones .btn{margin-top:0;}
#susTexto{width:100%;font:inherit;font-size:15px;line-height:1.4;padding:11px 12px;
  border:1.5px solid var(--linea);border-radius:12px;background:var(--paper);
  color:var(--ink);resize:vertical;word-break:break-all;}
#susTexto:focus-visible{outline:3px solid var(--teal);outline-offset:1px;}
.campo-error-suave{color:var(--red);}
.sus-problemas,.sus-sueltos{margin-top:18px;}
.sus-llevar{margin-top:16px;padding-top:14px;border-top:1px solid var(--linea);}
/* La cabecera del asistente lleva cuatro cosas: atrás, título, contador y
   cerrar. En un móvil estrecho el título se partía en dos líneas y el contador
   también. El título manda —encoge y parte si hace falta—, el contador nunca
   se parte, y los dos botones no se encogen. */
.ohead-cerrar{margin-left:0;flex:0 0 auto;}
#susTitulo{flex:1 1 auto;min-width:0;}
#susContador{flex:0 0 auto;white-space:nowrap;margin-left:auto;}

/* Con la casilla sin marcar, «Ir a pagar» no navega —no tiene href— pero seguía
   pintado de verde grande, o sea: un botón que parece pulsable y no hace nada.
   Se ve apagado hasta que se acepta, igual que los tres planes sueltos. */
#susPagar[aria-disabled="true"]{background:var(--linea);color:#6B6B6B;
  box-shadow:none;cursor:default;}