/* Pruebas de confianza (Kamila Mateus · Psicóloga) · base visual común. Tema claro de consultorio, con los colores del logo.
   Las clases salen de las 14 pantallas elegidas (work/galerias/pruebas-confianza/pantallas.css), con los mismos nombres,
   para copiar el marcado casi tal cual. Prefijos: .b- celular y comunes, .d- computadora, .p- hoja del informe.
   Marcos (son páginas reales, no cuadros de galería):
     .b-ph   pantalla de celular: todo el ancho y alto; en computadora, columna de 430 px centrada sobre el fondo.
     .b-pc   ventana de computadora (diseño de 1280; se ve bien de 1024 a 1920).
     .b-a4   zona de la hoja; cada .b-paper es una hoja A4. Al imprimir sale solo .b-a4, en A4.
   Componentes extra (mismo lenguaje): campo con error (.b-field.error + .b-error), aviso (.b-aviso, .amb, .red),
   lista de celular (.b-card + .b-row), tabla (.d-table + .d-tr, filas tocables con <a> o <button>),
   ficha seleccionable (button.b-chip con aria-pressed="true" o .on), botón secundario (.b-ghost en celular, .d-btn.gh
   en computadora), enlace-botón (.b-link), etiqueta «Muestra» (.b-muestra).
   Campos reales: <label class="b-field"><b>CÉDULA</b><input …></label> (también textarea y select). */

/* shortcut: son las fuentes de la app (Montserrat 700, Nunito Sans 400 y 700, recortadas a Latin-1); el diseño pedía 800 y aquí se ve en 700. Cambiar por los archivos 800 de Google Fonts (OFL) si John nota la diferencia. */
/* Letras del logo (elegidas por John el 7 nov 2026, Google Fonts, licencia OFL). */
@font-face{font-family:"DM Serif Display";src:url(fuentes/DMSerifDisplay-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Allison;src:url(fuentes/Allison-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url(fuentes/Montserrat-Bold.ttf) format("truetype");font-weight:600 900;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url(fuentes/NunitoSans-Regular.ttf) format("truetype");font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url(fuentes/NunitoSans-Bold.ttf) format("truetype");font-weight:600 900;font-style:normal;font-display:swap}

/* Todos los colores del sitio. Las cifras son el contraste de la letra (AA pide 4,5:1 o más).
   Los .js no repiten colores: los leen de aquí con tono('nombre') (movimiento.js). */
:root{color-scheme:only light;
  --fondo:#FFFFFF;          /* blanco: John pidió el sitio siempre blanco (7 nov 2026) */
  --tarjeta:#FFFFFF;        /* tarjetas, campos, botones con borde y hojas */
  --linea:#E4E2EC;          /* bordes suaves y separadores */
  --linea-campo:#CFCBDD;    /* borde de campos, fichas y botones con borde: se distingue sobre blanco */
  --tinta:#23407A;          /* texto principal, azul marino del logo: 9,3:1 sobre el fondo */
  --marino:#23407A;         /* botón principal, respuesta elegida, barras y anillo */
  --marino-hondo:#1A3263;   /* botón principal bajo el puntero */
  --sobre-marino:#FFFFFF;   /* letra sobre el azul marino: 10:1 */
  --suave:#5B6478;          /* texto secundario: 5,5:1 sobre el fondo y 5:1 sobre el lila */
  --apagado:#7A7D94;        /* solo el texto de ejemplo de los campos */
  --acento:#6E6F9A;         /* gris lila del logo: trazos, dibujos, puntos, bordes elegidos y foco */
  --acento-texto:#5F6090;   /* gris lila para letra (etiquetas): 5,4:1 sobre el fondo */
  --lila:#ECEAF4;           /* fondo de lo elegido y de los avisos */
  --lila-tenue:#F3F2F8;     /* cabecera de tablas y fila bajo el puntero */
  /* Estados, un poco más oscuros que los del pedido para pasar 4,5:1 también sobre el fondo cálido y sobre su tinte. */
  --verde:#2B7354;--ambar:#8A5E0F;--rojo:#A63E37;
  --verde-tinte:rgba(46,125,91,.1);--ambar-tinte:rgba(154,106,18,.1);--rojo-tinte:rgba(180,68,60,.1);
  --verde-borde:rgba(46,125,91,.4);--ambar-borde:rgba(154,106,18,.4);--rojo-borde:rgba(180,68,60,.45);
  --brillo-lila:#ECEAF4;               /* luz lila quieta, arriba a la derecha de cada pantalla */
  --sombra:rgba(35,64,122,.07);        /* sombra de la columna de celular en computadora y de las hojas */
  --levanta:rgba(35,64,122,.16);       /* sombra de la tarjeta de e2 que se eleva al tocarla */
  --hundido:rgba(35,64,122,.14);       /* el botón tocado se oscurece apenas */
  --hoja-tinta:#172536;--hoja-suave:#5B6478; /* letra de la hoja del informe */
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Fondo claro y cálido, como un consultorio. */
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--fondo);color:var(--tinta);font:16px/1.45 "Nunito Sans",system-ui,sans-serif}
[hidden]{display:none!important}

/* ── Marco de celular ─────────────────────────────────────────────── */
.b-ph{position:relative;width:100%;min-height:100vh;min-height:100dvh;overflow:hidden;background:radial-gradient(273px 380px at 100% 0%,var(--brillo-lila),transparent 62%) no-repeat,var(--fondo);display:flex;flex-direction:column;padding:calc(26px + env(safe-area-inset-top,0px)) calc(22px + env(safe-area-inset-right,0px)) calc(22px + env(safe-area-inset-bottom,0px)) calc(22px + env(safe-area-inset-left,0px));box-sizing:border-box;color:var(--tinta);font:15px/1.45 "Nunito Sans",system-ui,sans-serif}
@media (min-width:600px){.b-ph{width:430px;min-height:min(860px,calc(100dvh - 48px));margin:24px auto;border-radius:28px;border:1px solid var(--linea);background:var(--tarjeta);box-shadow:0 24px 70px var(--sombra)}}
.b-ph *{box-sizing:border-box}
.b-top{display:flex;justify-content:space-between;align-items:center}
.b-back{width:44px;height:44px;border-radius:50%;background:var(--tarjeta);border:1px solid var(--linea-campo);display:grid;place-items:center;color:var(--tinta);font-size:20px}
.b-tag{font:700 15px/1 "Nunito Sans";padding:7px 10px;border-radius:999px;background:var(--lila);border:1px solid var(--linea-campo);color:var(--acento-texto)}
.b-eyebrow{margin:22px 0 4px;font:800 15px/1 "Nunito Sans";letter-spacing:.08em;color:var(--acento-texto)}
.b-h1{margin:0;font:800 32px/1.1 Montserrat,sans-serif;letter-spacing:-.02em}
.b-ph .b-h1.c{margin-top:18px}
.b-sub{margin:8px 0 0;color:var(--suave);font-size:16px}
.b-ph .c{text-align:center}
/* Logo de Kamila Mateus, horizontal (2,2 : 1). El archivo actual es PROVISIONAL: se reemplaza por el logo real con el mismo nombre. */
.b-logo,.b-lg{display:block;flex:none;background:url(logo-psicologa.png) center/contain no-repeat}
.b-logo{margin:28px auto 0}
.b-cta{margin-top:auto;height:56px;border-radius:28px;background:var(--marino);display:grid;place-items:center;font:700 17px/1 "Nunito Sans";color:var(--sobre-marino)}
.b-ghost{height:52px;border-radius:26px;border:1px solid var(--linea-campo);background:var(--tarjeta);display:grid;place-items:center;font:700 16px/1 "Nunito Sans";margin-top:12px}
.b-ph .b-ghost.big{height:62px;font-size:18px}
.b-ph .b-ghost.on{background:var(--marino);border-color:var(--marino);color:var(--sobre-marino)}
.b-big{margin-top:14px;font:800 56px/1 Montserrat,sans-serif;letter-spacing:-.03em}
.b-big small{display:block;font:600 16px/1.3 "Nunito Sans";color:var(--suave);letter-spacing:0;margin-top:6px}
.b-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.b-chip{padding:12px 16px;border-radius:999px;border:1px solid var(--linea-campo);background:var(--tarjeta);font-size:16px}
/* Ficha elegida: fondo lila suave y borde gris lila de 2 px (el segundo píxel es una sombra, para no mover el texto). */
.b-chip.on,.b-chip[aria-pressed="true"]{background:var(--lila);border-color:var(--acento);box-shadow:inset 0 0 0 1px var(--acento)}
.b-field{display:block;margin-top:12px;border:1px solid var(--linea-campo);border-radius:14px;background:var(--tarjeta);padding:12px 14px;font-size:16px;color:var(--tinta)}
.b-field b{display:block;font:700 15px/1 "Nunito Sans";letter-spacing:.06em;color:var(--acento-texto);margin-bottom:6px}
.b-ring{width:96px;height:96px;border-radius:50%;background:conic-gradient(var(--marino) var(--p,80%),var(--linea) 0);display:grid;place-items:center}
.b-ring i{width:72px;height:72px;border-radius:50%;background:var(--tarjeta);display:grid;place-items:center;font:800 22px/1 Montserrat,sans-serif;font-style:normal}
.b-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.b-chipst{margin-left:auto;padding:6px 10px;border-radius:999px;font:700 15px/1 "Nunito Sans";background:var(--lila);color:var(--acento-texto)}
.b-chipst.amb{background:var(--ambar-tinte);color:var(--ambar)}
.b-chipst.red{background:var(--rojo-tinte);color:var(--rojo)}
.b-chipst.grn{background:var(--verde-tinte);color:var(--verde)}
.b-link{margin:16px 0 0;text-align:center;color:var(--marino);font-weight:700;font-size:16px}
.b-dots{display:flex;gap:8px;margin-top:auto}
.b-dots i{width:10px;height:10px;border-radius:50%;background:var(--linea-campo)}
.b-dots i.on{background:var(--marino);width:26px;border-radius:5px}
.b-prog{display:grid;gap:8px;font:700 15px/1 "Nunito Sans";color:var(--suave)}
.b-prog i{height:6px;border-radius:3px;background:var(--linea);display:block;overflow:hidden}
.b-prog b{display:block;height:100%;background:var(--marino);border-radius:3px}
.b-q{margin:22px 0 14px;font:700 22px/1.3 Montserrat,sans-serif}
.b-q.big{font-size:30px}
.b-done{margin:auto 0;display:grid;justify-items:center;gap:6px}
.b-barrow{display:grid;grid-template-columns:1fr auto;gap:6px;margin-top:18px;font-size:16px}
.b-barrow b{font:800 18px/1 Montserrat,sans-serif}
.b-barrow i{grid-column:1/-1;height:8px;border-radius:4px;background:var(--linea);overflow:hidden}
.b-barrow u{display:block;height:100%;background:var(--marino)}
.b-barrow.d{font-size:20px;margin-top:26px}
.b-barrow.d b{font-size:26px}
.b-barrow.d i{height:12px;border-radius:6px}
.b-cam{margin:22px auto auto;width:240px;height:300px;border-radius:120px;border:2px dashed var(--acento);display:grid;place-items:center;color:var(--suave);font-size:16px}

/* ── Marco de computadora ─────────────────────────────────────────── */
.b-pc{position:relative;width:100%;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:radial-gradient(768px 440px at 100% 0%,var(--brillo-lila),transparent 62%) no-repeat,var(--fondo);color:var(--tinta);font:16px/1.45 "Nunito Sans",system-ui,sans-serif}
.b-pc *{box-sizing:border-box}
/* El contenido mide como mucho 1192 px (el diseño de 1280) y la cabecera se alinea con él. */
.d-head{display:flex;align-items:center;gap:18px;height:84px;padding:0 max(44px,calc((100% - 1192px) / 2));border-bottom:1px solid var(--linea);flex:none}
.d-title{font:800 19px/1 Montserrat,sans-serif}
.d-user{margin-left:auto;color:var(--suave);font-size:16px}
.d-main{flex:1;min-height:0;width:100%;max-width:1280px;margin:0 auto;padding:40px 44px;display:flex;flex-direction:column;gap:22px}
.d-main.ctr{align-items:center;justify-content:center}
.d-h1{margin:0;font:800 38px/1.1 Montserrat,sans-serif;letter-spacing:-.01em}
.d-h2{margin:0 0 12px;font:800 26px/1.15 Montserrat,sans-serif}
.d-sub{margin:0;color:var(--suave);font-size:17px}
.d-lab{margin:18px 0 8px;font:800 15px/1 "Nunito Sans";letter-spacing:.08em;color:var(--acento-texto)}
.d-big{font:800 132px/1 Montserrat,sans-serif;letter-spacing:-.03em}
.d-cols{display:grid;grid-template-columns:var(--c,1fr 1fr);gap:32px;align-items:start}
.d-cols>*{min-width:0}
.d-tres{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:12px}
.d-card{max-width:100%;border:1px solid var(--linea);border-radius:22px;background:var(--tarjeta);padding:28px}
.d-card.big{min-height:260px;display:flex;flex-direction:column;justify-content:flex-end}
.d-card.on{border-color:var(--acento);background:var(--lila)}
.d-bar{display:flex;align-items:center;gap:16px;margin-top:auto}
.d-btn{display:inline-grid;place-items:center;height:54px;padding:0 30px;border-radius:27px;background:var(--marino);font:700 17px/1 "Nunito Sans";color:var(--sobre-marino);white-space:nowrap}
.d-btn.gh{background:var(--tarjeta);border:1px solid var(--linea-campo)}
.d-btn.full{display:grid;width:100%;margin-top:16px}
.d-table{border:1px solid var(--linea);border-radius:18px;overflow:hidden;background:var(--tarjeta)}
.d-tr{display:grid;grid-template-columns:var(--t);gap:16px;align-items:center;min-height:62px;padding:0 24px;border-top:1px solid var(--linea);font-size:17px}
.d-tr:first-child{border-top:0}
.d-tr>span{min-width:0}
.d-tr .b-chipst{justify-self:start}
.d-tr.th{min-height:48px;background:var(--lila-tenue);font:800 15px/1 "Nunito Sans";letter-spacing:.06em;color:var(--acento-texto)}
.d-line{width:100%;height:auto}
.d-line text{fill:var(--suave);font:600 18px "Nunito Sans"}
.d-line line{stroke:var(--linea)}
.d-line polyline{stroke:var(--marino)}
.d-line circle{fill:var(--marino)}
/* La línea se escala con el ancho: sus letras se agrandan para no bajar de 15 px, y en pantallas angostas las fechas quedan solo en la tabla. */
@media (min-width:1024px) and (max-width:1279.98px){.d-line text{font-size:20px}}
@media (max-width:1023.98px){.d-line text{display:none}}

/* ── Hoja del informe ─────────────────────────────────────────────── */
.b-a4{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:28px;padding:32px 16px}
.b-a4 *{box-sizing:border-box}
.b-paper{--hx:36px;--hy:34px;width:min(580px,100%);aspect-ratio:210/297;background:var(--tarjeta);color:var(--hoja-tinta);border:1px solid var(--linea);border-radius:6px;padding:var(--hy) var(--hx);display:flex;flex-direction:column;gap:6px;font:16px/1.45 "Nunito Sans",system-ui,sans-serif;box-shadow:0 24px 70px var(--sombra)}
.p-band{margin:calc(-1 * var(--hy)) calc(-1 * var(--hx)) 12px;padding:18px var(--hx);background:var(--marino);border-radius:6px 6px 0 0;display:flex;align-items:center}
/* El logo es azul marino: en la banda va sobre una placa blanca, para que se vea (sirve igual si el logo real trae fondo blanco). */
.p-band .b-lg{background-color:var(--tarjeta);background-origin:content-box;padding:4px 8px;border-radius:8px}
.p-h{margin:12px 0 0;font:800 24px/1.2 Montserrat,sans-serif;color:var(--marino)}
.p-s{margin:0;color:var(--hoja-suave)}
.p-t{margin-top:16px;border-top:1px solid var(--linea)}
.p-t p{display:flex;justify-content:space-between;gap:12px;margin:0;padding:11px 0;border-bottom:1px solid var(--linea)}
.p-big{margin:16px 0 0;font:800 56px/1 Montserrat,sans-serif;color:var(--marino)}
.p-big small{font:600 17px "Nunito Sans";color:var(--hoja-suave)}
.p-sig{margin-top:auto;border-top:1px solid var(--hoja-tinta);padding-top:6px;width:60%;color:var(--hoja-suave)}
.p-f{margin:8px 0 0;color:var(--hoja-suave)}

@page{size:A4;margin:0}
@media print{
  html,body{background:#fff!important;min-height:0!important}
  body :not(:has(.b-a4)):not(.b-a4,.b-a4 *){display:none!important}
  body :has(.b-a4){display:block!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;min-height:0!important;width:auto!important;max-width:none!important;transform:none!important;filter:none!important}
  .b-a4{display:block;padding:0}
  .b-paper{--hx:16mm;--hy:14mm;width:210mm;height:297mm;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;overflow:hidden;break-after:page;filter:none!important;transform:none!important;opacity:1!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .b-paper:last-child{break-after:auto}
  .p-band{border-radius:0}
}

/* ── Controles reales (botones, enlaces, campos) ──────────────────── */
:where(.b-ph,.b-pc,.b-a4) :where(button){margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
:where(.b-ph,.b-pc) :where(a){color:var(--marino);-webkit-tap-highlight-color:transparent}
:where(.b-ph,.b-pc) :where(a.b-cta,a.b-ghost,a.d-btn,a.d-card,a.d-tr,a.b-row,a.b-chip){color:inherit;text-decoration:none}
a.d-btn,button.d-btn{color:var(--sobre-marino)}
:is(a,button).d-btn.gh{color:var(--tinta)}
:is(button,a).b-cta,:is(button,a).b-ghost{width:100%}
:is(button,a):is(.d-card,.d-tr,.b-row){width:100%;text-align:left}
button.b-link{display:block;width:100%;min-height:44px}
.d-user :is(a,button){display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 6px;color:var(--marino);font-weight:700;text-decoration:none}
:where(.b-ph,.b-pc) :focus-visible{outline:3px solid var(--acento);outline-offset:2px}
:where(.b-ph,.b-pc) :disabled{opacity:.5;cursor:not-allowed}
:is(.b-cta,.b-ghost,.d-btn,.b-chip,.d-card){transition:transform .12s ease-out,border-color .15s,background-color .15s,color .15s}
:is(button,a):is(.b-cta,.b-ghost,.d-btn,.b-chip,.d-card):active:not(:disabled){transform:scale(.97)}
@media (hover:hover){
  :is(button,a):is(.b-ghost,.b-chip,.d-card,.d-btn.gh):hover:not(:disabled){border-color:var(--acento)}
  :is(button,a):is(.b-cta,.d-btn:not(.gh)):hover:not(:disabled){background-color:var(--marino-hondo)}
  :is(button,a):is(.d-tr,.b-row):hover{background:var(--lila-tenue)}
}
.b-field :is(input,textarea,select){display:block;width:100%;margin:0;padding:0;border:0;background:none;color:var(--tinta);font:inherit;font-size:17px;line-height:1.4;outline:none;min-height:24px}
.b-field textarea{min-height:96px;resize:vertical}
.b-field select{appearance:none;-webkit-appearance:none;cursor:pointer}
.b-field option{background:var(--tarjeta);color:var(--tinta)}
.b-field ::placeholder{color:var(--apagado)}
.b-field:focus-within{border-color:var(--acento);outline:3px solid var(--lila);outline-offset:0}

/* ── Componentes extra ────────────────────────────────────────────── */
.b-field.error{border-color:var(--rojo)}
.b-field.error b{color:var(--rojo)}
.b-error{margin:6px 2px 0;color:var(--rojo);font-weight:700;font-size:15px}
.b-aviso{margin-top:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--linea-campo);background:var(--lila);color:var(--tinta);font-size:16px;line-height:1.4}
.b-aviso b{color:var(--tinta)}
.b-aviso.amb{border-color:var(--ambar-borde);background:var(--ambar-tinte)}
.b-aviso.amb b{color:var(--ambar)}
.b-aviso.red{border-color:var(--rojo-borde);background:var(--rojo-tinte)}
.b-aviso.red b{color:var(--rojo)}
.b-card{margin-top:10px;background:var(--tarjeta);border:1px solid var(--linea);border-radius:18px;overflow:hidden}
.b-row{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 16px;border-top:1px solid var(--linea);font-size:16px}
.b-row:first-child{border-top:0}
.b-row>div{min-width:0}
.b-row .b-t{font-weight:700;font-size:17px}
.b-row .b-s{display:block;color:var(--suave);font-size:15px}
.b-muestra{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;border:1px solid var(--linea-campo);background:var(--lila-tenue);color:var(--acento-texto);font:700 15px/1 "Nunito Sans";letter-spacing:.02em}

/* ── Pantallas angostas: la vista de computadora se apila en una columna ── */
@media (max-width:759.98px){
  .d-head{height:auto;min-height:68px;flex-wrap:wrap;gap:8px 14px;padding:10px 16px}
  .d-main{padding:24px 16px}
  .d-cols,.d-tres{grid-template-columns:minmax(0,1fr)}
  .d-card{padding:20px}
  .d-card.big{min-height:0}
  .d-big{font-size:clamp(44px,15vw,132px)!important;letter-spacing:0!important}
  .d-bar{flex-wrap:wrap}
  /* En celular cada botón ocupa todo el ancho, uno debajo de otro. */
  .d-btn{width:100%;height:auto;min-height:54px;padding:12px 24px;white-space:normal;text-align:center}
  /* Cada fila de tabla: el primer dato en su línea y lo demás (cifras y etiquetas) seguido debajo. */
  .d-tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px 16px}
  .d-tr>:first-child{flex-basis:100%}
  /* Con solo dos datos (texto y etiqueta) caben en la misma línea: el texto a la izquierda, la etiqueta a la derecha. */
  .d-tr:has(>:last-child:nth-child(2))>:first-child{flex:1 1 0}
  .d-tr.th{display:none}
  /* La hoja del informe usa el ancho de la pantalla; al imprimir sigue siendo A4 (@media print). */
  .b-a4{padding:20px 0}
  .b-paper{--hx:20px;--hy:22px}
  .p-band{flex-wrap:wrap;gap:8px 12px}
  .p-t b{white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}