/* ══════════════════════════════════════════════════════════
   css/app.css — hoja de estilo unica de Assessment Ley 21.719

   Sale del bloque <style> que vivia dentro de index.html (35,8 KB). Se saco
   entero y sin tocar un valor: el corte es mecanico y no cambia un pixel.

   Por que estaba mal donde estaba, medido y no opinado: el .htaccess fuerza
   `Cache-Control: no-cache` en *.html, asi que estos 35 KB se revalidaban en
   cada carga y no podian compartir cache con nada. Aqui si: el paso de
   cache-busting del deploy le pone `?v=<sha>` y el .htaccess lo cachea un ano.
   Y ademas vuelve a haber un `archivo:linea` estable —antes, tocar una regla
   desplazaba las 2.500 lineas de JS que habia debajo— y el diff del chrome
   contra assessment_normativo y assessment_iso27001_app vuelve a ser un diff
   de un archivo contra otro.

   La fuente ya no se pide con @import (bloqueaba el CSS en cascada): va en un
   <link> con preconnect en index.html.
   ══════════════════════════════════════════════════════════ */
/* La fuente Inter se enlaza desde index.html (<link> + preconnect). */
:root{
  /* Transicion de estados (hover/activo): solo lo que de verdad cambia, con los
     tiempos del kit ux.css. Sustituye a `transition:all .2s`. */
  --t-estado:background-color var(--ux-dur,.2s) var(--ux-ease,ease),border-color var(--ux-dur,.2s) var(--ux-ease,ease),color var(--ux-dur,.2s) var(--ux-ease,ease),box-shadow var(--ux-dur,.2s) var(--ux-ease,ease),opacity var(--ux-dur,.2s) var(--ux-ease,ease);
  /* Marca y estructura. Coinciden al dígito en las siete apps de la suite
     (estándar común §3.1) y no se tocan. */
  --navy:#192F50; --navy-mid:#264168; --navy-light:#304F7B;
  --gold:#FF8300; --gold-light:#FFA83D; --cream:#f5f0e8;
  --white:#fff; --gray:#e8e4dc; --text:#1a1a2e; --sub:#5a6070;
  --r:6px;

  /* Semánticos (estándar común §3.2). La separación relleno/texto la
     reinventaron tres apps de la suite por su cuenta y con tres nombres
     distintos; aquí tiene nombre y se acabó.

     --ok/--warn/--err son para TEXTO y BORDES sobre fondo claro, y son los
     únicos calibrados: los que esta app usaba antes (#2ecc71, #e67e22,
     #e74c3c) no alcanzan contraste AA como letra —2,10:1, 2,85:1 y 3,82:1—.
     Esos mismos valores siguen aquí, con el nombre que les corresponde, para
     lo que sí saben hacer: rellenar. */
  --ok:#1e8449;      --warn:#d1810c;      --err:#c0392b;
  --ok-fill:#2ecc71; --warn-fill:#e67e22; --err-fill:#e74c3c;

  /* Los dos claros sobre superficie navy, donde el oscuro no contrasta:
     --err-line es el borde y el icono de los avisos de error, que van sobre
     fondo --navy; --ok-line es el verde de la píldora de presencia, que vive
     dentro de la cabecera. Mismo papel, un color cada uno. */
  --err-line:#e74c3c; --ok-line:#2ecc71;

  /* «No Aplica» de la escala de madurez: el gris de la hoja de metricas, el
     mismo de assessment_iso27001_app. Es claro, asi que lleva tinta oscura. */
  --na:#A6A6A6; --na-ink:#333;

  /* Campos de formulario (estándar común §3.3). --field-border vale lo mismo
     que --gray a propósito: son el mismo color, y el estándar (§3.4) los hace
     converger. Tener el nombre del campo permite mover el borde de los inputs
     sin arrastrar todas las líneas de la app. */
  --field-bg:#fafaf8; --field-border:var(--gray); --field-focus:var(--gold);

  /* Neutros del esqueleto de carga. Son los de la familia —los mismos valores
     que Control-de-Horas—: un crema un punto más apagado que --cream y un gris
     un punto más oscuro que --gray, para que el brillo que recorre las líneas
     se note sin llamar la atención. */
  --cream-2:#efe9de; --gray-2:#d9d3c7;

  /* Alto de la cabecera del shell de assessment (estándar común §2 y §3.3). No
     estaba declarado en ninguna de las tres apps de la familia: salía de sumar
     el padding y el bloque de marca (≈65 px aquí), y el top:72px de la barra
     lateral era un número puesto a ojo para calzar con esa suma — aquí ya se
     había roto, con 7 px de hueco durante todo el scroll. 64 es el valor que
     hace ese 72 correcto por construcción: 64 + 8 de aire. */
  --header-h:64px;

  /* Cuatro tonos que se usaban sueltos y no tenían nombre. Mismo valor de
     siempre; lo que cambia es que ahora están aquí (Regla 1).
     --text-2:   el gris del texto de la ley y de los comentarios del equipo.
     --gold-ink: el dorado oscurecido del tag de subdominio, legible sobre su
                 propio fondo naranja al 14 %.
     --warn-ink: el naranja oscurecido del aviso de modal y del tag de auditor,
                 por el mismo motivo.
     --ok-soft:  el verde muy tenue del fondo del aviso de éxito.
     Los dos primeros se llaman igual que en assessment_normativo, que ya los
     nombró: el nombre es parte del token (Regla 2). */
  --text-2:#3a4050; --gold-ink:#7a5c10; --warn-ink:#8a4700; --ok-soft:#e8f8ef;

  /* Pulido acordado de la familia (estándar común §13.7). Movimiento: tres
     duraciones y una curva de salida. --on-navy-sub es el texto secundario
     sobre navy (≈5,9:1) y --accent-ink el naranja de texto chico sobre claro
     (≈5,4:1). --gold-ink sigue siendo el del tag de subdominio. */
  --dur-fast:150ms; --dur:250ms; --dur-slow:400ms; --ease-out:cubic-bezier(.22,1,.36,1);
  --on-navy-sub:rgba(255,255,255,.62);
  --accent-ink:#a65300;
  accent-color:var(--navy);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Iconos SVG lineales (estilo Feather). Ver bloque ICON_* en el <script>. */
.ic{display:inline-block;vertical-align:-.125em;flex-shrink:0}
body{font-family:'Inter',sans-serif;background:var(--cream);color:var(--text);min-height:100vh}
#loader{position:fixed;inset:0;background:var(--navy);display:flex;align-items:center;justify-content:center;z-index:9999;flex-direction:column;gap:16px}
#loader .spin{width:36px;height:36px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite}
#loader p{font-family:'Inter',sans-serif;font-size:13px;color:rgba(255,255,255,.65);letter-spacing:1px}
@keyframes spin{to{transform:rotate(360deg)}}
#loader{transition:opacity var(--ux-dur,.2s) var(--ux-ease,ease)}
#loader.fuera{opacity:0;pointer-events:none}

/* LOGIN */
/* Login canonico del estandar comun (§5), al digito. Sin el padding del
   .login-wrap, en movil la tarjeta llegaba al borde de la pantalla. */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,#192F50 0%,#264168 60%,#304F7B 100%)}
.login-card{background:#fff;border-radius:16px;padding:34px 30px;width:100%;max-width:360px;box-shadow:0 22px 60px rgba(0,0,0,.28);border:1px solid rgba(25,47,80,.08)}
.login-logo{display:flex;justify-content:center;margin:0 0 18px}
.login-logo img{display:block;width:100%;max-width:170px;height:auto;object-fit:contain}
.l-badge{display:block;text-align:center;margin-bottom:8px}
.l-badge span{display:inline-block;background:var(--gold);color:#fff;font-family:'Inter',sans-serif;font-weight:800;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:5px 12px;border-radius:2px}
.l-title{font-family:'Inter',sans-serif;font-size:21px;font-weight:800;color:var(--navy);text-align:center;line-height:1.25;margin-bottom:4px}
.l-sub{font-size:12px;color:var(--sub);text-align:center;margin-bottom:28px}
/* Ultimo parrafo de la tarjeta (hoy, el respaldo sin JavaScript): sin el hueco
   de 28 px que .l-sub reserva para el campo que normalmente viene debajo. */
.l-sub-fin{margin-bottom:0}
.fl{margin-bottom:16px}
.fl label{display:block;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--sub);margin-bottom:6px}
.fl input{width:100%;padding:11px 13px;border:1.5px solid var(--field-border);border-radius:var(--r);font-family:'Inter',sans-serif;font-size:14px;color:var(--text);transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out);background:var(--field-bg)}
.fl input:hover:not(:focus):not(:disabled){border-color:var(--gray-2)}
.fl input:focus{outline:none;border-color:var(--field-focus);background:#fff}
/* text-decoration:none porque error.html lo usa sobre un <a> («Volver al
   inicio»): esa pagina no tiene JavaScript con que navegar y el enlace es el
   unico camino de vuelta. Sobre un <button> la declaracion no cambia nada. */
.btn-primary{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:13px;background:var(--navy);color:#fff;border:none;border-radius:var(--r);font-family:'Inter',sans-serif;font-weight:700;font-size:14px;text-decoration:none;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn-primary:hover:not(:disabled){background:var(--navy-mid);transition-duration:var(--dur)}
.l-err{display:flex;align-items:flex-start;gap:9px;background:var(--navy);border:1.5px solid var(--err-line);border-radius:var(--r);padding:11px 14px;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.85);margin-bottom:14px;text-align:left}
.l-err .ic{color:var(--err-line);margin-top:2px}
.l-hints{margin-top:20px;border-top:1px solid var(--gray);padding-top:16px}
.l-hints-title{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--sub);margin-bottom:8px}
.hint-row{display:flex;justify-content:space-between;align-items:center;padding:5px 6px;cursor:pointer;border-radius:4px;transition:background-color var(--dur-fast) var(--ease-out)}
.hint-row:hover{background:var(--cream)}
.hint-row span{font-size:12px;color:var(--sub)}
.hint-row code{font-size:11px;font-family:monospace;background:var(--cream-2);padding:1px 6px;border-radius:3px;color:var(--navy)}
.hint-note{font-size:10px;color:#bbb;margin-top:6px}

/* CLIENT FORM */
.cl-page-wrap{min-height:100vh;background:var(--cream)}
.cl-page{max-width:900px;margin:28px auto;padding:0 20px}
.cf-card{max-width:740px;margin:auto;background:#fff;border-radius:10px;box-shadow:0 4px 24px rgba(25,47,80,.13);overflow:hidden}
.cf-head{background:var(--navy);padding:24px 32px;display:flex;align-items:center;gap:16px}
.cf-head-ico{width:44px;height:44px;border-radius:8px;background:rgba(255,131,0,.16);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.cf-head-title{font-family:'Inter',sans-serif;font-size:18px;font-weight:800;color:#fff}
.cf-head-sub{font-size:12px;color:var(--on-navy-sub);margin-top:3px}
.cf-body{padding:32px}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cf-sec{font-family:'Inter',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--sub);grid-column:1/-1;border-bottom:1px solid var(--gray);padding-bottom:7px;margin-top:8px}
.cf-full{grid-column:1/-1}
.cf-actions{margin-top:24px;display:flex;gap:10px;justify-content:flex-end}
.cl-list{background:#fff;border-radius:8px;box-shadow:0 2px 12px rgba(25,47,80,.09);overflow:hidden}
.cl-list-head{background:var(--navy);padding:14px 20px;font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:space-between}
.cl-row{padding:12px 20px;border-bottom:1px solid var(--gray);display:flex;align-items:center;gap:14px;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out)}
.cl-row:last-child{border-bottom:none}
@media(hover:hover){.cl-row:hover{background:var(--cream)}}
.cl-row-name{font-weight:600;font-size:13px;color:var(--navy)}
.cl-row-det{font-size:11px;color:var(--sub);margin-top:1px}
.cl-row-info{flex:1;min-width:0}
.cl-row-sel{flex-shrink:0;color:var(--navy);display:flex;align-items:center}
.cl-act{flex-shrink:0;font-size:10px}
.cl-act-danger{background:rgba(231,76,60,.1);color:var(--err);border:1px solid rgba(231,76,60,.3)}
.cl-act-danger:hover:not(:disabled){background:rgba(231,76,60,.18)}
.cl-search-wrap{padding:12px 20px;border-bottom:1px solid var(--gray);background:var(--field-bg)}
.cl-search-box{position:relative}
.cl-search-box .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--sub);pointer-events:none}
.cl-search-inp{width:100%;padding:9px 13px 9px 34px;border:1.5px solid var(--field-border);border-radius:var(--r);font-family:'Inter',sans-serif;font-size:13px;color:var(--text);background:#fff;transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.cl-search-inp:hover:not(:focus):not(:disabled){border-color:var(--gray-2)}
.cl-search-inp:focus{outline:none;border-color:var(--navy)}
.cl-search-inp:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.empty-state{text-align:center;padding:40px 20px;color:var(--sub);font-size:13px}

/* APP HEADER */
.app-header{background:var(--navy);position:sticky;top:0;z-index:100;box-shadow:0 2px 20px rgba(0,0,0,.4)}
/* min-height y no height: si la fila de la derecha llega a partirse en dos
   lineas, la cabecera crece en vez de recortar. */
.app-header-inner{max-width:1280px;margin:auto;min-height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0 26px;gap:16px}
.app-header-left{display:flex;align-items:center;gap:18px}
.app-brand{display:flex;align-items:center;gap:14px}
.app-badge{background:var(--gold);color:#fff;font-family:'Inter',sans-serif;font-weight:800;font-size:12px;letter-spacing:2px;text-transform:uppercase;padding:6px 11px;border-radius:2px;flex-shrink:0}
.app-title{font-family:'Inter',sans-serif;font-size:16px;font-weight:700;color:#fff;line-height:1.2}
.app-title span{color:var(--gold)}
.app-meta{font-size:11px;color:var(--on-navy-sub);margin-top:1px}
.hdr-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.prog-wrap{display:flex;align-items:center;gap:8px}
.prog-lbl{font-family:'Inter',sans-serif;font-size:12px;color:var(--gold-light);white-space:nowrap}
.prog-outer{width:110px;height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.prog-inner{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-light));border-radius:2px;transition:width var(--dur-slow) var(--ease-out)}
.user-menu{position:relative}
/* Indicador de autoguardado sobre el navy de la cabecera: los colores del kit
   (gris / verde oscuro) no tienen contraste aqui. */
.app-header .ux-guardado{color:rgba(255,255,255,.62);min-width:74px;justify-content:flex-end}
.app-header .ux-guardado.es-ok{color:var(--ok-fill)}
.app-header .ux-guardado.es-err{color:var(--err-line)}
.user-pill{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:none;border-radius:20px;padding:6px 13px;font-family:'Inter',sans-serif;font-size:12px;color:rgba(255,255,255,.68);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.user-pill:hover:not(:disabled){background:rgba(255,255,255,.16);color:#fff;transition-duration:var(--dur)}
.user-pill .ic{opacity:.55}
.user-dropdown{position:absolute;top:100%;right:0;margin-top:8px;background:#fff;border-radius:8px;min-width:220px;padding:5px;z-index:200;box-shadow:0 12px 32px rgba(0,0,0,.3);animation:ux-funde var(--ux-dur,.2s) var(--ux-ease,ease)}
.user-dd-head{padding:10px 12px 9px;margin:-5px -5px 5px;border-bottom:1px solid var(--gray)}
.user-dd-name{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:var(--navy)}
.user-dd-rol{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--accent-ink);margin-top:2px}
.user-dd-item{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;text-align:left;padding:9px 12px;border-radius:3px;font-family:'Inter',sans-serif;font-size:12.5px;color:var(--text);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out)}
.user-dd-item:hover{background:var(--cream)}
.user-dd-item .ic{color:var(--sub)}
.user-dd-sep{height:1px;background:var(--gray);margin:5px 0}
.user-dd-danger{color:var(--err)}
.user-dd-danger .ic{color:var(--err)}
.user-dot{width:6px;height:6px;border-radius:50%;background:var(--ok-fill)}
.btn-logout{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.75);font-size:12px;padding:6px 11px;border-radius:4px;cursor:pointer;font-family:'Inter',sans-serif;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn-back-lg{font-size:12px;padding:6px 11px;font-weight:600}
.btn-logout:hover:not(:disabled){background:rgba(255,255,255,.14);color:#fff;transition-duration:var(--dur)}

/* ONLINE BADGE en header */
.online-badge{display:flex;align-items:center;gap:5px;background:rgba(46,204,113,.15);border:1px solid rgba(46,204,113,.3);border-radius:20px;padding:4px 10px;font-size:11px;color:var(--ok-line);cursor:pointer}
.online-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--ok-fill);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.online-tooltip{position:absolute;top:100%;right:0;margin-top:6px;background:var(--navy-mid);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:10px 14px;min-width:180px;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.online-tooltip-title{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--on-navy-sub);margin-bottom:8px}
.online-user{display:flex;align-items:center;gap:7px;padding:3px 0;font-size:12px;color:rgba(255,255,255,.8)}
.online-user-dot{width:6px;height:6px;border-radius:50%;background:var(--ok-fill);flex-shrink:0}
.online-user-where{font-size:10px;color:var(--on-navy-sub);margin-top:1px}
.online-wrap{position:relative}

/* LAYOUT */
/* 1280 y no 1200: la cabecera ya media 1280, asi que el logo y el menu de
   usuario quedaban 40 px por fuera de la columna del contenido a cualquier
   ancho de ventana por encima de 1280. Ahora las dos columnas cuadran. */
.app-layout{max-width:1280px;margin:28px auto;padding:0 20px;display:grid;grid-template-columns:210px 1fr;gap:22px;align-items:start}
.cl-banner{background:#fff;border-radius:8px;padding:14px 18px;margin-bottom:18px;border-left:4px solid var(--gold);box-shadow:0 2px 10px rgba(25,47,80,.08);display:flex;align-items:center;gap:14px}
.cl-banner-ico{width:38px;height:38px;border-radius:8px;background:rgba(255,131,0,.12);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.cl-banner-name{font-family:'Inter',sans-serif;font-size:15px;font-weight:800;color:var(--navy)}
.cl-banner-det{font-size:11px;color:var(--sub);margin-top:2px}
.cl-banner-rut{font-size:10px;font-weight:600;color:var(--accent-ink);letter-spacing:.5px;margin-top:2px}
.btn-edit-cl{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;background:none;border:1.5px solid var(--gray);border-radius:4px;padding:5px 11px;font-size:11px;color:var(--sub);cursor:pointer;font-family:'Inter',sans-serif;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn-edit-cl:hover:not(:disabled){border-color:var(--gold);color:var(--navy);transition-duration:var(--dur)}

/* SIDEBAR */
/* El top sale del token y no de un numero a ojo: con la cabecera sin declarar
   aqui habia un 72 copiado de la app hermana sobre una cabecera de ~65 px, y la
   barra quedaba flotando 7 px por debajo con el contenido pasando por el hueco
   durante todo el scroll. El overflow-y y el max-height los tienen ya las otras
   dos: con siete items no se nota, con mas la barra se sale de la ventana y no
   hay forma de llegar a los de abajo. */
.sidebar{position:sticky;top:calc(var(--header-h) + 8px);background:#fff;border-radius:8px;box-shadow:0 2px 12px rgba(25,47,80,.09);padding:14px 0;overflow-y:auto;max-height:calc(100vh - var(--header-h) - 36px)}
.sb-title{font-family:'Inter',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--sub);padding:0 15px 9px;border-bottom:1px solid var(--gray);margin-bottom:5px}
.nav-item{display:flex;align-items:center;gap:7px;padding:8px 15px;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);font-size:12px;font-weight:500;color:var(--sub);border-left:3px solid transparent;user-select:none;position:relative}
.nav-item:hover:not(:disabled){background:var(--cream);color:var(--navy);transition-duration:var(--dur)}
.nav-item.active{background:rgba(255,131,0,.07);color:var(--navy);font-weight:600;border-left-color:var(--gold)}
.nav-item.done .nav-dot{background:var(--ok-fill)}
.nav-dot{width:6px;height:6px;border-radius:50%;background:var(--gray);flex-shrink:0;transition:background .3s}
.nav-count{margin-left:auto;font-size:10px;color:var(--sub);background:var(--gray);border-radius:8px;padding:1px 5px}
/* Avatares de colaboradores en sidebar */
.nav-avatars{display:flex;gap:2px;margin-left:4px}
.nav-avatar{width:14px;height:14px;border-radius:50%;background:var(--gold);color:var(--navy);font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;title:attr(title)}

/* DOMAIN */
.dom-head{background:var(--navy);border-radius:8px 8px 0 0;padding:18px 22px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.dom-name{font-family:'Inter',sans-serif;font-size:18px;font-weight:800;color:#fff}
.dom-name span{color:var(--gold)}
.dom-sub{font-size:11px;color:var(--on-navy-sub);margin-top:3px}
.dom-tools{margin-top:10px}
.dom-toggle{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.78);font-size:11px;padding:5px 10px;border-radius:4px;cursor:pointer;font-family:'Inter',sans-serif;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.dom-toggle:hover:not(:disabled){background:rgba(255,255,255,.14);color:#fff;transition-duration:var(--dur)}
.dom-cnt{font-family:'Inter',sans-serif;font-size:17px;font-weight:800;color:var(--gold);text-align:center}
.dom-cnt-sub{font-size:10px;color:var(--on-navy-sub)}
.q-list{background:#fff;border-radius:0 0 8px 8px;box-shadow:0 4px 20px rgba(25,47,80,.09)}

/* QUESTION CARD */
.q-card{padding:18px 22px;border-bottom:1px solid var(--gray);position:relative}
.q-card:last-child{border-bottom:none}
.q-meta{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px;align-items:center}
.tag{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:2px 7px;border-radius:2px}
.tag-d{background:rgba(25,47,80,.07);color:var(--navy-mid)}
.tag-s{background:rgba(255,131,0,.14);color:var(--gold-ink)}
.tag-a{background:rgba(46,204,113,.09);color:var(--ok);border:1px solid rgba(46,204,113,.22)}
.q-num{margin-left:auto;font-family:'Inter',sans-serif;font-size:10px;font-weight:700;color:var(--sub);letter-spacing:1px}
.q-obl{font-size:11px;color:var(--sub);margin-bottom:6px}
.q-obl strong{color:var(--navy)}
.q-text{font-size:13.5px;font-weight:500;color:var(--text);line-height:1.55;margin-bottom:11px}

/* COLABORACIÓN en cada pregunta */
.colab-bar{display:flex;align-items:center;gap:8px;padding:7px 10px;background:rgba(46,204,113,.06);border:1px solid rgba(46,204,113,.2);border-radius:4px;margin-bottom:10px;font-size:11px;color:var(--ok)}
.colab-bar .auditors{font-weight:600}
.colab-bar .when{color:var(--sub);margin-left:auto;font-size:10px}
.team-comments{background:rgba(25,47,80,.03);border-left:3px solid var(--navy-light);border-radius:0 4px 4px 0;padding:8px 11px;margin-bottom:11px;font-size:12px;color:var(--text-2);line-height:1.65;white-space:pre-wrap}
.team-comments-title{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy-light);margin-bottom:5px;display:flex;align-items:center;justify-content:space-between}
.team-comments-title button{font-size:10px;color:var(--sub);background:none;border:none;cursor:pointer;padding:0}

/* LEY */
.ley-block{background:rgba(25,47,80,.03);border-left:3px solid var(--navy-light);border-radius:0 4px 4px 0;padding:8px 11px;margin-bottom:11px}
.ley-hdr{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}
.ley-title{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy-light)}
.ley-btn{font-size:11px;color:var(--sub);background:none;border:none;cursor:pointer;padding:0}
.ley-body{font-size:12px;color:var(--text-2);line-height:1.65;margin-top:6px;font-style:italic;display:none;animation:ux-funde var(--ux-dur,.2s) var(--ux-ease,ease)}

/* RESPONSE */
.resp-lbl{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--sub);margin-bottom:5px}
.resp-ta{width:100%;min-height:70px;padding:9px 11px;border:1.5px solid var(--field-border);border-radius:var(--r);font-family:'Inter',sans-serif;font-size:13px;color:var(--text);resize:vertical;transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out);background:var(--field-bg);line-height:1.5}
.resp-ta:hover:not(:focus):not(:disabled){border-color:var(--gray-2)}
.resp-ta:focus{outline:none;border-color:var(--field-focus);background:#fff}

/* FILES */
.ev-lbl{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent-ink);margin-bottom:5px}
.ev-chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.ev-chip{font-size:11px;color:var(--navy-mid);background:rgba(255,131,0,.1);border:1px solid rgba(255,131,0,.28);border-radius:20px;padding:2px 8px;font-weight:500}
.upload-zone{border:2px dashed var(--gray-2);border-radius:var(--r);padding:11px 13px;text-align:center;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);background:rgba(245,240,232,.5);position:relative;margin-bottom:6px}
.upload-zone:hover{border-color:var(--gold);background:rgba(255,131,0,.04);transition-duration:var(--dur)}
.upload-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.upload-txt{font-size:11px;color:var(--sub)}
.upload-txt strong{color:var(--navy)}
.files-list{display:flex;flex-direction:column;gap:4px}
.file-item{display:flex;align-items:center;gap:7px;padding:5px 9px;background:#fff;border:1px solid var(--gray);border-radius:4px;font-size:11px}
.file-name{flex:1;color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-sz{color:var(--sub);flex-shrink:0}
.file-rm{display:inline-flex;align-items:center;background:none;border:none;cursor:pointer;color:var(--err);font-size:13px;padding:0 2px;flex-shrink:0;line-height:1}

/* RATING — selector de nivel de madurez
   Caja de la familia (estandar comun §8): fila de botones con etiqueta,
   padding 8x14, 12/700, radio var(--r), borde 1.5px var(--gray), activo en
   color solido con border-color:transparent. La misma que .estado-btn de
   assessment_normativo y .madurez-btn de assessment_iso27001_app, que ya
   coincidian entre si. Da igual que sean cuatro estados, cinco niveles o
   siete: es el mismo control y se reconoce.
   Antes eran cinco cuadrados de 28x28 con radio 4 y un numero dentro,
   alineados a la derecha dentro de una rejilla propia (.q-bottom) al pie de la
   tarjeta. El nombre `.star` venia de leerse como estrellas de valoracion, que
   es justo lo que no es. */
.rat-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-bottom:12px}
.rat-lbl{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--sub)}
.rat-btns{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.rat-btn{display:flex;align-items:center;gap:7px;padding:8px 14px;border:1.5px solid var(--gray);border-radius:var(--r);background:#fff;font-family:'Inter',sans-serif;font-weight:700;font-size:12px;color:var(--sub);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);user-select:none}
.rat-btn:hover:not(:disabled){border-color:var(--navy);color:var(--navy);background:var(--cream);transition-duration:var(--dur)}
.rat-btn.activo{border-color:transparent}
/* El numero hereda el color del boton y no lo fija: el nivel 3 es amarillo y
   ahi la tinta es oscura, no blanca (ver ratingInk() en js/app.js). */
.rat-btn-num{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:4px;background:var(--gray);color:var(--navy);font-size:11px;font-weight:800;flex-shrink:0;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.rat-btn.activo .rat-btn-num{background:rgba(255,255,255,.25);color:inherit}
.rat-btn-lbl{font-size:12px;font-weight:700;color:inherit;white-space:nowrap}
/* Con «No Aplica» puesto, los cinco niveles se atenuan y no responden. Estaba
   escrito en dos atributos style por boton; ahora lo dice la fila. */
.rat-btns.na-puesto .rat-btn:not(.na-btn){opacity:.3;pointer-events:none}
.rat-desc{font-size:10px;color:var(--sub);min-height:14px}
/* Chapa de solo lectura para el cliente, con los valores del .estado-badge de
   assessment_normativo y el .madurez-badge de assessment_iso27001_app. */
.rat-badge{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:var(--r);font-family:'Inter',sans-serif;font-weight:700;font-size:12px}
.rat-badge-vacio{background:var(--field-bg);border:1.5px solid var(--gray);color:var(--sub)}
/* Promedio del equipo bajo el selector */
.team-avg{font-size:10px;color:var(--sub);margin-top:2px}
.team-avg strong{color:var(--navy)}

/* NAV BUTTONS */
.nav-btns{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:'Inter',sans-serif;font-size:12px;font-weight:700;letter-spacing:.5px;padding:10px 18px;border-radius:var(--r);border:none;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn-prev{background:#fff;color:var(--navy);border:1.5px solid var(--gray)}
.btn-prev:hover:not(:disabled){border-color:var(--navy);transition-duration:var(--dur)}
.btn-next{background:var(--navy);color:#fff;box-shadow:0 4px 12px rgba(25,47,80,.25)}
.btn-next:hover:not(:disabled){background:var(--navy-mid);transition-duration:var(--dur)}
.btn-gold{background:var(--gold);color:#fff;box-shadow:0 4px 12px rgba(255,131,0,.28)}
.btn-gold:hover:not(:disabled){background:var(--gold-light);transition-duration:var(--dur)}
.btn-sm{padding:6px 12px;font-size:11px}
.btn-ghost{background:none;border:1.5px solid var(--gray);color:var(--sub)}
.btn-ghost:hover:not(:disabled){border-color:var(--sub);transition-duration:var(--dur)}
.btn-ghost-invert{background:none;border:1.5px solid rgba(255,255,255,.4);color:#fff}
.btn-ghost-invert:hover:not(:disabled){border-color:#fff;background:rgba(255,255,255,.08);transition-duration:var(--dur)}

/* SPIDER CHART */
.spider-wrap{background:#fff;border-radius:8px;box-shadow:0 4px 20px rgba(25,47,80,.09);margin-bottom:20px;overflow:hidden}
.spider-head{background:var(--navy);padding:16px 22px;display:flex;align-items:center;justify-content:space-between}
.spider-head-title{font-family:'Inter',sans-serif;font-size:15px;font-weight:800;color:#fff}
.spider-head-sub{font-size:11px;color:var(--on-navy-sub);margin-top:2px}
.spider-legend{display:flex;gap:20px;flex-wrap:wrap}
.spider-legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:rgba(255,255,255,.65)}
.spider-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.spider-body{padding:24px;display:flex;justify-content:center;align-items:center}
.spider-canvas-wrap{position:relative;width:100%;max-width:500px;aspect-ratio:1}

/* SCORE TABLE */
.score-table{width:100%;border-collapse:collapse;font-size:13px}
.score-table th{text-align:left;padding:9px 14px;font-family:'Inter',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--sub);border-bottom:2px solid var(--gray)}
.score-table td{padding:10px 14px;border-bottom:1px solid var(--gray);vertical-align:middle;transition:background-color var(--dur-fast) var(--ease-out)}
.score-table tr:last-child td{border-bottom:none}
@media(hover:hover){.score-table tr:hover td{background:var(--cream)}}
.score-pill{display:inline-flex;align-items:center;gap:5px;font-family:'Inter',sans-serif;font-weight:800;font-size:14px}
.score-bar-cell{width:120px}
.score-mini-bar{height:6px;border-radius:3px;background:var(--gray);overflow:hidden}
.score-mini-fill{height:100%;border-radius:3px;transition:width var(--dur-slow) var(--ease-out)}
.score-badge{display:inline-block;font-size:10px;font-weight:600;padding:2px 7px;border-radius:10px;letter-spacing:.5px}

.sum-tabs{display:flex;gap:0;border-bottom:2px solid var(--gray);margin-bottom:0}
.sum-tab{display:inline-flex;align-items:center;gap:7px;padding:11px 20px;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--sub);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.sum-tab:hover:not(:disabled){color:var(--navy);transition-duration:var(--dur)}
.sum-tab.active{color:var(--navy);border-bottom-color:var(--gold)}
.sum-tab-content{display:none;padding:0}
.sum-tab-content.active{display:block}
.sum-head{background:var(--navy);border-radius:8px 8px 0 0;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.sum-head h2{font-family:'Inter',sans-serif;font-size:21px;font-weight:800;color:#fff}
.sum-head p{color:var(--on-navy-sub);margin-top:4px;font-size:12px}
.sum-grid{display:grid;grid-template-columns:repeat(3,1fr);background:#fff}
.sum-card{padding:18px 14px;border-right:1px solid var(--gray);border-bottom:1px solid var(--gray);text-align:center}
.sum-card:nth-child(3n){border-right:none}
.sum-score{font-family:'Inter',sans-serif;font-size:30px;font-weight:800;line-height:1}
.sum-avg{font-size:11px;color:var(--sub);margin-top:2px}
.sum-dom{font-size:10px;font-weight:600;color:var(--sub);margin-top:4px;text-transform:uppercase;letter-spacing:.5px}
.sum-bar{height:3px;border-radius:2px;margin:6px auto 0;max-width:56px}
.sum-global{background:var(--navy);padding:18px 22px;display:flex;align-items:center;justify-content:space-between;border-radius:0 0 8px 8px}
.g-lbl{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;color:var(--on-navy-sub);letter-spacing:2px;text-transform:uppercase}
.g-score{font-family:'Inter',sans-serif;font-size:38px;font-weight:800;color:var(--gold);line-height:1}
.g-desc{font-size:11px;color:var(--on-navy-sub);margin-top:2px}
/* Tooltip propio e inmediato (sin el retraso del title nativo) para los promedios del pie */
.g-tip{position:relative;cursor:help}
.g-tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);right:0;width:max-content;max-width:260px;background:#fff;color:var(--text);border-radius:var(--r);padding:8px 11px;box-shadow:0 8px 24px rgba(0,0,0,.3);font-family:'Inter',sans-serif;font-size:12px;font-weight:400;line-height:1.45;text-align:left;white-space:normal;pointer-events:none;z-index:50;opacity:0;visibility:hidden}
.g-tip:hover::after{opacity:1;visibility:visible}

/* MODALES */
.modal-overlay{position:fixed;inset:0;background:rgba(25,47,80,.65);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-box{background:#fff;border-radius:10px;padding:32px;width:100%;max-width:420px;box-shadow:0 24px 80px rgba(0,0,0,.45)}
.modal-title{display:flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;font-size:17px;font-weight:800;color:var(--navy);margin-bottom:4px}
.modal-sub{font-size:12px;color:var(--sub);margin-bottom:20px}
/* Mismo idioma que .q-obl strong y .err-box strong: dentro de un parrafo
   secundario, lo que hay que reconocer va en navy. */
.modal-sub strong{color:var(--navy)}
.modal-err{display:flex;align-items:flex-start;gap:9px;background:var(--navy);border:1.5px solid var(--err-line);border-radius:var(--r);padding:11px 14px;font-size:12px;line-height:1.55;color:rgba(255,255,255,.85);margin-bottom:14px}
.modal-err .ic{color:var(--err-line);margin-top:2px}
.modal-ok{background:var(--ok-soft);border:1px solid rgba(46,204,113,.4);border-radius:var(--r);padding:10px 13px;font-size:12px;color:var(--ok);margin-bottom:12px}
.modal-cred{background:var(--cream);border:1px solid var(--gray);border-radius:6px;padding:16px;margin-bottom:16px}
.modal-cred-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:13px;border-bottom:1px solid var(--gray)}
.modal-cred-row:last-child{border-bottom:none}
.modal-cred-lbl{color:var(--sub);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.modal-cred-val{font-family:monospace;font-size:14px;font-weight:700;color:var(--navy);background:#fff;padding:3px 8px;border-radius:4px;border:1px solid var(--gray)}
.modal-warn{display:flex;align-items:flex-start;gap:7px;background:rgba(230,126,34,.08);border:1px solid rgba(230,126,34,.3);border-radius:4px;padding:9px 12px;font-size:11px;color:var(--warn-ink);margin-bottom:16px}
.modal-warn .ic{margin-top:1px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.btn-danger{background:var(--err-fill);color:#fff;border:none;font-family:'Inter',sans-serif;font-weight:700;font-size:12px;padding:9px 16px;border-radius:var(--r);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn-danger:hover:not(:disabled){background:var(--err);transition-duration:var(--dur)}

/* ADMIN: panel de usuarios */
.adm-newbox{background:var(--cream);border:1px solid var(--gray);border-radius:6px;padding:14px 16px}
.adm-newbox-title{font-family:'Inter',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--sub);margin-bottom:10px}
.adm-newgrid{display:grid;grid-template-columns:1.4fr 1fr .9fr auto;gap:10px;align-items:end}
.adm-newgrid .fl input,.adm-newgrid .adm-select,.adm-newgrid .btn{height:42px}
.adm-newgrid .fl{margin-bottom:0}
.adm-select{width:100%;padding:0 30px 0 13px;border:1.5px solid var(--field-border);border-radius:var(--r);font-family:'Inter',sans-serif;font-size:14px;color:var(--text);background-color:var(--field-bg);-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235a6070'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.adm-select:hover:not(:focus):not(:disabled){border-color:var(--gray-2)}
.adm-select:focus{outline:none;border-color:var(--field-focus);background:#fff}
.adm-row{padding:11px 15px;border-bottom:1px solid var(--gray)}
.adm-row:last-child{border-bottom:none}
.adm-row-off{background:var(--field-bg);opacity:.72}
.adm-head-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adm-name{font-weight:700;font-size:13px;color:var(--navy)}
.adm-user{font-family:monospace;font-size:11px;color:var(--sub);background:var(--cream-2);padding:1px 6px;border-radius:3px}
.adm-tag{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:2px 7px;border-radius:2px}
.adm-tag-admin{background:rgba(25,47,80,.09);color:var(--navy)}
.adm-tag-auditor{background:rgba(255,131,0,.14);color:var(--warn-ink)}
.adm-tag-off{background:rgba(231,76,60,.1);color:var(--err)}
.adm-acts{margin-left:auto;display:flex;gap:6px;flex-shrink:0}
.adm-asig{margin-top:9px;padding-top:9px;border-top:1px dashed var(--gray)}
.adm-asig-title{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--sub);margin-bottom:6px}
.adm-chips{display:flex;flex-wrap:wrap;gap:6px}
.adm-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;border:1.5px solid var(--gray);border-radius:20px;padding:3px 10px;cursor:pointer;user-select:none;background:#fff;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.adm-chip:hover:not(:disabled){border-color:var(--gold);transition-duration:var(--dur)}
.adm-chip input{margin:0;cursor:pointer}
.adm-chip-on{background:rgba(255,131,0,.1);border-color:var(--gold);color:var(--navy);font-weight:600}
.adm-empty{padding:18px;text-align:center;color:var(--sub);font-size:12px}
@media(max-width:640px){.adm-newgrid{grid-template-columns:1fr}}

/* VERSION BADGE */
.ver-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(255,131,0,.15);border:1px solid rgba(255,131,0,.3);border-radius:20px;padding:3px 10px;font-size:11px;color:var(--accent-ink);font-family:'Inter',sans-serif;font-weight:700;letter-spacing:.5px}
.btn-nueva-version{display:inline-flex;align-items:center;gap:6px;background:rgba(255,131,0,.12);border:1.5px solid rgba(255,131,0,.35);color:var(--accent-ink);font-family:'Inter',sans-serif;font-weight:700;font-size:11px;padding:5px 12px;border-radius:4px;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);white-space:nowrap;flex-shrink:0}
.btn-nueva-version:hover:not(:disabled){background:var(--gold);color:var(--navy);transition-duration:var(--dur)}
.btn-ver-historial{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.6);font-size:11px;padding:4px 9px;border-radius:4px;cursor:pointer;font-family:'Inter',sans-serif;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn-ver-historial:hover:not(:disabled){background:rgba(255,255,255,.14);color:#fff;transition-duration:var(--dur)}
/* El historial de versiones ya no la usa: va en la .modal-box de 420, como en
   las otras dos apps. Queda para el panel de usuarios y el modal del informe.
   Su valor (640) y su nombre siguen sin ser los de la escala de la familia
   —420/680/760 con .modal-box-lg—; eso esta anotado en el TODO. */
.modal-lg{max-width:640px}

/* MODAL INFORME WORD */
.inf-secs{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.inf-chk{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border:1px solid transparent;border-radius:6px;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out)}
.inf-chk:hover{background:var(--cream)}
.inf-chk input[type=checkbox]{width:16px;height:16px;margin-top:1px;flex-shrink:0;cursor:pointer;accent-color:var(--navy)}
.inf-chk span{display:flex;flex-direction:column;gap:1px}
.inf-chk strong{font-size:13px;font-weight:600;color:var(--text)}
.inf-chk em{font-size:11px;font-style:normal;color:var(--sub);line-height:1.4}
.inf-sub-opts{display:flex;flex-direction:column;gap:2px;margin:0 0 4px 22px;padding-left:12px;border-left:2px solid var(--gray)}
.inf-chk-sm{padding:6px 10px}
.inf-chk-sm strong{font-size:12px;font-weight:500}
.inf-nota{margin-top:14px;background:rgba(255,131,0,.06);border:1px solid rgba(255,131,0,.28);border-radius:var(--r);padding:10px 13px;font-size:11px;line-height:1.5;color:var(--sub)}
.hist-row{padding:12px 16px;border-bottom:1px solid var(--gray);display:flex;align-items:center;gap:14px}
.hist-row:last-child{border-bottom:none}
.hist-active{background:rgba(255,131,0,.06)}
.hist-name{font-weight:700;font-size:13px;color:var(--navy)}
.hist-date{font-size:11px;color:var(--sub);margin-top:2px}
.hist-score{font-family:'Inter',sans-serif;font-weight:800;font-size:18px;margin-left:auto;flex-shrink:0}
/* Evolution chart */
.evol-wrap{padding:20px}
.evol-toggle{display:inline-flex;align-items:center;gap:6px;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:.5px;padding:6px 14px;border-radius:4px;border:1.5px solid var(--gray);background:#fff;color:var(--sub);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.evol-toggle:hover:not(:disabled){border-color:var(--navy);color:var(--navy);transition-duration:var(--dur)}
.evol-toggle-active{background:var(--navy);border-color:var(--navy);color:#fff}
/* NO APLICA — modificador de .rat-btn, no una caja aparte.
   Conserva boton propio porque tiene comportamiento propio: es la unica de las
   tres apps que exige justificacion escrita para marcarlo (saveAnswer lo
   rechaza sin comentario) y atenua los seis niveles. Lo que deja de tener es
   otro tamano, otra tipografia y otro radio que sus vecinos. */
.na-btn.na-active{background:var(--na);border-color:var(--na);color:var(--na-ink)}
.na-note{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--err);margin-top:4px}
.err-box{display:flex;align-items:flex-start;gap:9px;background:var(--navy);border:1.5px solid var(--err-line);border-radius:var(--r);padding:11px 14px;font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.82)}
.err-box .ic{color:var(--err-line);margin-top:2px}
.err-box strong{color:#fff;font-weight:700}
.err-box-lg{padding:19px 22px;font-size:12.5px;margin-bottom:20px}
.err-box-note{display:block;margin-top:7px;color:rgba(255,255,255,.65);font-size:11px}
.err-box-acts{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.up-err{margin-top:8px}
.save-err{margin-bottom:12px}

/* ── Esqueleto de carga ──────────────────────────────────
   Ocupa el sitio del contenido que viene, para que no haya ni pantalla en
   blanco ni salto cuando llega. Es decoración: aria-hidden, y a quien usa un
   lector de pantalla se le avisa por la región viva (.sk-estado), no por
   veinte cajas. Copiado del bloque .sk-* de Control-de-Horas, que es la
   implementación de referencia de la familia: no cambiar tiempos ni tamaños. */
.sk{pointer-events:none}
.js-cargando{position:relative}
.sk-caja{background:var(--white);border:1px solid var(--gray);border-radius:var(--r);padding:18px 20px;overflow:hidden}
.sk-linea{height:11px;border-radius:4px;margin-bottom:12px;background:linear-gradient(90deg,var(--cream-2) 25%,var(--gray) 37%,var(--cream-2) 63%);background-size:400% 100%;animation:sk-brillo 1.4s ease-in-out infinite}
.sk-linea:last-child{margin-bottom:0}
.sk-linea.es-titulo{height:15px;margin-bottom:18px;background:linear-gradient(90deg,var(--gray) 25%,var(--gray-2) 37%,var(--gray) 63%);background-size:400% 100%}
@keyframes sk-brillo{from{background-position:100% 50%}to{background-position:0 50%}}
/* Con el movimiento reducido no se anima, pero tampoco se deja el degradado
   quieto: se vería como líneas a medio pintar. */
@media(prefers-reduced-motion:reduce){.sk-linea,.sk-linea.es-titulo{background:var(--gray);animation:none}}
/* Variante para las filas de una lista que ya vive dentro de una tarjeta
   blanca (#cl-rows, #ad-list, #hist-list, la barra lateral): con el borde y el
   radio de .sk-caja se verían tarjetas dentro de la tarjeta. Solo cambia el
   aspecto; la altura la sigue fijando el JS. */
.sk-caja.es-fila{background:transparent;border:0;border-bottom:1px solid var(--gray);border-radius:0;padding:12px 20px}
.sk-caja.es-fila:last-child{border-bottom:0}
.sk-caja.es-fila .sk-linea{height:9px;margin-bottom:6px}
.sk-caja.es-fila .sk-linea.es-titulo{height:13px;margin-bottom:7px}
/* Aviso para lectores de pantalla. No ocupa nada en pantalla. */
.sk-estado{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ══════════════════════════════════════════════════════════
   PULIDO VISUAL DE LA FAMILIA (estándar común §13.7, oct-2026)
   Solo presentación: foco, pulsado, deshabilitado, tipografía, campos,
   modales y lo propio de esta app. Nada aquí cambia qué hace un control.
   ══════════════════════════════════════════════════════════ */

/* Foco de teclado: anillo navy sobre claro, dorado claro sobre navy. Los
   campos de texto conservan su borde de foco y quedan fuera. */
:where(a,button,[role=button],summary,[tabindex]:not(input):not(select):not(textarea),input[type=checkbox],input[type=radio],input[type=range]):focus-visible{outline:2px solid var(--navy);outline-offset:2px}
:where(.app-header,.cf-head,.dom-head,.online-tooltip,.sum-head,.cl-list-head,.err-box) :focus-visible{outline-color:var(--gold-light)}

/* Pulsado y deshabilitado. */
:where(button,.btn,[role=button]):active:not(:disabled){transform:translateY(1px)}
:where(button.btn,button.btn-primary,button.btn-danger,button.rat-btn):disabled{opacity:.5;cursor:not-allowed;box-shadow:none;pointer-events:auto}

/* Cifras que cambian: ancho fijo para que no bailen. */
.prog-lbl,.nav-count,.dom-cnt,.g-score,.score-table,.hist-date,.hist-score,.colab-bar .when,.cl-banner-rut,.score-badge,
.q-num,.rat-btn-num,.team-avg,.score-pill,.sum-score,.sum-avg,.file-sz{font-variant-numeric:tabular-nums}
/* Títulos repartidos en líneas parejas; párrafos sin viudas. */
.l-title,.cf-head-title,.dom-name,.modal-title,.cl-banner-name,.sum-head h2,.spider-head-title{text-wrap:balance}
.q-text,.l-sub,.modal-sub,.dom-sub,.empty-state,.inf-chk em,.inf-nota,.err-box,.modal-warn,
.q-obl,.ley-body,.team-comments,.cl-row-det,.rat-desc{text-wrap:pretty}

/* Campos y selección. */
input,textarea{caret-color:var(--navy)}
::selection{background:rgba(255,131,0,.22);color:var(--text)}

/* Modales: entran con un fundido corto. El cierre sigue siendo instantáneo. */
@keyframes m-funde{from{opacity:0}}
@keyframes m-aparece{from{opacity:0;transform:translateY(8px) scale(.98)}}
.modal-overlay{animation:m-funde var(--dur) var(--ease-out)}
.modal-box{animation:m-aparece var(--dur) var(--ease-out);overscroll-behavior:contain}

/* Promedio del equipo bajo el puntaje global (antes, estilo en línea). */
.g-team{font-size:12px;color:var(--on-navy-sub);margin-top:2px}

/* El contenido que reemplaza a un esqueleto entra fundido, no de golpe. */
@keyframes sk-revela{from{opacity:0}}
.sk-revela{animation:sk-revela 200ms var(--ease-out)}

/* Controles de texto chico: área táctil ampliada sin mover el diseño. La ×
   de los archivos va a 8 px y no a 12: las filas están a 29 px y con 12 el
   área de una invadía la × de la fila vecina. */
@media(pointer:coarse){.file-rm,.ley-btn,.team-comments-title button{position:relative}.file-rm::after,.ley-btn::after,.team-comments-title button::after{content:'';position:absolute;inset:-12px}.file-rm::after{inset:-8px}}

/* Tablas de resumen y evolución: cifras alineadas a la derecha y píldoras
   de puntaje sin partir. */
#evol-table td:not(:first-child),#evol-table th:not(:first-child){text-align:right}
.score-table td:has(.score-pill){white-space:nowrap}

/* 800 y no 780: habia una franja de 20 px donde esta app seguia en dos
   columnas y las otras dos ya no. */
@media(max-width:800px){
  .app-layout{grid-template-columns:1fr}
  .sidebar{position:static;display:flex;overflow-x:auto;padding:0}
  .sb-title{display:none}
  .nav-item{white-space:nowrap;border-left:none;border-bottom:3px solid transparent}
  .nav-item.active{border-bottom-color:var(--gold);border-left:none}
  .sum-grid{grid-template-columns:repeat(2,1fr)}
  .cf-grid{grid-template-columns:1fr}
  .hdr-right{gap:8px}
}

/* ══════════════════════════════════════════════════════════
   IMPRESIÓN (estándar común §7, patrón 14 — de `rat`, la única de la suite
   que lo tenía)

   El problema medido: esta app no declaraba una sola regla de impresión, y el
   informe Word no cubre todos los casos —un auditor que quiere el dominio que
   tiene delante, o el Resumen, o la ficha de un cliente, imprime la pantalla—.
   Lo que salía por la impresora era la cabecera navy a sangre, la barra
   lateral de 210 px ocupando una columna entera, los botones de navegación, el
   buscador y las zonas de carga de archivos; el spinner del #loader y el aviso
   (.toasts) podían aparecer encima; y un modal abierto se llevaba la hoja
   entera con su velo navy al 65 %, dejando el contenido debajo sin imprimir.

   El criterio es el de `rat`: se quita todo lo que sólo sirve para operar, se
   aplana el chasis, y lo que queda se imprime sobre blanco sin sombras. No hay
   ningún color nuevo: el negro y el blanco de papel no son color de marca.
   ══════════════════════════════════════════════════════════ */
@media print{
  /* Papel: fondo blanco de verdad y tinta negra. El crema de --cream y el
     texto a #1a1a2e gastan tóner y bajan el contraste en gris. */
  body{background:#fff;color:#000}

  /* Navegación, acciones y avisos efímeros no existen en papel. */
  #loader,.toasts,
  .app-header,
  .sidebar,
  .nav-btns,
  .cl-search-wrap,
  .upload-zone,
  .btn,.btn-primary,.btn-logout,.btn-edit-cl,
  .cf-actions,
  .cl-act,.cl-row-sel,
  .user-menu,.online-wrap,
  .no-print{display:none!important}

  /* Un modal abierto se lleva la hoja entera con su velo y deja fuera lo que
     hay debajo, que es lo que se quería imprimir. Los siete de esta app se
     cierran por clic fuera, no por Escape, así que basta con no imprimirlos. */
  .modal-overlay{display:none!important}

  /* El chasis se aplana: sin rejilla de dos columnas, sin ancho máximo y sin
     márgenes, que en papel los pone la propia página. */
  .app-layout,.cl-page-wrap,.cl-page{display:block;max-width:none;margin:0;padding:0}

  /* Las tarjetas se imprimen con un filete y sin sombra, y no se parten entre
     dos hojas. Es la regla que más se nota: una .q-card cortada por la mitad
     deja el enunciado en una página y la respuesta en la siguiente. */
  .cl-list,.cf-card,.spider-wrap,.sum-grid,.q-card,.err-box{
    box-shadow:none;
    break-inside:avoid;
    page-break-inside:avoid;
  }

  /* El enunciado de un control no se queda solo al pie de una hoja. */
  .cf-sec,.dom-head,.q-num,.q-text{break-after:avoid;page-break-after:avoid}
  tr{break-inside:avoid;page-break-inside:avoid}

  /* Los esqueletos son un estado de carga: en papel serían rayas grises sin
     significado. Y la animación no tiene sentido sobre una hoja. */
  .sk,.sk-caja,.sk-linea{display:none!important}

  /* Lo que en pantalla se recorta y se recorre con scroll, en papel no tiene
     scroll: se recortaba contra el borde de la hoja y se perdia. */
  .cl-list,.cf-card,.spider-wrap{overflow:visible!important}
  .score-table{width:100%}
  canvas,img{max-width:100%;height:auto}
}

/* Movimiento reducido (bloque común de la familia, §13.7): sin transiciones
   ni entradas; el spinner del loader se frena pero no se para, porque avisa
   de que algo está cargando. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;scroll-behavior:auto!important}
  .online-badge .dot,.modal-overlay,.modal-box,.sk-revela{animation:none}
  #loader .spin{animation-duration:1.6s}
}