/* Plataforma de evaluación. Hereda el sistema visual de psicnovoa.com:
   base crema, Playfair para títulos, Inter para lectura, y el morado que ya
   identifica a la línea de empresas. El rojo de marca se reserva para la
   acción principal de cada pantalla, igual que en el sitio público. */

@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../../assets/fonts/inter-var.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500 700;font-display:swap;
  src:url('../../assets/fonts/playfair-var.woff2') format('woff2')}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}

:root{
  --rojo:#ED1C24; --rojo-deep:#C21419;
  --azul:#27AAE1; --verde:#39B54A; --naranja:#F7941E;
  --morado:#92278F; --morado-deep:#711D6F; --morado-tenue:#F4EAF4;
  --morado-texto:#711D6F;
  --ink:#232326; --ink-soft:#54545A; --ink-mute:#6B6B74;
  --cream:#F7F5F2; --paper:#fff; --line:#E2DED7; --line-fuerte:#CFC9BF;
  --ok:#1E7A3C; --ok-fondo:#E8F4EC; --ok-borde:#C6E3D1;
  --alerta:#9A5B00; --alerta-fondo:#FBF1E0; --alerta-borde:#EDD7AE;
  --mal:#B3221F; --mal-fondo:#FBEAEA; --mal-borde:#EEC9C8;
  --nota:#5E4A16; --nota-fondo:#FBF7EC; --nota-borde:#EADFC4;
  --bien-texto:#14562A; --mal-texto:#8E1B19;
  --urge-fondo:#FDF6F6; --urge-borde:#E9C9C8;
  --sombra:0 14px 34px -24px rgba(35,35,38,.45);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --r:12px; --r-chico:8px;
  color-scheme:light;
}

/* Tema oscuro. Se aplica de dos maneras: cuando la persona lo eligió, y cuando
   dejó el automático y su sistema está en oscuro. Las dos escriben los mismos
   valores, para que no haya un oscuro de primera y otro de segunda.

   `color-scheme` no es decorativo: es lo que hace que el navegador dibuje en
   oscuro la lista desplegable de un select, el calendario de un input de fecha
   y la barra de scroll. Sin eso, esas tres cosas salen blancas. */
@media (prefers-color-scheme: dark) {
  :root[data-tema="auto"]{
    --morado-tenue:#3A1B39; --morado-texto:#CB86C6;
    --ink:#ECECEF; --ink-soft:#B6B6BF; --ink-mute:#9A9AA6;
    --cream:#16161A; --paper:#1E1E23; --line:#2E2E36; --line-fuerte:#4A4A57;
    --ok:#7FD9A0; --ok-fondo:#173225; --ok-borde:#2A5741;
    --alerta:#EFC073; --alerta-fondo:#33270F; --alerta-borde:#5C4620;
    --mal:#F09B98; --mal-fondo:#331A1A; --mal-borde:#5E2E2C;
    --nota:#EBD9A8; --nota-fondo:#2C2618; --nota-borde:#4E442A;
    --bien-texto:#A6E3BE; --mal-texto:#F3AEAB;
    --urge-fondo:#2A1A1B; --urge-borde:#5E2E2C;
    --sombra:0 14px 34px -24px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}

:root[data-tema="oscuro"]{
  --morado-tenue:#3A1B39; --morado-texto:#CB86C6;
  --ink:#ECECEF; --ink-soft:#B6B6BF; --ink-mute:#9A9AA6;
  --cream:#16161A; --paper:#1E1E23; --line:#2E2E36; --line-fuerte:#4A4A57;
  --ok:#7FD9A0; --ok-fondo:#173225; --ok-borde:#2A5741;
  --alerta:#EFC073; --alerta-fondo:#33270F; --alerta-borde:#5C4620;
  --mal:#F09B98; --mal-fondo:#331A1A; --mal-borde:#5E2E2C;
  --nota:#EBD9A8; --nota-fondo:#2C2618; --nota-borde:#4E442A;
  --bien-texto:#A6E3BE; --mal-texto:#F3AEAB;
  --urge-fondo:#2A1A1B; --urge-borde:#5E2E2C;
  --sombra:0 14px 34px -24px rgba(0,0,0,.8);
  color-scheme:dark;
}

body{
  font-family:var(--sans);color:var(--ink);background:var(--cream);
  font-size:15.5px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2.5px solid var(--morado);outline-offset:2px;border-radius:4px}

/* --- armazón ------------------------------------------------------------ */
.app{display:grid;grid-template-columns:238px 1fr;min-height:100vh}
.lateral{
  background:var(--paper);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.marca{padding:20px 18px 14px;border-bottom:1px solid var(--line)}
.marca-fila{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.marca-logo{display:block;flex:1;min-width:0}
/* Un solo botón y siempre en el mismo lugar: cambiar cómo se ve el tablero es
   de las cosas que se piden a media tarde, no algo que se configura una vez. */
.tema-rapido button{
  width:36px;height:36px;flex:0 0 36px;border:1px solid var(--line);border-radius:9px;
  background:var(--paper);color:var(--ink-soft);cursor:pointer;display:grid;place-items:center;
  padding:0;transition:color .15s,border-color .15s,background .15s
}
.tema-rapido button:hover{color:var(--morado-texto);border-color:var(--line-fuerte);background:var(--cream)}
.tema-rapido svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.marca img{width:182px}
/* Sobre fondo oscuro el logotipo va en su versión blanca, nunca el de color:
   el nombre en rojo sobre casi negro no se lee. */
.marca .oscuro{display:none}
:root[data-tema="oscuro"] .marca .claro{display:none}
:root[data-tema="oscuro"] .marca .oscuro{display:block}
@media (prefers-color-scheme: dark){
  :root[data-tema="auto"] .marca .claro{display:none}
  :root[data-tema="auto"] .marca .oscuro{display:block}
}
.marca .sub{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);margin-top:8px}
/* El logotipo es un cerebro de seis colores: la línea los repite exactos y
   firma cada pantalla sin agregar un adorno nuevo. */
.hilo{height:3px;display:flex}
.hilo i{flex:1}
.hilo i:nth-child(1){background:var(--rojo)}
.hilo i:nth-child(2){background:var(--naranja)}
.hilo i:nth-child(3){background:var(--verde)}
.hilo i:nth-child(4){background:var(--azul)}
.hilo i:nth-child(5){background:var(--morado)}

/* El desplegable solo existe en teléfono: en escritorio el menú ya está a la
   vista y un botón para abrirlo sobra. */
.menu-movil{display:none}
.menu-movil summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
  min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--paper);color:var(--ink-soft);font-size:13.5px;font-weight:600}
.menu-movil summary::-webkit-details-marker{display:none}
.menu-movil summary svg{width:19px;height:19px}
.menu-movil[open] summary{border-color:var(--line-fuerte);color:var(--ink)}
.menu-desplegado{position:absolute;left:0;right:0;top:100%;z-index:50;background:var(--paper);
  border-bottom:1px solid var(--line);box-shadow:var(--sombra);padding:8px 10px 14px;
  max-height:70vh;overflow-y:auto}
.menu{padding:12px 10px;flex:1;overflow-y:auto}
.menu a{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-chico);
  color:var(--ink-soft);text-decoration:none;font-size:14.5px;font-weight:500;margin-bottom:2px;
}
.menu a:hover{background:var(--cream);color:var(--ink)}
.menu a.on{background:var(--morado-tenue);color:var(--morado-texto);font-weight:600}
.menu a svg{width:18px;height:18px;flex:0 0 18px;stroke:currentColor;fill:none;stroke-width:1.7}
.menu .grupo{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);
  padding:16px 11px 6px;font-weight:600}
.pie-lateral{padding:12px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-mute)}
.pie-lateral strong{display:block;color:var(--ink);font-size:14px;font-weight:600}
.pie-lateral a{color:var(--ink-soft);display:inline-flex;align-items:center;min-height:26px}



.contenido{padding:26px 30px 64px;max-width:1240px;width:100%}
/* Invitación a instalar. Aparece solo si el navegador de verdad puede hacerlo,
   y se puede cerrar: una banda que no se va estorba todos los días. */
.banda-instalar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  background:var(--morado-tenue);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 18px;margin-bottom:20px;font-size:14.5px;color:var(--ink)}
.banda-instalar[hidden]{display:none}
.encabezado{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:space-between;margin-bottom:22px}
.encabezado h1{font-family:var(--serif);font-size:30px;line-height:1.15;font-weight:600;letter-spacing:-.01em}
.encabezado .desc{color:var(--ink-soft);margin-top:5px;max-width:62ch}
.migas{font-size:13px;color:var(--ink-mute);margin-bottom:8px}
.migas a{color:var(--ink-soft)}

/* --- piezas ------------------------------------------------------------- */
.tarjeta{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.tarjeta + .tarjeta{margin-top:16px}
.tarjeta h2{font-family:var(--serif);font-size:20px;font-weight:600;margin-bottom:3px}
.tarjeta .ayuda{color:var(--ink-soft);font-size:14px;margin-bottom:14px}

.rejilla{display:grid;gap:16px}
.rejilla.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rejilla.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rejilla.c4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Los cuatro números del tablero son de la misma familia, así que comparten
   forma: lo que cambia es el dato, no el envase. */
.dato{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.dato .n{font-family:var(--serif);font-size:32px;font-weight:600;line-height:1}
.dato .t{font-size:13.5px;color:var(--ink-soft);margin-top:6px}
.dato.urge{border-color:var(--urge-borde);background:var(--urge-fondo)}
.dato.urge .n{color:var(--mal)}

table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
   color:var(--ink-mute);font-weight:600;padding:0 12px 9px;border-bottom:1px solid var(--line)}
td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--cream)}
td .sec{display:block;font-size:13px;color:var(--ink-mute)}
.tabla-envuelve{overflow-x:auto;margin:0 -20px;padding:0 20px}

.etiqueta{display:inline-block;padding:3px 9px;border-radius:99px;font-size:12.5px;font-weight:600;
  background:var(--cream);color:var(--ink-soft);border:1px solid var(--line)}
.etiqueta.ok{background:var(--ok-fondo);color:var(--ok);border-color:var(--ok-borde)}
.etiqueta.curso{background:var(--morado-tenue);color:var(--morado-texto);border-color:var(--line-fuerte)}
.etiqueta.espera{background:var(--alerta-fondo);color:var(--alerta);border-color:var(--alerta-borde)}
.etiqueta.mal{background:var(--mal-fondo);color:var(--mal);border-color:var(--mal-borde)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 18px;border-radius:var(--r-chico);border:1px solid transparent;
  font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;background:var(--rojo-deep);color:#fff;
}
.btn:hover{background:#A81217}
.btn.secundario{background:var(--paper);color:var(--ink);border-color:var(--line-fuerte)}
.btn.secundario:hover{background:var(--morado-tenue);border-color:var(--line-fuerte)}
.btn.morado{background:var(--morado)}
.btn.morado:hover{background:var(--morado-deep)}
.btn.chico{min-height:36px;padding:6px 12px;font-size:13.5px;border-radius:7px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.acciones{display:flex;flex-wrap:wrap;gap:9px}

/* --- formularios -------------------------------------------------------- */
.campo{margin-bottom:15px}
.campo label{display:block;font-size:13.5px;font-weight:600;margin-bottom:5px}
.campo .pista{font-size:13px;color:var(--ink-mute);margin-top:5px}
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],input[type=date],input[type=search],textarea,select{
  width:100%;box-sizing:border-box;min-height:44px;padding:10px 13px;
  font-family:inherit;
  border:1px solid var(--line-fuerte);border-radius:var(--r-chico);
  background:var(--paper);color:var(--ink);font-size:15.5px;
}
textarea{min-height:92px;resize:vertical;line-height:1.5}
input:focus,textarea:focus,select:focus{border-color:var(--morado);outline:2px solid rgba(146,39,143,.25);outline-offset:0}
/* La flecha nativa se dibuja pegada al borde: se sustituye y se le da aire.
   El color va dentro del SVG, así que la flecha se redeclara por tema: una
   variable de CSS no se sustituye dentro de un url(). */
select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354545A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px;
  padding-right:42px;
}
/* En oscuro, además del color del texto y del fondo, hace falta repintar la
   flecha y las opciones de la lista: si no, el desplegable sale blanco y solo
   se lee al pasar el cursor. Sin !important, para que un estilo propio de una
   pantalla siga mandando. */
:root[data-tema="oscuro"] select,
:root[data-tema="oscuro"] select option{color:var(--ink);background-color:var(--paper)}
:root[data-tema="oscuro"] select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B6B6BF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){
  :root[data-tema="auto"] select,
  :root[data-tema="auto"] select option{color:var(--ink);background-color:var(--paper)}
  :root[data-tema="auto"] select{
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B6B6BF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}
.fila{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.fila.c3{grid-template-columns:repeat(3,minmax(0,1fr))}

.aviso{padding:13px 16px;border-radius:var(--r-chico);font-size:14.5px;margin-bottom:18px;border:1px solid}
.aviso.bien{background:var(--ok-fondo);border-color:var(--ok-borde);color:var(--bien-texto)}
.aviso.mal{background:var(--mal-fondo);border-color:var(--mal-borde);color:var(--mal-texto)}
.aviso.nota{background:var(--nota-fondo);border-color:var(--nota-borde);color:var(--nota)}

/* Sin datos todavía no es una pantalla en blanco: dice qué sigue. */
.vacio{text-align:center;padding:42px 20px;color:var(--ink-soft)}
.vacio h3{font-family:var(--serif);font-size:21px;color:var(--ink);margin-bottom:6px}
.vacio p{max-width:46ch;margin:0 auto 18px}

/* --- barra de escala (resultados) --------------------------------------- */
.medida{border-bottom:1px solid var(--line);padding:4px 0 12px}
.medida:last-child{border-bottom:0}
.escala{display:grid;grid-template-columns:210px 1fr 58px;gap:14px;align-items:center;padding:8px 0}
.escala .lectura{grid-column:1/-1;margin:2px 0 0;font-size:14.5px;color:var(--ink-soft);max-width:86ch}
.escala .nom{font-weight:600;font-size:14.5px}
.escala .nom span{display:block;font-weight:400;font-size:12.5px;color:var(--ink-mute)}
.barra{position:relative;height:26px;background:var(--cream);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.barra i{position:absolute;inset:0 auto 0 0;background:var(--morado);opacity:.85}
.barra b{position:absolute;top:0;bottom:0;width:2px;background:var(--line-fuerte)}
.escala .val{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;font-size:16px}
.escala.alta .barra i{background:var(--verde)}
.escala.baja .barra i{background:var(--naranja)}

@media print{
  .lateral,.no-imprime{display:none!important}
  .app{display:block}
  body{background:#fff;font-size:12.5px}
  .contenido{padding:0;max-width:none}
  .tarjeta{border-color:#ccc;break-inside:avoid;page-break-inside:avoid}
  a{text-decoration:none}
}

/* --- teléfono ------------------------------------------------------------ */
@media (max-width:900px){
  .app{display:block}
  .lateral{position:static;height:auto;flex-direction:row;align-items:center;justify-content:space-between;
    border-right:0;border-bottom:1px solid var(--line);padding-right:10px}
  .marca{border-bottom:0;padding:12px 14px;flex:1;min-width:0}
  .marca-fila{gap:12px;align-items:center}
  /* En pantalla táctil el botón mide lo que mide el dedo. */
  .tema-rapido button{width:44px;height:44px;flex:0 0 44px}
  .tema-rapido svg{width:20px;height:20px}
  .marca img{width:146px}
  .marca .sub{display:none}
  .menu{display:none}
  .menu-movil{display:block}
  .menu-desplegado{display:block}
  .lateral{position:relative}
  .pie-lateral{border-top:0;padding:10px 4px;text-align:right}
  .pie-lateral strong{font-size:13px}
  .contenido{padding:18px 16px 92px}
  .encabezado h1{font-size:25px}
  .rejilla.c2,.rejilla.c3,.rejilla.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fila,.fila.c3{grid-template-columns:1fr}
  .escala{grid-template-columns:1fr;gap:6px}
  .escala .val{text-align:left}
  .tabla-envuelve{margin:0 -16px;padding:0 16px}
  /* El menú de escritorio se apila abajo, al alcance del pulgar. */
  .barra-abajo{display:flex}
}
@media (max-width:420px){ .rejilla.c3,.rejilla.c4{grid-template-columns:1fr} }

/* En pantalla táctil, todo lo que se toca mide lo que mide el dedo. Va junto y
   por puntero grueso, no por ancho: una tableta con ratón no lo necesita y un
   teléfono ancho sí. */
@media (pointer:coarse), (max-width:1024px){
  .pie-lateral a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
  .menu-movil summary{min-height:44px;height:44px;box-sizing:border-box}
  .btn.chico{min-height:44px;padding:8px 14px}
  .temas button,.tema-rapido button{min-height:44px}
  .tema-rapido button{width:44px;height:44px;flex:0 0 44px}
  .menu a{min-height:44px}
  .barra-abajo a{min-height:48px}
  .enlace{display:inline-flex;align-items:center;min-height:44px}
  .marca-logo{display:flex;align-items:center;min-height:44px}
  .pie-lateral a{min-height:44px}
}

.barra-abajo{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--paper);border-top:1px solid var(--line);padding:6px 4px 8px;
  justify-content:space-around;box-shadow:0 -6px 20px -14px rgba(0,0,0,.4);
}
.barra-abajo a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 2px;min-height:48px;text-decoration:none;color:var(--ink-mute);font-size:11px;font-weight:600}
.barra-abajo a svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7}
.barra-abajo a.on{color:var(--morado)}