/* ===========================================================================
   Monarch · hoja de estilos del portal
   ---------------------------------------------------------------------------
   Escrita a mano, sin Tailwind por CDN, y por dos motivos que apuntan al mismo
   lado: el CDN de Tailwind exige estilos en línea (obliga a debilitar la CSP) y
   es código de terceros ejecutándose en la sesión de los usuarios.

   Disciplina de color: el gradiente de ROCE (las cuatro dimensiones del método, no un
   adorno de marca) se gasta en TRES lugares y en ninguno más — la espina de progreso,
   el arco del puntaje y el shimmer de "evaluando". Fuera de ahí: blanco, hairlines y
   el slate --ink (#303E48).

   Todas las clases llevan prefijo .cop- : una clase propia llamada .grid ya
   chocó una vez con una utilidad de framework y descuadró las tablas por días.
   =========================================================================== */

/* --- Tipografía servida desde el propio dominio ---------------------------
   Nada de fonts.googleapis.com: la CSP queda en font-src 'self' y no hay un
   tercero en la ruta crítica. */
@font-face{font-family:'Sora';font-style:normal;font-weight:600 700;font-display:swap;
  src:url(fonts/sora-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:600 700;font-display:swap;
  src:url(fonts/sora-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/figtree-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/jbmono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/jbmono-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --- Tokens ---------------------------------------------------------------
   Declarados como "R G B" sin rgb() para poder componer opacidad con
   rgb(var(--ink) / .6). Los nombres semánticos están separados de los crudos:
   agregar tema oscuro después es redefinir los semánticos, no reescribir. */
:root{
  --ink:48 62 72;          /* #303E48 · el slate de la marca Monarch */
  --paper:247 248 252;     /* blanco frío */
  --surface:255 255 255;
  --line:230 232 240;
  --c1:42 201 232;         /* cian    ┐ el gradiente de ROCE */
  --c2:59 110 246;         /* azul    │ */
  --c3:139 92 246;         /* violeta │ */
  --c4:232 90 168;         /* magenta ┘ */
  --ok:23 166 122;
  --warn:232 163 59;
  --bad:229 72 77;

  --t-fuerte:rgb(var(--ink));
  --t-medio:rgb(var(--ink) / .68);
  --t-suave:rgb(var(--ink) / .48);
  --t-tenue:rgb(var(--ink) / .32);
  --borde:rgb(var(--line));
  --borde-fuerte:rgb(var(--ink) / .16);

  --grad:linear-gradient(100deg,rgb(var(--c1)),rgb(var(--c2)) 34%,rgb(var(--c3)) 68%,rgb(var(--c4)));

  --display:'Sora',var(--cuerpo);
  --cuerpo:'Segoe UI Variable Display','Segoe UI','Figtree',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --r-s:8px; --r-m:12px; --r-l:18px; --r-xl:26px;
  --sombra-1:0 1px 2px rgb(var(--ink) / .05), 0 1px 3px rgb(var(--ink) / .04);
  --sombra-2:0 2px 4px rgb(var(--ink) / .04), 0 12px 28px rgb(var(--ink) / .07);
  --sombra-3:0 8px 20px rgb(var(--ink) / .09), 0 32px 64px rgb(var(--ink) / .10);

  --ancho:1080px;
  --curva:cubic-bezier(.22,.61,.36,1);
  --resorte:cubic-bezier(.34,1.42,.64,1);
}

/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--cuerpo);
  font-size:16px; line-height:1.55;
  color:var(--t-fuerte);
  background:rgb(var(--paper));
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:rgb(var(--c2));text-decoration:none}
a:hover{text-decoration:underline}

/* Foco de teclado visible en TODO lo interactivo. No es un extra, es el piso. */
:focus-visible{
  outline:2px solid rgb(var(--c2));
  outline-offset:2px;
  border-radius:4px;
}
:focus:not(:focus-visible){outline:none}

/* --- Tipografía ----------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.12}
h1{font-size:clamp(1.9rem,4.4vw,2.9rem)}
h2{font-size:clamp(1.35rem,2.7vw,1.85rem);letter-spacing:-.025em}
h3{font-size:1.1rem;font-weight:600;letter-spacing:-.02em}
h4{font-size:.95rem;font-weight:600;letter-spacing:-.01em}

.cop-eyebrow{
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--t-suave);
}
.cop-bajada{color:var(--t-medio);font-size:1.02rem;max-width:62ch}
.cop-fina{font-size:.85rem;color:var(--t-suave)}
.cop-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.cop-cifra{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* --- Estructura ----------------------------------------------------------- */
.cop-shell{min-height:100vh;display:flex;flex-direction:column}
.cop-ancho{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:24px}
.cop-main{flex:1;padding-block:36px 72px}

/* Barra superior */
.cop-top{
  position:sticky; top:0; z-index:40;
  background:rgb(var(--surface) / .86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--borde);
}
.cop-top-in{display:flex;align-items:center;gap:16px;height:60px}
.cop-marca{display:flex;align-items:center;gap:10px;color:var(--t-fuerte);font-weight:600}
.cop-marca:hover{text-decoration:none}
.cop-marca-sub{font-size:.72rem;color:var(--t-suave);font-weight:400;letter-spacing:0;
  padding-left:10px;margin-left:2px;border-left:1px solid var(--borde)}
.cop-nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.cop-nav a{
  padding:8px 12px;border-radius:var(--r-s);font-size:.88rem;font-weight:500;
  color:var(--t-medio);min-height:38px;display:inline-flex;align-items:center;
}
.cop-nav a:hover{background:rgb(var(--ink) / .05);color:var(--t-fuerte);text-decoration:none}
.cop-nav a[aria-current="page"]{color:var(--t-fuerte);background:rgb(var(--ink) / .06)}

.cop-pie{
  border-top:1px solid var(--borde); padding-block:24px;
  font-size:.8rem;color:var(--t-suave);
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
}

/* --- Logo: tamaño del wordmark (imagen), altura fija y ancho proporcional -- */
.cop-logo{height:19px;width:auto;flex:none}

/* --- Tarjetas ------------------------------------------------------------- */
.cop-card{
  background:rgb(var(--surface));
  border:1px solid var(--borde);
  border-radius:var(--r-l);
  box-shadow:var(--sombra-1);
}
.cop-card-p{padding:24px}
.cop-panel{background:rgb(var(--surface));border:1px solid var(--borde);border-radius:var(--r-l);padding:28px;box-shadow:var(--sombra-1)}

/* --- Botones -------------------------------------------------------------- */
.cop-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px; padding:0 20px;           /* 44px: tap target mínimo */
  border-radius:999px; border:1px solid transparent;
  font-size:.92rem;font-weight:600;letter-spacing:-.01em;
  cursor:pointer;background:transparent;
  transition:background .16s var(--curva),border-color .16s var(--curva),
             color .16s var(--curva),transform .16s var(--curva),box-shadow .16s var(--curva);
}
.cop-btn:hover{text-decoration:none}
.cop-btn:active{transform:translateY(1px)}
.cop-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

.cop-btn-1{background:rgb(var(--ink));color:rgb(var(--surface));box-shadow:var(--sombra-1)}
.cop-btn-1:hover:not(:disabled){background:rgb(var(--ink) / .86);box-shadow:var(--sombra-2)}
.cop-btn-2{background:rgb(var(--surface));color:var(--t-fuerte);border-color:var(--borde-fuerte)}
.cop-btn-2:hover:not(:disabled){background:rgb(var(--ink) / .04);border-color:rgb(var(--ink) / .28)}
.cop-btn-3{background:transparent;color:var(--t-medio);padding-inline:14px}
.cop-btn-3:hover:not(:disabled){background:rgb(var(--ink) / .05);color:var(--t-fuerte)}
.cop-btn-mal{background:rgb(var(--bad));color:#fff}
.cop-btn-mal:hover:not(:disabled){background:rgb(var(--bad) / .86)}
.cop-btn-s{min-height:34px;padding:0 13px;font-size:.82rem}
.cop-btn-ancho{width:100%}

/* --- Campos --------------------------------------------------------------- */
.cop-campo{display:block;margin-bottom:16px}
.cop-lab{display:block;font-size:.82rem;font-weight:600;margin-bottom:6px;color:var(--t-medio)}
.cop-in,.cop-ta,.cop-sel{
  width:100%; min-height:44px; padding:11px 14px;
  border:1px solid var(--borde-fuerte); border-radius:var(--r-m);
  background:rgb(var(--surface)); color:var(--t-fuerte); font-size:1rem;
  transition:border-color .16s var(--curva), box-shadow .16s var(--curva);
}
.cop-in:hover,.cop-ta:hover,.cop-sel:hover{border-color:rgb(var(--ink) / .28)}
.cop-in:focus,.cop-ta:focus,.cop-sel:focus{
  outline:none;border-color:rgb(var(--c2));
  box-shadow:0 0 0 3px rgb(var(--c2) / .16);
}
.cop-ta{min-height:120px;resize:vertical;line-height:1.6}
.cop-ta-mono{font-family:var(--mono);font-size:.92rem;line-height:1.68}
.cop-sel{appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2314121A' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:15px}
.cop-ayuda{font-size:.8rem;color:var(--t-suave);margin-top:5px}
.cop-contador{font-family:var(--mono);font-size:.75rem;color:var(--t-tenue)}
.cop-contador.cop-tope{color:rgb(var(--bad))}

/* --- Insignias y mensajes de estado --------------------------------------- */
/* Los colores de estado aparecen SOLO acá. En ningún otro lado del portal. */
.cop-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:999px;
  font-size:.72rem;font-weight:600;letter-spacing:.01em;
  border:1px solid transparent;white-space:nowrap;
}
.cop-badge-ok{background:rgb(var(--ok) / .11);color:rgb(var(--ok) / .95);border-color:rgb(var(--ok) / .22)}
.cop-badge-curso{background:rgb(var(--c2) / .1);color:rgb(var(--c2) / .95);border-color:rgb(var(--c2) / .22)}
.cop-badge-libre{background:rgb(var(--ink) / .05);color:var(--t-medio);border-color:var(--borde)}
.cop-badge-bloq{background:rgb(var(--ink) / .04);color:var(--t-tenue);border-color:var(--borde)}
.cop-badge-warn{background:rgb(var(--warn) / .13);color:rgb(var(--warn) / .95);border-color:rgb(var(--warn) / .26)}
.cop-badge-mal{background:rgb(var(--bad) / .1);color:rgb(var(--bad) / .95);border-color:rgb(var(--bad) / .22)}

.cop-msg{
  padding:12px 16px;border-radius:var(--r-m);font-size:.9rem;
  border:1px solid transparent;margin-bottom:16px;
}
.cop-msg-mal{background:rgb(var(--bad) / .07);border-color:rgb(var(--bad) / .2);color:rgb(var(--bad) / .95)}
.cop-msg-ok{background:rgb(var(--ok) / .08);border-color:rgb(var(--ok) / .2);color:rgb(var(--ok) / .95)}
.cop-msg-warn{background:rgb(var(--warn) / .09);border-color:rgb(var(--warn) / .24);color:rgb(var(--warn) / .95)}
.cop-msg-info{background:rgb(var(--ink) / .04);border-color:var(--borde);color:var(--t-medio)}
.cop-msg[hidden]{display:none}

/* ===========================================================================
   LUGAR 1 DEL GRADIENTE — la espina de progreso de la ruta de aprendizaje
   =========================================================================== */
.cop-ruta{position:relative;padding-left:56px}
.cop-espina{
  position:absolute; left:19px; top:12px; bottom:12px; width:3px;
  border-radius:2px; background:rgb(var(--line)); overflow:hidden;
}
.cop-espina::after{
  content:''; position:absolute; inset:0;
  background:var(--grad);
  transform-origin:top;
  transform:scaleY(var(--avance,0));
  transition:transform .9s var(--curva);
}
/* LUGAR 3 DEL GRADIENTE — el shimmer de "evaluando".
   Es la única animación en bucle de todo el portal. */
.cop-espina.cop-espina-viva::after{
  transform:scaleY(1);
  background:linear-gradient(180deg,
    rgb(var(--c1)),rgb(var(--c2)),rgb(var(--c3)),rgb(var(--c4)),rgb(var(--c1)));
  background-size:100% 220%;
  animation:cop-correr 1.9s linear infinite;
}
@keyframes cop-correr{from{background-position:0 -110%}to{background-position:0 110%}}

.cop-hito{position:relative;margin-bottom:18px}
.cop-hito-n{
  position:absolute; left:-56px; top:22px;
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:rgb(var(--surface)); border:1px solid var(--borde);
  font-family:var(--mono);font-size:.85rem;font-weight:700;color:var(--t-suave);
  box-shadow:var(--sombra-1); z-index:1;
}
.cop-hito.cop-hito-hecho .cop-hito-n{border-color:rgb(var(--ok) / .4);color:rgb(var(--ok));
  /* El tinte va CAPADO sobre la superficie opaca, no en su lugar: un fondo al 7% deja ver
     la espina a través del círculo y el número parece atravesado por la línea. */
  background:linear-gradient(rgb(var(--ok) / .07),rgb(var(--ok) / .07)),rgb(var(--surface))}
.cop-hito.cop-hito-curso .cop-hito-n{border-color:rgb(var(--c2) / .45);color:rgb(var(--c2))}
.cop-hito.cop-hito-bloq .cop-hito-n{color:var(--t-tenue)}

/* Tarjeta de módulo */
.cop-mod{
  display:block; padding:22px 24px; color:inherit;
  background:rgb(var(--surface)); border:1px solid var(--borde);
  border-radius:var(--r-l); box-shadow:var(--sombra-1);
  transition:transform .22s var(--curva),box-shadow .22s var(--curva),border-color .22s var(--curva);
}
a.cop-mod:hover{
  text-decoration:none; transform:translateY(-2px);
  box-shadow:var(--sombra-2); border-color:rgb(var(--ink) / .16);
}
.cop-mod-bloq{opacity:.6;cursor:not-allowed}
.cop-mod-cab{display:flex;align-items:flex-start;gap:14px;margin-bottom:8px}
.cop-mod-ico{font-size:1.5rem;line-height:1.2;flex:none}
.cop-mod-tit{font-family:var(--display);font-size:1.16rem;font-weight:700;letter-spacing:-.028em}
.cop-mod-txt{color:var(--t-medio);font-size:.93rem;max-width:58ch}
.cop-mod-pie{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.cop-mod-meta{font-family:var(--mono);font-size:.75rem;color:var(--t-tenue)}

/* Entrada escalonada por la espina: 60 ms entre tarjetas. */
.cop-entra{opacity:0;transform:translateY(14px);animation:cop-sube .5s var(--curva) forwards}
@keyframes cop-sube{to{opacity:1;transform:none}}

/* ===========================================================================
   LUGAR 2 DEL GRADIENTE — el arco del puntaje
   =========================================================================== */
.cop-arco{position:relative;width:180px;height:180px;flex:none}
.cop-arco svg{width:100%;height:100%;transform:rotate(-90deg)}
.cop-arco-pista{fill:none;stroke:rgb(var(--line));stroke-width:11;stroke-linecap:round}
.cop-arco-val{fill:none;stroke:url(#copGrad);stroke-width:11;stroke-linecap:round;
  transition:stroke-dashoffset 1.1s var(--curva)}
.cop-arco-c{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
}
.cop-arco-n{font-family:var(--mono);font-size:2.7rem;font-weight:700;letter-spacing:-.05em;line-height:1}
.cop-arco-d{font-size:.72rem;color:var(--t-suave);letter-spacing:.1em;text-transform:uppercase;margin-top:4px;font-family:var(--mono)}

/* --- Barras por dimensión ------------------------------------------------- */
.cop-dims{display:grid;gap:14px}
.cop-dim-cab{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.cop-dim-letra{
  font-family:var(--mono);font-size:.7rem;font-weight:700;
  width:20px;height:20px;border-radius:5px;display:grid;place-items:center;color:#fff;flex:none;
}
.cop-dim-nom{font-size:.88rem;font-weight:600}
.cop-dim-val{margin-left:auto;font-family:var(--mono);font-size:.88rem;font-weight:700;font-variant-numeric:tabular-nums}
.cop-barra{height:7px;border-radius:4px;background:rgb(var(--line));overflow:hidden}
.cop-barra-i{
  height:100%;border-radius:4px;width:0;
  transition:width .7s var(--resorte);   /* resorte leve: llega y asienta */
}
/* La clase de dimensión puede ir en el contenedor (resultado del evaluador) o en la propia
   pastilla de la letra (guía): las dos formas tienen que pintar igual. */
.cop-dim-rol .cop-dim-letra,.cop-dim-letra.cop-dim-rol,.cop-dim-rol .cop-barra-i{background:rgb(var(--c1))}
.cop-dim-obj .cop-dim-letra,.cop-dim-letra.cop-dim-obj,.cop-dim-obj .cop-barra-i{background:rgb(var(--c2))}
.cop-dim-ctx .cop-dim-letra,.cop-dim-letra.cop-dim-ctx,.cop-dim-ctx .cop-barra-i{background:rgb(var(--c3))}
.cop-dim-est .cop-dim-letra,.cop-dim-letra.cop-dim-est,.cop-dim-est .cop-barra-i{background:rgb(var(--c4))}
.cop-dim-com{font-size:.85rem;color:var(--t-medio);margin-top:6px}
.cop-dim-sug{
  font-size:.85rem;color:var(--t-medio);margin-top:8px;
  padding:10px 13px;border-radius:var(--r-s);
  background:rgb(var(--ink) / .035);border-left:2px solid var(--borde-fuerte);
}

/* ===========================================================================
   EL ELEMENTO FIRMA — la anatomía del prompt
   ---------------------------------------------------------------------------
   Un puntaje no enseña. Lo que enseña es VER qué le falta a tu prompt: el texto
   que la persona escribió se vuelve a pintar resaltando qué fragmento cumple
   cada dimensión, y lo que no cumple nada queda en gris. El hueco se ve.

   ⚠️ Se construye SIEMPRE con nodos del DOM (createTextNode / textContent),
   nunca concatenando HTML. Ver assets/evaluador.js.
   =========================================================================== */
.cop-anatomia{
  font-family:var(--mono); font-size:.94rem; line-height:2.05;
  white-space:pre-wrap; word-break:break-word;
  color:rgb(var(--ink) / .34);            /* lo que no cumple ninguna dimensión: gris */
  padding:22px; border-radius:var(--r-m);
  background:rgb(var(--ink) / .025); border:1px solid var(--borde);
}
.cop-an{
  color:var(--t-fuerte); border-radius:4px;
  padding:2px 3px; margin:0 -1px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
  opacity:0; transition:opacity .45s var(--curva), background-color .45s var(--curva);
  background-color:transparent;
}
.cop-an.cop-an-on{opacity:1}
.cop-an-rol.cop-an-on{background-color:rgb(var(--c1) / .26);box-shadow:inset 0 -2px 0 rgb(var(--c1))}
.cop-an-objetivo.cop-an-on{background-color:rgb(var(--c2) / .2);box-shadow:inset 0 -2px 0 rgb(var(--c2))}
.cop-an-contexto.cop-an-on{background-color:rgb(var(--c3) / .2);box-shadow:inset 0 -2px 0 rgb(var(--c3))}
.cop-an-estructura.cop-an-on{background-color:rgb(var(--c4) / .2);box-shadow:inset 0 -2px 0 rgb(var(--c4))}

.cop-leyenda{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
.cop-leyenda-i{display:flex;align-items:center;gap:7px;font-size:.78rem;color:var(--t-medio)}
.cop-leyenda-p{width:11px;height:11px;border-radius:3px;flex:none}
.cop-leyenda-i[data-dim="rol"] .cop-leyenda-p{background:rgb(var(--c1))}
.cop-leyenda-i[data-dim="objetivo"] .cop-leyenda-p{background:rgb(var(--c2))}
.cop-leyenda-i[data-dim="contexto"] .cop-leyenda-p{background:rgb(var(--c3))}
.cop-leyenda-i[data-dim="estructura"] .cop-leyenda-p{background:rgb(var(--c4))}
.cop-leyenda-i[data-dim="nada"] .cop-leyenda-p{background:rgb(var(--ink) / .18)}

/* --- Bloques de código / prompts ------------------------------------------ */
.cop-pre{
  font-family:var(--mono); font-size:.88rem; line-height:1.72;
  white-space:pre-wrap; word-break:break-word;
  padding:18px; border-radius:var(--r-m);
  background:rgb(var(--ink) / .035); border:1px solid var(--borde);
  color:var(--t-fuerte);
}
.cop-copiar{display:flex;justify-content:flex-end;margin-top:10px}

/* --- Ejemplo pobre / bueno lado a lado ------------------------------------ */
.cop-vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.cop-vs-c{padding:16px;border-radius:var(--r-m);border:1px solid var(--borde);background:rgb(var(--surface))}
.cop-vs-cab{display:flex;align-items:center;gap:7px;font-size:.74rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:9px}
.cop-vs-mal .cop-vs-cab{color:rgb(var(--bad))}
.cop-vs-bien .cop-vs-cab{color:rgb(var(--ok))}
.cop-vs-mal{border-color:rgb(var(--bad) / .22);background:rgb(var(--bad) / .03)}
.cop-vs-bien{border-color:rgb(var(--ok) / .22);background:rgb(var(--ok) / .03)}
.cop-vs-txt{font-family:var(--mono);font-size:.85rem;line-height:1.65;color:var(--t-fuerte)}

/* --- Tablas --------------------------------------------------------------- */
/* display explícito: la disciplina que evita que una utilidad ajena descuadre la tabla. */
.cop-tabla-wrap{overflow-x:auto;border:1px solid var(--borde);border-radius:var(--r-m);background:rgb(var(--surface))}
table.cop-tabla{display:table;width:100%;border-collapse:collapse;font-size:.88rem}
.cop-tabla thead th{
  display:table-cell; text-align:left; font-weight:600; font-size:.74rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--t-suave);
  padding:11px 14px; border-bottom:1px solid var(--borde); white-space:nowrap;
  background:rgb(var(--ink) / .02);
}
.cop-tabla tbody td{display:table-cell;padding:11px 14px;border-bottom:1px solid rgb(var(--line) / .7);vertical-align:middle}
.cop-tabla tbody tr:last-child td{border-bottom:none}
.cop-tabla tbody tr:hover{background:rgb(var(--ink) / .018)}
.cop-tabla .cop-num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}

/* --- Podio ---------------------------------------------------------------- */
.cop-podio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end;margin-bottom:22px}
.cop-podio-c{
  text-align:center;padding:18px 12px;border-radius:var(--r-l);
  border:1px solid var(--borde);background:rgb(var(--surface));box-shadow:var(--sombra-1);
}
.cop-podio-c[data-lugar="1"]{border-color:rgb(var(--warn) / .45);background:rgb(var(--warn) / .05);padding-block:28px}
.cop-podio-c[data-lugar="2"]{border-color:rgb(var(--ink) / .16)}
.cop-podio-med{font-size:1.7rem;line-height:1}
.cop-podio-n{font-weight:600;font-size:.9rem;margin-top:8px;overflow-wrap:anywhere}
.cop-podio-p{font-family:var(--mono);font-size:1.5rem;font-weight:700;letter-spacing:-.03em;margin-top:4px}

/* --- Métricas ------------------------------------------------------------- */
.cop-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.cop-kpi{padding:18px;border-radius:var(--r-m);border:1px solid var(--borde);background:rgb(var(--surface))}
.cop-kpi-n{font-family:var(--mono);font-size:1.9rem;font-weight:700;letter-spacing:-.04em;line-height:1}
.cop-kpi-l{font-size:.76rem;color:var(--t-suave);margin-top:6px;letter-spacing:.02em}

/* --- Progreso -------------------------------------------------------------- */
.cop-progreso{height:5px;border-radius:3px;background:rgb(var(--line));overflow:hidden}
.cop-progreso-i{height:100%;background:rgb(var(--ink));border-radius:3px;width:0;transition:width .45s var(--curva)}

/* --- Kanban de casos ------------------------------------------------------ */
.cop-kanban{display:grid;grid-template-columns:repeat(4,minmax(200px,1fr));gap:14px}
.cop-col{background:rgb(var(--ink) / .025);border:1px solid var(--borde);border-radius:var(--r-m);padding:12px;min-height:180px}
.cop-col.cop-col-sobre{border-color:rgb(var(--c2));background:rgb(var(--c2) / .05)}
.cop-col-cab{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:.78rem;font-weight:600;color:var(--t-medio)}
.cop-col-n{font-family:var(--mono);font-size:.72rem;color:var(--t-tenue);margin-left:auto}
.cop-caso{background:rgb(var(--surface));border:1px solid var(--borde);border-radius:var(--r-s);padding:12px;margin-bottom:9px;cursor:grab;box-shadow:var(--sombra-1)}
.cop-caso:active{cursor:grabbing}
.cop-caso.cop-caso-arrastre{opacity:.4}
.cop-caso-t{font-weight:600;font-size:.87rem;margin-bottom:4px}
.cop-caso-a{font-size:.75rem;color:var(--t-suave)}

/* --- Modal ---------------------------------------------------------------- */
.cop-modal{
  position:fixed;inset:0;z-index:80;display:none;
  align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto;
  background:rgb(var(--ink) / .42);backdrop-filter:blur(3px);
}
.cop-modal[open],.cop-modal.cop-abierto{display:flex}
.cop-modal-c{
  background:rgb(var(--surface));border-radius:var(--r-xl);
  width:100%;max-width:720px;margin-block:auto;
  box-shadow:var(--sombra-3);border:1px solid var(--borde);
}
.cop-modal-cab{display:flex;align-items:center;gap:14px;padding:22px 26px 0}
.cop-modal-b{padding:22px 26px 26px}
.cop-modal-x{margin-left:auto}
.cop-modal-ancho .cop-modal-c{max-width:1000px}

/* --- Toast ---------------------------------------------------------------- */
.cop-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,18px);
  z-index:90;padding:12px 20px;border-radius:999px;
  background:rgb(var(--ink));color:rgb(var(--surface));
  font-size:.87rem;font-weight:500;box-shadow:var(--sombra-3);
  opacity:0;pointer-events:none;transition:opacity .22s var(--curva),transform .22s var(--curva);
}
.cop-toast.cop-toast-on{opacity:1;transform:translate(-50%,0)}

/* --- Utilidades ----------------------------------------------------------- */
.cop-fila{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cop-fila-fin{justify-content:flex-end}
.cop-sep{height:1px;background:var(--borde);margin-block:22px;border:0}
.cop-gap-s{margin-top:8px}.cop-gap{margin-top:16px}.cop-gap-l{margin-top:28px}.cop-gap-xl{margin-top:44px}
.cop-cols-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cop-cols-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.cop-oculto{display:none !important}
.cop-solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cop-cargando{display:inline-block;width:15px;height:15px;border:2px solid rgb(var(--surface) / .3);
  border-top-color:rgb(var(--surface));border-radius:50%;animation:cop-gira .7s linear infinite}
@keyframes cop-gira{to{transform:rotate(360deg)}}
.cop-vacio{text-align:center;padding:48px 24px;color:var(--t-suave)}
.cop-vacio-ico{font-size:2rem;margin-bottom:10px;opacity:.5}

/* --- Pestañas del admin --------------------------------------------------- */
.cop-tabs{display:flex;gap:4px;border-bottom:1px solid var(--borde);margin-bottom:26px;overflow-x:auto;padding-bottom:1px}
.cop-tab{
  min-height:42px;padding:0 16px;border:0;background:transparent;cursor:pointer;
  font-size:.88rem;font-weight:600;color:var(--t-suave);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .16s var(--curva),border-color .16s var(--curva);
}
.cop-tab:hover{color:var(--t-fuerte)}
.cop-tab[aria-selected="true"]{color:var(--t-fuerte);border-bottom-color:rgb(var(--ink))}
.cop-tabp[hidden]{display:none}

/* --- Interruptor ---------------------------------------------------------- */
.cop-sw{display:flex;align-items:center;gap:12px;cursor:pointer;min-height:44px}
.cop-sw-p{
  width:46px;height:27px;border-radius:999px;background:rgb(var(--ink) / .16);
  position:relative;flex:none;transition:background .2s var(--curva);
}
.cop-sw-p::after{
  content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;box-shadow:var(--sombra-1);transition:transform .2s var(--curva);
}
.cop-sw input{position:absolute;opacity:0;width:0;height:0}
.cop-sw input:checked + .cop-sw-p{background:rgb(var(--ok))}
.cop-sw input:checked + .cop-sw-p::after{transform:translateX(19px)}
.cop-sw input:focus-visible + .cop-sw-p{outline:2px solid rgb(var(--c2));outline-offset:2px}

/* --- Login ---------------------------------------------------------------- */
.cop-login{min-height:100vh;display:grid;place-items:center;padding:24px}
.cop-login-c{width:100%;max-width:400px}
.cop-login-marca{text-align:center;margin-bottom:28px}
.cop-login-marca .cop-logo{height:30px;width:auto;margin:0 auto 14px;display:block}
.cop-login-t{font-family:var(--display);font-size:1.6rem;font-weight:700;letter-spacing:-.035em}
.cop-login-s{color:var(--t-suave);font-size:.9rem;margin-top:4px}

/* --- Informe editable ----------------------------------------------------- */
.cop-informe{font-size:.95rem;line-height:1.72;color:var(--t-fuerte)}
.cop-informe h2{font-size:1.3rem;margin:26px 0 10px}
.cop-informe h3{font-size:1.02rem;margin:20px 0 8px}
.cop-informe p{margin-bottom:12px}
.cop-informe ul,.cop-informe ol{margin:0 0 12px 22px}
.cop-informe li{margin-bottom:5px}
.cop-informe strong{font-weight:600}
.cop-informe table{display:table;width:100%;border-collapse:collapse;margin-bottom:16px;font-size:.88rem}
.cop-informe th,.cop-informe td{display:table-cell;border:1px solid var(--borde);padding:8px 11px;text-align:left}
.cop-informe th{background:rgb(var(--ink) / .03);font-weight:600}
.cop-editable{outline:none;border:1px dashed transparent;border-radius:var(--r-s);padding:10px;margin:-10px}
.cop-editable:focus{border-color:rgb(var(--c2) / .5);background:rgb(var(--c2) / .02)}

/* --- Gráfico de barras propio (sin librerías de terceros) ----------------- */
.cop-graf{width:100%;height:auto;display:block;overflow:visible}
.cop-graf-b{fill:rgb(var(--ink) / .78);transition:fill .16s var(--curva)}
.cop-graf-b:hover{fill:rgb(var(--c2))}
.cop-graf-eje{stroke:rgb(var(--line));stroke-width:1}
.cop-graf-t{font-family:var(--mono);font-size:9px;fill:rgb(var(--ink) / .42)}

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width:900px){
  .cop-cols-2{grid-template-columns:1fr}
  .cop-kanban{grid-template-columns:repeat(2,minmax(160px,1fr))}
}
@media (max-width:720px){
  .cop-ancho{padding-inline:18px}
  .cop-main{padding-block:26px 56px}
  .cop-panel{padding:20px}
  .cop-vs{grid-template-columns:1fr}
  .cop-ruta{padding-left:42px}
  .cop-espina{left:13px}
  .cop-hito-n{left:-42px;top:18px;width:28px;height:28px;font-size:.76rem}
  .cop-mod{padding:18px}
  .cop-podio{grid-template-columns:1fr;align-items:stretch}
  .cop-podio-c[data-lugar="1"]{padding-block:18px}
  .cop-arco{width:150px;height:150px}
  .cop-arco-n{font-size:2.2rem}
  .cop-modal{padding:12px}
  .cop-modal-c{border-radius:var(--r-l)}
  .cop-modal-cab{padding:18px 18px 0}
  .cop-modal-b{padding:18px}
  .cop-marca-sub{display:none}
  .cop-nav a{padding:8px 9px;font-size:.84rem}
}
@media (max-width:560px){
  .cop-kanban{grid-template-columns:1fr}
}

/* ===========================================================================
   prefers-reduced-motion — todo al estado final, sin transición.
   No es un extra: es el piso, igual que el foco de teclado visible.
   =========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .cop-entra{opacity:1;transform:none;animation:none}
  .cop-an{opacity:1}
  .cop-eq-seg-hoy{transform:none;outline:2px solid rgb(var(--c2));outline-offset:1px}
  .cop-eq-op-late .cop-eq-marca{animation:none}
  .cop-eq-tilde-c,.cop-eq-tilde-p{stroke-dasharray:none}
  .cop-espina.cop-espina-viva::after{animation:none;background:var(--grad)}
}

/* ===========================================================================
   Impresión — el panel de seguridad y los informes se imprimen a PDF
   =========================================================================== */
@media print{
  @page{margin:14mm}
  body{background:#fff;font-size:11pt}
  .cop-top,.cop-pie,.cop-noimp,.cop-btn,.cop-tabs{display:none !important}
  .cop-main{padding:0}
  .cop-ancho{max-width:none;padding:0}
  .cop-panel,.cop-card{box-shadow:none;border:1px solid #ddd;break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  a{color:inherit;text-decoration:none}
  .cop-imp-salto{break-before:page;page-break-before:always}
}

/* Centrado horizontal de una caja con ancho máximo. Existe como clase y no como
   style= en el marcado porque la CSP (style-src 'self') bloquea los atributos de
   estilo en línea; los valores dinámicos se escriben por CSSOM desde JS. */
/* Solo para lectores de pantalla. No display:none —eso lo saca del árbol de
   accesibilidad, que es justo lo contrario de lo que se busca. */
.cop-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
/* Módulo cerrado en la barra: lo ve solo el admin, y atenuado para que se lea
   como "esto todavía no está para los demás". */
.cop-nav-cerrado{opacity:.55}
.cop-sws{display:grid;gap:14px}
.cop-sw-ico{display:inline-block;margin-right:8px}
.cop-centrado{margin-inline:auto}
.cop-ml-auto{margin-left:auto}
.cop-lista{padding-left:20px}
.cop-lista li{margin-bottom:6px}
/* En la guía la letra de la dimensión es un poco mayor que en el resultado del evaluador. */
.cop-panel > .cop-dim-cab .cop-dim-letra{width:26px;height:26px;border-radius:7px;font-size:.82rem}
.cop-panel > .cop-dim-cab{gap:11px;margin-bottom:12px;flex-wrap:wrap}

/* --- Evaluador ------------------------------------------------------------ */
.cop-res-cab{gap:28px;align-items:center}
.cop-res-txt{flex:1;min-width:240px}
.cop-campo-inline{margin-bottom:0;max-width:260px;flex:1}
.cop-recorta{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem}
@media (max-width:720px){
  .cop-res-cab{flex-direction:column;align-items:flex-start;gap:18px}
  .cop-campo-inline{max-width:none;width:100%}
  .cop-fila > .cop-btn.cop-ml-auto{width:100%;margin-left:0}
  .cop-recorta{max-width:180px}
}

/* ===========================================================================
   ENCUESTA · una pregunta a la vez
   ---------------------------------------------------------------------------
   La lista de 24 preguntas invitaba a barrerla marcando el mismo número. Con una
   pregunta por pantalla cada respuesta vuelve a ser una decisión, y eso obliga a
   que el paso de una a otra se sienta instantáneo: si pasar cuesta, la persona
   abandona a la sexta.

   Todo el movimiento es transform y opacity. Nada de animar alto, que recalcula
   el layout en cada cuadro y hace saltar el contenido de más abajo.
   =========================================================================== */

/* Una sola columna angosta para todo el módulo. La medida corta no es estética:
   con la pregunta ocupando 1080 px el ojo tiene que barrer de lado a lado para
   emparejar cada opción con su marca del extremo derecho. */
.cop-eq-cab,.cop-eq-barra,.cop-eq-escena,#err{max-width:680px;margin-inline:auto}

/* --- Barra de avance: material translúcido, el contenido pasa por debajo ---- */
.cop-eq-barra{
  position:sticky; top:60px; z-index:20;
  display:flex; align-items:center; gap:14px;
  padding:9px 12px 9px 9px;
  border-radius:999px;
  background:rgb(var(--paper) / .72);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  /* Sin borde duro: un halo del propio papel separa la barra del contenido que
     pasa por debajo, en vez de dibujar una línea que corta la página. */
  box-shadow:0 0 0 1px rgb(var(--ink) / .05), 0 6px 20px rgb(var(--ink) / .06);
}

.cop-eq-atras{
  flex:none; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--borde); background:rgb(var(--surface));
  color:var(--t-medio); cursor:pointer;
  transition:transform .12s var(--curva), border-color .16s var(--curva), opacity .2s var(--curva);
}
.cop-eq-atras svg{width:18px;height:18px}
.cop-eq-atras:hover:not(:disabled){border-color:rgb(var(--ink) / .3);color:var(--t-fuerte)}
.cop-eq-atras:active:not(:disabled){transform:scale(.92)}
.cop-eq-atras:disabled{opacity:.28;cursor:default}

/* Un segmento por pregunta: se ve a la vez cuánto falta y en cuál vas, que una
   barra continua no puede mostrar. */
.cop-eq-rail{display:flex;align-items:center;gap:3px;flex:1;min-width:0;height:14px}
.cop-eq-seg{
  flex:1; min-width:2px; height:4px; border-radius:2px;
  background:rgb(var(--ink) / .12);
  transition:background .32s var(--curva), transform .32s var(--resorte);
  transform-origin:center;
}
.cop-eq-seg-ok{background:rgb(var(--ink) / .68)}
.cop-eq-seg-hoy{background:rgb(var(--c2));transform:scaleY(2)}
.cop-eq-cuenta{flex:none;font-size:.78rem;color:var(--t-suave);letter-spacing:-.01em}

/* --- La escena: una sola tarjeta a la vez ---------------------------------- */
.cop-eq-escena{
  position:relative; margin-top:22px;
  /* El navegador se queda el desplazamiento vertical; el horizontal es nuestro,
     y sin esto preventDefault() en pointermove no llega a impedir el scroll. */
  touch-action:pan-y;
  /* Las tarjetas entran y salen POR los costados. En el teléfono ese desplazamiento
     sobresale del ancho de la pantalla y aparece scroll horizontal mientras dura la
     animación — medido: el documento pasaba de 390 a 446 px.
     Va `clip` y no `hidden` a propósito: `hidden` en un eje obliga al otro a volverse
     desplazable, y eso corta la sombra de la tarjeta por arriba y por abajo.
     `overflow-clip-margin` deja respirar la sombra lateral. */
  overflow-x:clip; overflow-y:visible;
  overflow-clip-margin:14px;
}
.cop-eq-cargando{padding:40px 0;text-align:center}

.cop-eq-card{padding:clamp(22px,3.4vw,34px);will-change:transform,opacity}
/* La tarjeta recibe el foco al cambiar de pregunta para que el lector de pantalla
   lea el contenido nuevo y el tabulador siga DENTRO de la tarjeta. Pero no es un
   control: dibujarle el anillo de foco alrededor sugiere algo que apretar. El
   anillo lo siguen teniendo las opciones, que sí lo son. */
.cop-eq-card:focus,.cop-eq-card:focus-visible{outline:none}
/* La tarjeta que se va sale del flujo para que las dos se crucen superpuestas y
   la de abajo no se desplace mientras dura el cruce. */
.cop-eq-yendose{position:absolute;top:0;left:0;right:0;pointer-events:none}

.cop-eq-cabecera{min-height:1.1em}
.cop-eq-preg{
  font-size:clamp(1.3rem,2.6vw,1.75rem);
  line-height:1.16; letter-spacing:-.032em;   /* el texto grande se lee separado: se aprieta */
  margin-top:10px; max-width:26ch;
}

/* --- Opciones -------------------------------------------------------------- */
.cop-eq-ops{display:grid;gap:9px;margin-top:26px}
.cop-eq-op{
  display:flex; align-items:center; gap:13px;
  min-height:56px; padding:13px 15px;
  border:1px solid var(--borde); border-radius:14px;
  background:rgb(var(--surface)); cursor:pointer; text-align:left; width:100%;
  transition:border-color .16s var(--curva), background .16s var(--curva),
             transform .1s var(--curva), box-shadow .16s var(--curva);
}
.cop-eq-op:hover{border-color:rgb(var(--ink) / .26);box-shadow:var(--sombra-1)}
/* La respuesta llega al APRETAR, no al soltar: esperar el clic se siente muerto. */
.cop-eq-op:active{transform:scale(.985)}
.cop-eq-op[aria-pressed="true"]{border-color:rgb(var(--c2));background:rgb(var(--c2) / .055)}

.cop-eq-tecla{
  flex:none; width:26px; height:26px; border-radius:7px;
  display:grid; place-items:center;
  font-size:.72rem; font-weight:700;
  border:1px solid var(--borde); color:var(--t-tenue);
  transition:border-color .16s var(--curva), color .16s var(--curva);
}
.cop-eq-op[aria-pressed="true"] .cop-eq-tecla{border-color:rgb(var(--c2) / .45);color:rgb(var(--c2))}
.cop-eq-op-t{flex:1;font-size:.97rem;line-height:1.4}

.cop-eq-marca{
  flex:none; width:22px; height:22px; border-radius:50%;
  border:1.5px solid rgb(var(--ink) / .18);
  position:relative;
  transition:border-color .16s var(--curva), background .16s var(--curva);
}
.cop-eq-marca::after{
  content:''; position:absolute; left:7px; top:3.5px;
  width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(.4); opacity:0;
  transition:opacity .14s var(--curva), transform .22s var(--resorte);
}
.cop-eq-op[aria-pressed="true"] .cop-eq-marca{background:rgb(var(--c2));border-color:rgb(var(--c2))}
.cop-eq-op[aria-pressed="true"] .cop-eq-marca::after{opacity:1;transform:rotate(45deg) scale(1)}
/* Solo cuando la persona acaba de elegir —no al volver a una ya respondida— la
   marca entra con un resorte. El acuse de recibo es del acto, no del estado. */
.cop-eq-op-late .cop-eq-marca{animation:cop-eq-marca-in .34s var(--resorte)}
@keyframes cop-eq-marca-in{from{transform:scale(.5)}to{transform:scale(1)}}

/* --- Pie de la tarjeta ----------------------------------------------------- */
.cop-eq-pie{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:24px; padding-top:16px; border-top:1px solid var(--borde);
  min-height:56px;
}
.cop-eq-ta{margin-top:22px;min-height:140px}
.cop-eq-contador{font-size:.78rem;color:var(--t-tenue);transition:color .2s var(--curva)}
.cop-eq-contador-listo{color:rgb(var(--ok))}

/* --- Pantalla final -------------------------------------------------------- */
.cop-eq-fin{text-align:center}
.cop-eq-fin .cop-bajada{margin-inline:auto}
.cop-eq-fin .cop-fila{justify-content:center}
.cop-eq-fin-ico{font-size:2rem;color:var(--t-tenue);line-height:1}
.cop-eq-tilde{width:64px;height:64px;margin:0 auto 6px}
.cop-eq-tilde-c{fill:none;stroke:rgb(var(--ok) / .3);stroke-width:2.4;stroke-dasharray:151}
.cop-eq-tilde-p{fill:none;stroke:rgb(var(--ok));stroke-width:3.4;stroke-dasharray:34;
  stroke-linecap:round;stroke-linejoin:round}

@media (max-width:720px){
  /* El atajo de teclado no existe con el dedo: el número solo estorba. */
  .cop-eq-tecla{display:none}
  .cop-eq-op{min-height:60px}
  .cop-eq-barra{top:56px}
  .cop-eq-preg{max-width:none}
  .cop-eq-cab .cop-bajada{font-size:.95rem}
}

/* Sin transparencia: la barra se vuelve sólida en vez de quedar ilegible. */
@media (prefers-reduced-transparency:reduce){
  .cop-eq-barra{background:rgb(var(--paper));backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* --- Admin ---------------------------------------------------------------- */
.cop-buscar{min-width:220px;max-width:280px;min-height:34px;padding:6px 12px;font-size:.86rem}
.cop-lista-scroll{max-height:320px;overflow-y:auto;border:1px solid var(--borde);border-radius:var(--r-m);padding:8px}
.cop-dest{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-s);cursor:pointer;min-height:40px}
.cop-dest:hover{background:rgb(var(--ink) / .035)}
.cop-dest input{width:17px;height:17px;flex:none;accent-color:rgb(var(--c2))}
.cop-dest-n{font-size:.87rem}
.cop-dest-e{font-size:.75rem;color:var(--t-suave)}
.cop-log{max-height:220px;overflow-y:auto;font-family:var(--mono);font-size:.76rem;line-height:1.7}
.cop-log-l{padding:2px 0;border-bottom:1px solid rgb(var(--line) / .6)}
.cop-log-mal{color:rgb(var(--bad))}
.cop-log-ok{color:var(--t-medio)}
.cop-inline{border:1px solid transparent;background:transparent;border-radius:6px;padding:4px 6px;
  min-height:30px;width:100%;font-size:.86rem;min-width:80px}
.cop-inline:hover{border-color:var(--borde)}
.cop-inline:focus{border-color:rgb(var(--c2));background:rgb(var(--surface));outline:none}
.cop-acc{display:flex;gap:4px;justify-content:flex-end;white-space:nowrap}
.cop-mini{min-height:30px;padding:0 9px;font-size:.76rem;border-radius:7px}
.cop-diff-add{color:rgb(var(--ok))}
.cop-diff-del{color:rgb(var(--bad))}
.cop-diff-mod{color:rgb(var(--warn))}
.cop-antes{text-decoration:line-through;color:var(--t-tenue)}
@media (max-width:720px){
  .cop-buscar{max-width:none;width:100%}
  .cop-fila > .cop-ml-auto{margin-left:0;width:100%}
}

/* La insignia de estado va al borde derecho de la tarjeta, no pegada al título:
   así se lee como un estado del módulo y no como parte del nombre. */
.cop-mod-cab > .cop-badge{margin-left:auto;align-self:center}
.cop-mod-cab > div{min-width:0}
/* En móvil la insignia baja SIEMPRE a su propia línea: con flex-basis:100% no depende
   de si el título es corto o largo, que era lo que hacía que unas tarjetas la mostraran
   al lado y otras debajo. */
@media (max-width:640px){
  .cop-mod-cab{flex-wrap:wrap}
  .cop-mod-cab > .cop-badge{margin-left:0;order:3;flex:0 0 100%;justify-content:flex-start}
}

/* La tabla de la nómina lleva ocho columnas y campos editables: sin apretarla, la columna
   de acciones queda fuera de la vista aunque el contenedor permita desplazarse. */
#tablaPersonas .cop-tabla thead th,
#tablaPersonas .cop-tabla tbody td{padding:8px 10px}
#tablaPersonas .cop-inline{min-width:0;font-size:.83rem;padding:4px}
#tablaPersonas td:nth-child(1) .cop-inline,
#tablaPersonas td:nth-child(2) .cop-inline{width:104px}
#tablaPersonas td:nth-child(4) .cop-inline{width:110px}
#tablaPersonas td:nth-child(5) .cop-inline{width:120px}
#tablaPersonas .cop-dest-e{font-size:.76rem;white-space:nowrap}
#tablaPersonas .cop-acc{position:sticky;right:0;background:rgb(var(--surface));padding-left:8px}

/* La barra de la nómina: buscador y botones en una sola línea mientras quepan. */
.cop-barra-acc{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---------------------------------------------------------------------------
   Accesibilidad en móvil — dos correcciones medidas en el navegador, no supuestas
   --------------------------------------------------------------------------- */

/* 1. La barra superior desbordaba 36 px con la sesión de administración, que suma un enlace
      más que la de participante. En vez de achicar la tipografía, la navegación se desplaza
      dentro de sí misma: la página nunca scrollea en horizontal.

      Con los cuatro módulos en la barra son siete enlaces y el desborde es la regla, no la
      excepción. Por eso NO va justify-content:flex-end: al desbordar recorta por el
      comienzo, y lo primero que desaparece es "Ruta", que es el enlace al que más se vuelve.
      El margin-left:auto del selector base ya alinea a la derecha cuando sí cabe. */
@media (max-width:720px){
  .cop-top-in{gap:10px}
  .cop-marca{flex:none;min-width:0}
  .cop-nav{
    overflow-x:auto; flex:0 1 auto;
    scrollbar-width:none; -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
  }
  .cop-nav::-webkit-scrollbar{display:none}
  .cop-nav a{flex:none}
}

/* 2. Objetivos táctiles de 44 px. En escritorio los controles densos pueden ser más chicos
      porque hay puntero fino; con el dedo, no. */
@media (max-width:720px){
  .cop-nav a{min-height:44px}
  .cop-marca{min-height:44px}
  .cop-btn-s,.cop-mini{min-height:44px;padding-inline:14px}
  .cop-pie a{display:inline-flex;align-items:center;min-height:44px}
  .cop-eq-atras{width:44px;height:44px}
}