/* Panel de la psicóloga (computadora, también celular): e1–e6 y extras. Usa /comun/estilos.css; aquí solo va lo propio, con prefijo .e. */

/* El anillo de e4 se llena animando --p: registrarla deja que el navegador la interpole. */
@property --p{syntax:'<percentage>';inherits:false;initial-value:0%}

#vista:focus,#vista:focus-visible{outline:none}
.e-oculto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Cabecera: logo y título llevan al inicio. */
.d-head{position:relative}
.e-marca{display:inline-flex;align-items:center;gap:18px;min-height:44px;color:inherit;text-decoration:none}
.e-hl{position:absolute;left:0;bottom:-1px;pointer-events:none}
.e-hl line{stroke:var(--acento);stroke-width:1;stroke-dasharray:1 1}

/* Piezas comunes de estas pantallas */
.e-lab0{margin-top:0}
.e-titulo{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.e-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.e-meta{margin-top:-12px}
.e-bar{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.e-form{display:block}
.e-form .d-lab{margin-top:22px}
.e-enlace{word-break:break-all;margin-top:6px}
.e-vacio{margin:0;color:var(--suave);font-size:17px}
.e-solo{white-space:pre-wrap;overflow-wrap:anywhere}
.e-sec{display:flex;flex-direction:column;gap:12px;min-width:0}
.e-sec>.d-h2{margin:0}
.e-buscar{max-width:520px;margin-top:0}
.e-chipgrande{padding:10px 16px;font-size:17px}
.e-ancho{max-width:760px}
.e-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.e-chips .b-chipst,.d-tr .b-chipst{margin-left:0}
.b-chipst .e-movil{color:inherit}
.e-creditos{margin:0;color:var(--suave);font-size:15px;line-height:1.45}
/* Fecha sin el ícono de calendario del navegador (solo e2 lleva dibujos): todo el campo abre el calendario. */
.b-field:has(input[type=date]){position:relative}
.b-field input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;margin:0;padding:0;opacity:0;cursor:pointer}

/* Niveles: fondo suave de las bandas de la escala (e4, e6) y de la evolución (e5), de verde a rojo. */
.n-minima{background:var(--verde-tinte);fill:var(--verde-tinte)}
.n-leve{background:var(--lila);fill:var(--lila)}
.n-moderada{background:var(--ambar-tinte);fill:var(--ambar-tinte)}
.n-moderadamente_severa{background:var(--rojo-tinte);fill:var(--rojo-tinte)}
.n-severa{background:var(--rojo-borde);fill:var(--rojo-borde);opacity:.4}
.e-mues{display:inline-block;flex:none;width:18px;height:18px;margin-right:8px;border-radius:5px;border:1px solid var(--linea-campo);vertical-align:-3px}

/* e1 · entrada (la única pantalla centrada). Con menos relleno arriba y abajo, «Crear su cuenta» entra en 800 px. */
.d-main.ctr{padding-block:20px}
.e1-sitio{width:min(460px,100%)}
.e1-card{width:100%}
.e1-card .d-h2{margin-bottom:6px}
.e1-btn{overflow:hidden}
.e1-btn>*{grid-area:1/1}
.e1-ok{opacity:0}
.e1-local{font:800 22px/1.3 Montserrat,sans-serif;letter-spacing:.06em;color:var(--tinta)}

/* e2 · inicio: dos tarjetas con el hilo del logo (ovillo y espiral) */
.d-tres.e2-dos{grid-template-columns:repeat(2,minmax(0,1fr))}
.e2-c{position:relative}
.d-card.big.e2-c{justify-content:flex-start}
/* El dibujo va en el flujo, arriba del título: nunca se encima con él. Los dos miden 96 px de alto, así que los títulos quedan alineados. */
.e2-dib{display:block;flex:none;max-width:100%;height:auto;margin-bottom:22px;stroke:var(--acento)}
.e2-s{stroke-dasharray:1 2}
.e2-tr{position:absolute;left:0;top:0;pointer-events:none}
.e2-tr rect{fill:none;stroke:var(--acento);stroke-width:2;stroke-dasharray:1 2}
.e2-aviso{max-width:760px;margin-top:0;color:var(--suave)}

/* e3 · enviar: «Copiar mensaje» da media vuelta y cae el check; las cifras ruedan como odómetro. */
.e3-copy>span{grid-area:1/1}
.e3-l2{display:flex;align-items:center;justify-content:center;gap:8px}
.e3-copy:not(.e3-hecho) .e3-l2,.e3-hecho .e3-l1{opacity:0}
.e3-ck{display:block;flex:none;transform-origin:50% 100%}
.e-dg{display:inline-block;position:relative;overflow:hidden;vertical-align:top;height:1em}
.e-dg-ph{visibility:hidden}
.e-dg-st{position:absolute;left:0;right:0;top:0;text-align:center}
.e-dg-st>span{display:block;height:1em;line-height:1}
.e3-pac .b-field.e-lab0{margin-top:0}
.e3-nuevo>.b-field:first-child{margin-top:0}
.e3-nom{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font:800 20px/1.25 Montserrat,sans-serif}
.e3-dat{display:block;margin-top:6px;color:var(--suave);font-size:16px}
.e3-res{margin-top:10px}
.e3-res .b-row{gap:12px}
.e3-res .b-muestra{margin-left:auto}
.e3-vacio{margin:0;padding:14px 16px;color:var(--suave);font-size:16px}
.e3-otro{margin-top:14px}

/* e4 · resultado */
.e4-alerta{margin-top:0;font-size:17px}
.e4-orienta{margin-top:0}
.e4-cu{gap:18px;padding-top:30px;border-top:1px solid var(--linea)}
.e4-top{margin-top:0}
.e4-ring i{display:grid;place-content:center;justify-items:center;gap:6px;font-style:normal}
.e4-ring b{font:800 64px/1 Montserrat,sans-serif}
.e4-ring small{font:700 16px/1 "Nunito Sans",sans-serif;color:var(--suave)}
.e4-der .d-h2{margin-bottom:12px}
.e4-escala{margin-top:20px}
.e4-pista{position:relative;height:22px;border-radius:11px;overflow:hidden;background:var(--tarjeta);border:1px solid var(--linea);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.e4-pista i{position:absolute;top:0;bottom:0}
.e4-pista u{position:absolute;left:0;top:6px;height:8px;border-radius:4px;background:var(--marino)}
.e4-cortes{position:relative;height:24px;margin-top:6px;font:700 15px/24px "Nunito Sans",sans-serif;color:var(--suave)}
.e4-cortes span{position:absolute;top:0;transform:translateX(-50%)}
.e4-cortes span:first-child{transform:none}
.e4-cortes span:last-child{transform:translateX(-100%)}
.e4-rangos{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:16px;color:var(--suave)}
.e4-rangos li{display:flex;align-items:center}
.e4-rangos .on{color:var(--tinta);font-weight:700}
.e4-resp .d-tr{padding-block:12px}
.e4-resp .d-tr:not(.th)>:first-child{line-height:1.4}
.e4-marca{background:var(--rojo-tinte)}
.e4-final{margin-top:0;line-height:1.45;background:var(--lila-tenue);border-color:var(--linea)} /* se lee, no se escribe */
.e4-final-r{display:block;margin-top:8px;font-weight:700;font-size:17px}
.e4-notas{display:grid;gap:14px}
.e4-nota{border-top:1px solid var(--linea);padding-top:12px}
.e4-nota .d-lab{margin-bottom:6px}
.e4-nota-t{margin:0;font-size:17px;line-height:1.5}

/* e5 · ficha del paciente (e5-a08) */
.e5-graf{gap:8px}
.e5-graf>.d-sub{margin-top:-6px}
.e5-linea{margin-top:8px}
.e5-ley{margin-top:4px}
.e5-h-envios{margin:10px 0 -8px}
.e5-on circle,.e5-on text{transform-box:fill-box;transform-origin:center}
.e5-pt{fill:var(--marino)}
.e5-tb{position:absolute;pointer-events:none;overflow:visible}
.e5-tb rect,.e5-tb line{fill:none;stroke:var(--acento);stroke-width:1;stroke-dasharray:1 1}

/* e6 · informe */
.e6-barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px}
.e6-fl{position:absolute;left:0;top:-1px;pointer-events:none;overflow:visible}
.e6-fl line{stroke:var(--hoja-tinta);stroke-width:1;stroke-dasharray:1 1}
.b-paper .p-sig{position:relative}
.p-band .e6-band-t{margin-left:auto;color:var(--sobre-marino);font:700 16px/1.2 "Nunito Sans",sans-serif}
.p-alerta{margin:10px 0 0;padding:10px 12px;border:1px solid var(--rojo-borde);border-radius:8px;background:var(--rojo-tinte);color:var(--hoja-tinta);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.p-alerta b{color:var(--rojo)}
.p-cu{margin-top:10px;padding-top:10px;border-top:1px solid var(--linea)}
.p-cu-t{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin:0;font:800 18px/1.2 Montserrat,sans-serif;color:var(--marino)}
.p-cu-n{font:600 16px "Nunito Sans",sans-serif;color:var(--hoja-suave)}
.p-cu-n b{font:800 34px/1 Montserrat,sans-serif;color:var(--marino)}
.p-cu .e4-escala{margin-top:8px}
.p-cu .e4-cortes{color:var(--hoja-suave)}
.p-h2{font-size:20px}
.p-h3{margin:12px 0 4px;font:800 18px/1.2 Montserrat,sans-serif;color:var(--marino)}
.p-nota{margin:0}
.p-nota .e-solo{margin:2px 0 0;color:var(--hoja-tinta)}
.p-resp{border-top:1px solid var(--linea)}
.p-resp p{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin:0;padding:4px 0;border-bottom:1px solid var(--linea);font-size:15px;line-height:1.3}
.p-resp b{white-space:nowrap;text-align:right}
.p-resp .p-resp-f b{white-space:normal;max-width:12em}
.p-cred{margin-top:10px;font-size:15px;line-height:1.35}
.e6-pie{margin-top:auto}
/* Con notas largas, la hoja 1 sigue en otra hoja en vez de cortar el texto. */
@media print{.b-paper.e6-crece{height:auto;min-height:297mm;overflow:visible}}
.e-movil{display:none}

/* Pantallas angostas: cada tabla se apila y las dos tarjetas del inicio van una debajo de otra. */
@media (max-width:759.98px){
  .d-tres.e2-dos{grid-template-columns:minmax(0,1fr)}
  .e2-dib{margin-bottom:14px}
  .e-meta{margin-top:-8px}
  .e4-top .b-ring{justify-self:center}
  /* Resultado: el nombre del cuestionario va antes del anillo. */
  .e4-der{display:contents}
  .e4-der>.d-h2{order:-1;margin:0}
  .e4-der>div:first-of-type{justify-self:center}
  .e4-ring b{font-size:56px}
  .d-tr>.e-sin{display:none}
  .e-movil{display:inline;color:var(--suave)}
  /* Pacientes: el nombre arriba, el último envío debajo y los niveles y avisos al final. */
  .e-pac .d-tr>:nth-child(2){flex-basis:100%}
  .e4-resp .d-tr:not(.th)>:nth-child(2){flex:1 1 auto}
  .p-resp p{grid-template-columns:minmax(0,1fr)}
  .p-resp b,.p-resp .p-resp-f b{white-space:normal;text-align:left;max-width:none}
}