/* ===========================================================================
   Copilot · 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 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 casi-negro.

   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:20 18 26;          /* casi negro con carga violeta, no gris neutro */
  --paper:247 248 252;     /* blanco frío */
  --surface:255 255 255;
  --line:230 232 240;
  --c1:42 201 232;         /* cian    ┐ el gradiente de marca */
  --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-txt{font-family:var(--display);font-size:1.02rem;letter-spacing:-.03em}
.cop-marca-sub{font-size:.72rem;color:var(--t-suave);font-weight:400;letter-spacing:0}
.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: cuatro trazos del gradiente. Único uso decorativo permitido ----- */
.cop-logo{width:26px;height:26px;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));background:rgb(var(--ok) / .07)}
.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}

/* --- Escala de la encuesta ------------------------------------------------ */
.cop-escala{display:grid;gap:8px;margin-top:12px}
.cop-op{
  display:flex;align-items:center;gap:12px;
  min-height:48px;padding:11px 15px;
  border:1px solid var(--borde);border-radius:var(--r-m);
  background:rgb(var(--surface));cursor:pointer;text-align:left;width:100%;
  transition:border-color .16s var(--curva),background .16s var(--curva);
}
.cop-op:hover{border-color:rgb(var(--ink) / .28);background:rgb(var(--ink) / .02)}
.cop-op-v{
  font-family:var(--mono);font-size:.78rem;font-weight:700;
  width:26px;height:26px;border-radius:7px;flex:none;display:grid;place-items:center;
  border:1px solid var(--borde);color:var(--t-suave);
}
.cop-op-t{font-size:.93rem}
.cop-op[aria-pressed="true"]{border-color:rgb(var(--c2));background:rgb(var(--c2) / .06)}
.cop-op[aria-pressed="true"] .cop-op-v{background:rgb(var(--c2));border-color:rgb(var(--c2));color:#fff}

.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{width:44px;height:44px;margin:0 auto 14px}
.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-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. */
.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 ------------------------------------------------------------- */
.cop-preg{padding-top:22px;margin-top:22px;border-top:1px solid var(--borde)}
.cop-preg:first-of-type{border-top:0;margin-top:18px}
.cop-preg-n{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t-tenue);margin-bottom:5px}
.cop-barra-progreso{position:sticky;top:60px;z-index:20;background:rgb(var(--paper) / .94);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding-block:12px;margin-inline:-8px;padding-inline:8px}

/* --- 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. */
@media (max-width:720px){
  .cop-top-in{gap:10px}
  .cop-marca{flex:none;min-width:0}
  .cop-nav{
    overflow-x:auto; flex:1 1 auto; justify-content:flex-end;
    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-op{min-height:52px}
}