/* ==========================================================================
   Silva Medicina Estética — estilo del panel de la doctora y de la
   revocación (_consent-lib/ui.php).

   POR QUÉ ES UN ARCHIVO Y NO UN <style> EN LÍNEA
   La CSP de producción lleva `style-src 'self'` SIN 'unsafe-inline': un
   bloque <style> impreso por PHP no llega a aplicarse y el panel sale sin
   estilo ninguno. Servido desde 'self' la CSP lo admite tal cual, sin
   tocar el .htaccess.

   Estas páginas NO cargan assets/css/site.css ni assets/js/site.js: son
   rutas con datos de salud y no debe haber en ellas píxel de Meta ni
   analítica de ningún tipo. De ahí que el estilo esté aquí completo, con
   la misma paleta del sitio (crema #fbf9f5, texto #1b1c1a, bronce
   #745a27) y las mismas tipografías autoalojadas.
   ========================================================================== */

@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-latin.woff2") format("woff2");font-display:swap;font-weight:300 700}
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");font-display:swap;font-weight:300 700}
*{box-sizing:border-box}
body{margin:0;background:#fbf9f5;color:#1b1c1a;font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;font-weight:300;line-height:1.7;font-size:15px}
.barra{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e7e5e4;padding:.8rem 1.1rem}
.barra .marca{display:inline-flex;align-items:center;gap:.5rem;font-family:"Cormorant Garamond",Georgia,serif;font-size:1.15rem;color:#1b1c1a;text-decoration:none}
.barra .marca img{height:1.9rem;width:auto;display:block}
.barra .marca:hover span{color:#745a27}
.barra .marca:focus-visible{outline:2px solid #745a27;outline-offset:.3rem;border-radius:.2rem}
.envoltorio{max-width:46rem;margin:1.5rem auto 4rem;padding:0 1rem}
.tarjeta{background:#fff;border:1px solid #e7e5e4;border-radius:.5rem;padding:1.5rem 1.25rem;margin-bottom:1.25rem}
h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:1.6rem;line-height:1.25;margin:0 0 .8rem}
h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:1.25rem;margin:0 0 .7rem}
h3{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#745a27;margin:1.4rem 0 .5rem}
p{margin:0 0 .7rem}
a{color:#745a27}
label.campo{display:block;margin-bottom:1rem}
label.campo>span{display:block;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#57534e;margin-bottom:.35rem}
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=date],select,textarea{width:100%;border:1px solid #d6d3d1;border-radius:.375rem;background:#fff;padding:.7rem .9rem;font-size:1rem;font-family:inherit;font-weight:300;color:#1b1c1a}
input:focus,select:focus,textarea:focus{outline:2px solid #745a27;outline-offset:1px;border-color:#745a27}
.casilla{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:1rem;font-size:.88rem;line-height:1.6}
.casilla input{margin-top:.3rem;width:1.15rem;height:1.15rem;flex:none;accent-color:#745a27}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:2.9rem;border:1px solid #1b1c1a;background:#1b1c1a;color:#fff;border-radius:.25rem;padding:.6rem 1.2rem;font:inherit;font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;text-decoration:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-sec{background:transparent;color:#57534e;border-color:#d6d3d1}
.btn-peligro{background:#991b1b;border-color:#991b1b;color:#fff}
.btn-ancho{width:100%}
.acciones{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.firma-canvas{width:100%;height:11rem;border:1px dashed #a8a29e;border-radius:.5rem;background:#fff;touch-action:none;display:block}
.nota{background:#fbf9f5;border:1px solid rgba(116,90,39,.25);border-left:3px solid #745a27;border-radius:.5rem;padding:1rem 1.15rem;font-size:.875rem;margin-bottom:1.1rem}
.error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:.5rem;padding:.9rem 1.1rem;font-size:.9rem;margin-bottom:1.1rem}
.ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;border-radius:.5rem;padding:.9rem 1.1rem;font-size:.9rem;margin-bottom:1.1rem}
.aviso{background:#fef3c7;border:1px solid #fde68a;color:#92400e;border-radius:.5rem;padding:.9rem 1.1rem;font-size:.9rem;margin-bottom:1.1rem}
/* Las tablas del panel se leen en el movil de la doctora. Cuando no caben
   —y la de «correos que no salieron» lleva boton dentro— deslizan dentro
   de su propia caja en vez de empujar la pagina entera de lado. */
.tabla-ancha{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -.25rem}
table.lista{width:100%;min-width:19rem;border-collapse:collapse;font-size:.85rem;background:#fff}
table.lista th,table.lista td{border-bottom:1px solid #eeece8;padding:.6rem .5rem;text-align:left;vertical-align:top}
table.lista th{font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:#57534e;font-weight:700}
.etq{display:inline-block;font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;border-radius:9999px;padding:.15rem .6rem;white-space:nowrap}
.etq-pend{background:#fef3c7;color:#92400e;border:1px solid #fde68a}
.etq-pac{background:#e0f2fe;color:#075985;border:1px solid #bae6fd}
.etq-ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.etq-rev{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.enlace-copia{word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;background:#f6f5f1;border:1px solid #e7e5e4;border-radius:.35rem;padding:.6rem .7rem;display:block;margin:.4rem 0 .8rem}
.doc-texto{max-height:22rem;overflow-y:auto;border:1px solid #e7e5e4;border-radius:.4rem;padding:1rem;background:#fdfcfa;font-size:.85rem}
.doc-texto h4{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:1.05rem;margin:1rem 0 .35rem}
.doc-texto h4:first-child{margin-top:0}

/* ── Clases que sustituyen a atributos style= ──────────────────────────────
   `style="…"` en el HTML también lo bloquea `style-src 'self'`: lo que
   antes eran estilos sueltos en los echo de PHP vive ahora aquí. */
.item-doc{margin:.5rem 0}
.apagado{color:#78716c}
.en-linea{display:inline}
.btn-mini{min-height:2rem;padding:.2rem .6rem;font-size:.62rem}
.firma-mini{max-width:100%;max-height:6rem;border-bottom:1px solid #1b1c1a}
.separado{margin-top:1rem}

/* ── PIN de 4 cifras ───────────────────────────────────────────────────────
   Se marca de pie, con el paciente delante y devolviendo el dispositivo: el
   campo va grande, centrado y con las cifras separadas, para acertar a la
   primera sin gafas. Los campos son type="text" —iOS ignora inputmode en los
   de contraseña y sacaria el teclado completo—, asi que las cifras se ocultan
   aqui con -webkit-text-security, que respetan Safari y Chrome; en Firefox de
   escritorio se verian, y es un dispositivo propio, no compartido.
   `input.pin-campo` y no `.pin-campo` a secas porque
   `input[type=password]` de arriba tiene la misma especificidad: con la
   clase sola no ganaría el tamaño de letra. */
.campo-pin{max-width:13rem;margin-left:auto;margin-right:auto;text-align:center}
.campo-pin>span{text-align:center}
input.pin-campo{-webkit-text-security:disc;text-align:center;font-size:1.7rem;font-weight:400;letter-spacing:.45em;text-indent:.45em;padding:.6rem .4rem}
/* «Usar la contraseña»: existe siempre, pero no compite con el PIN. */
.acciones-centro{justify-content:center}
.enlace-discreto{font-size:.8rem;color:#78716c}

/* ── Paso al móvil por código QR ───────────────────────────────────────────
   La doctora prepara el documento en el ordenador y pasa a su móvil
   escaneando el código, o se lo enseña al paciente para que lo escanee él.
   El QR lo dibuja assets/js/qr-svg.js como <svg> en línea: sin CDNs, sin
   servicios externos, sin data: URI y sin <img>, que es lo único que
   permite la CSP. Debajo queda el enlace en texto, seleccionable. */
/* De partida oculto: en el móvil el enlace se toca, no se escanea, y un QR
   ahí solo estorba. Solo aparece donde aporta — puntero fino (ratón o
   trackpad) y pantalla ancha—, que es justo donde firmar con el dedo es
   incómodo. Es el mismo criterio que aplica consentimiento-firma.js. */
.qr-paso{display:none;flex-wrap:wrap;gap:1.5rem;align-items:flex-start;margin:1.2rem 0}
@media (pointer:fine) and (min-width:768px){.qr-paso{display:flex}}
.qr-texto{flex:1 1 16rem;min-width:0}
.qr-figura{flex:0 0 auto;margin:0;text-align:center;max-width:100%}
.qr-lienzo{width:13.5rem;max-width:100%;aspect-ratio:1/1;margin:0 auto;background:#fff;border:1px solid #e7e5e4;border-radius:.5rem;padding:.35rem}
.qr-lienzo svg{display:block;width:100%;height:100%}
.qr-figura figcaption{margin-top:.55rem;font-size:.72rem;font-weight:600;letter-spacing:.05em;color:#57534e;max-width:13.5rem;line-height:1.5}

@media print{
  .barra,.acciones,.qr-paso,form,.nota{display:none !important}
}

/* ── Galería de casos (antes y después) ────────────────────────────────────
   Se usa con el iPad de la consulta y con el móvil, así que las fichas ocupan
   la fila entera en pantalla estrecha y pasan a dos por fila a partir de
   34rem. Los botones de subir, bajar y borrar son los `.btn-mini` de siempre:
   no se inventa un tamaño nuevo para esta pantalla.
   El selector de archivo no lo cubría la regla de arriba —solo alcanzaba a
   text, password, email, tel, date, select y textarea—, así que se le da aquí
   la misma caja para que no aparezca el control desnudo del navegador. */
input[type=file]{width:100%;border:1px dashed #d6d3d1;border-radius:.375rem;background:#fdfcfa;padding:.7rem .9rem;font:inherit;font-size:.9rem;font-weight:300;color:#1b1c1a}
input[type=file]:focus{outline:2px solid #745a27;outline-offset:1px;border-color:#745a27}

.gal-rejilla{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:.9rem}
@media (min-width:34rem){.gal-rejilla{grid-template-columns:1fr 1fr}}
.gal-rejilla-una{grid-template-columns:1fr}
@media (min-width:34rem){.gal-rejilla-una{grid-template-columns:1fr}}
.gal-caso{display:flex;gap:.85rem;align-items:flex-start;border:1px solid #e7e5e4;border-radius:.5rem;padding:.7rem;background:#fff}
.gal-miniatura{width:5rem;height:5rem;flex:none;object-fit:cover;border-radius:.35rem;background:#f6f5f1;border:1px solid #eeece8}
.gal-sin-foto{display:block}
.gal-datos{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.3rem;font-size:.8rem}
.gal-titulo{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.05rem;line-height:1.2}
.gal-datos .etq{align-self:flex-start;white-space:normal}
.gal-acciones{display:flex;flex-direction:column;gap:.35rem;flex:none}
.gal-acciones .btn{width:100%}

/* Un bloque de foto del formulario: es también el hueco donde el recortador
   del navegador (assets/js/galeria-recorte.js) mete su lienzo. */
.gal-bloque{border:1px solid #e7e5e4;border-radius:.5rem;padding:1rem 1rem .4rem;margin-bottom:1rem;background:#fdfcfa}
.gal-bloque h3{margin-top:0}

/* La tira de miniaturas de «ya está publicado». */
.gal-tira{list-style:none;margin:0 0 1.1rem;padding:0;display:flex;flex-wrap:wrap;gap:.9rem}
.gal-tira li{display:flex;flex-direction:column;gap:.3rem;align-items:center;font-size:.72rem;text-align:center}

/* ── Asistente de ayuda ─────────────────────────────────────────────────────
   Preguntas cortas con botones grandes, para leer de pie y con prisa. Los
   botones del asistente NO son los `.btn` del panel: aquellos son etiquetas
   diminutas en versalitas, y aquí lo que se toca es una frase entera, así que
   se deshace el tamaño, el espaciado y la caja alta.
   `.ayuda-nodos` sin `.ayuda-guiada` es el estado sin JavaScript: se ven todos
   los nodos seguidos y las separaciones los mantienen legibles como documento. */
.ayuda-intro{color:#78716c;font-size:.9rem;margin:-.35rem 0 1.1rem}
.ayuda-nodo{display:flex;flex-direction:column;gap:.75rem;outline:none}
.ayuda-nodo[hidden]{display:none}
.ayuda-nodo:focus-visible{outline:2px solid #745a27;outline-offset:.4rem;border-radius:.25rem}
.ayuda-nodos:not(.ayuda-guiada) .ayuda-nodo+.ayuda-nodo{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid #ede9e3}
.ayuda-pregunta{margin:0;font-size:1.05rem;font-weight:600;line-height:1.35}
.ayuda-resp{margin:0;line-height:1.55}
.ayuda-pasos{margin:0;padding-left:1.35rem;display:flex;flex-direction:column;gap:.5rem;line-height:1.5}
.ayuda-opciones{display:flex;flex-direction:column;gap:.55rem}
.ayuda-op{width:100%;min-height:3rem;justify-content:flex-start;text-align:left;text-transform:none;letter-spacing:normal;font-size:.95rem;font-weight:500;color:#1b1c1a;padding:.7rem 1rem;line-height:1.35}
.ayuda-op:hover{border-color:#745a27;color:#745a27}
.ayuda-pie{display:flex;gap:.5rem;margin-top:1.3rem;padding-top:1rem;border-top:1px solid #e7e5e4}
.ayuda-pie[hidden]{display:none}