/* Academia IA · tokens de marca (amarillo Cheesquería + slate) y componentes. Primero móvil. */
:root {
  --amarillo: #F5C842;
  --amarillo-tinta: #6B4F00;
  --amarillo-suave: #FFF6D6;
  --fondo: #FAF8F2;
  --superficie: #FFFFFF;
  --texto: #1E2430;
  --texto-suave: #5B6472;
  --borde: #E6E1D4;
  --ok: #2E7D4F;      --ok-fondo: #E7F4EC;
  --aviso: #B45309;   --aviso-fondo: #FFF1DC;
  --error: #B42318;   --error-fondo: #FDECEA;
  --info: #2B5FA8;    --info-fondo: #E8F0FB;
  --rojo: #D92D20;
  --scrim: rgba(30, 36, 48, .55);
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --cuerpo: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radio: 16px;
  --radio-s: 10px;
  --sombra: 0 1px 2px rgba(30, 36, 48, .06), 0 8px 24px -12px rgba(30, 36, 48, .18);
  --alto-toque: 48px;
  --rapido: 160ms ease-out;
}
@media (prefers-color-scheme: dark) {
  :root {
    --amarillo-tinta: #F5C842; --amarillo-suave: #2A2614;
    --fondo: #15181E; --superficie: #1D2129; --texto: #EDEAE2; --texto-suave: #A5ACB8; --borde: #2E3440;
    --ok: #7FC9A6; --ok-fondo: #15291E; --aviso: #F3B465; --aviso-fondo: #2E2210;
    --error: #F39A90; --error-fondo: #331A18; --info: #9FB0F0; --info-fondo: #1A2238;
    --scrim: rgba(0, 0, 0, .65);
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--cuerpo); font-size: 16px; line-height: 1.55;
  color: var(--texto); background: var(--fondo);
}
body.con-capa { overflow: hidden; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); margin-bottom: .75rem; }
h2 { font-size: 1.3rem; margin-bottom: .6rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 .6rem; }
pre {
  white-space: pre-wrap; word-break: break-word; font: inherit; background: var(--fondo);
  border: 1px solid var(--borde); border-radius: var(--radio-s); padding: .75rem .9rem; margin: .5rem 0;
}
svg { width: 1.1em; height: 1.1em; vertical-align: -.2em; flex: none; }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-suave); margin: 0 0 .25rem; }
.nota { color: var(--texto-suave); font-size: .92rem; }
.inline { display: inline; }
.num { font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- Cabecera ---------- */
.cabecera {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; position: sticky; top: 0; z-index: 20;
  padding: .6rem max(1rem, env(safe-area-inset-right)) .6rem max(1rem, env(safe-area-inset-left));
  padding-top: max(.6rem, env(safe-area-inset-top));
  background: var(--superficie); border-bottom: 1px solid var(--borde);
}
.marca { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--display); font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.marca-punto { width: .8em; height: .8em; border-radius: 50%; background: var(--amarillo); box-shadow: 0 0 0 4px var(--amarillo-suave); }
.nav { display: flex; flex-wrap: wrap; gap: .1rem .4rem; align-items: center; margin-left: auto; }
.nav a { text-decoration: none; padding: .45rem .55rem; border-radius: var(--radio-s); color: var(--texto-suave); font-weight: 600; font-size: .95rem; min-height: 40px; display: inline-flex; align-items: center; }
.nav a:hover { background: var(--fondo); color: var(--texto); }
.nav a.activo { color: var(--texto); background: var(--amarillo-suave); }
.enlace { background: none; border: 0; padding: .45rem .55rem; color: var(--texto-suave); font: inherit; font-weight: 600; cursor: pointer; border-radius: var(--radio-s); }
.enlace:hover { background: var(--fondo); color: var(--texto); }

.contenido {
  max-width: 1080px; margin: 0 auto; padding: 1.25rem max(1rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

/* ---------- Tarjetas y bloques ---------- */
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 1.1rem 1.2rem; box-shadow: var(--sombra); margin-bottom: 1rem;
}
.estrecha { max-width: 460px; margin: 1.5rem auto; }
.vacio { text-align: center; padding: 2rem 1rem; }
.vacio .boton { margin-top: .5rem; }
.bloque { margin-top: 2rem; }
.bloque-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .75rem; }
.bloque-titulo h2 { margin: 0; }
.rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.dos-columnas { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .dos-columnas { grid-template-columns: 1.2fr 1fr; } }
.lista { display: grid; gap: .75rem; }
.barra-titulo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; }
.barra-titulo h1 { margin: 0; }

/* ---------- Hero ---------- */
.hero {
  display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: center;
  background: linear-gradient(135deg, var(--amarillo-suave), var(--superficie) 70%);
  border: 1px solid var(--borde); border-radius: 22px; padding: 1.4rem 1.5rem; box-shadow: var(--sombra);
}
@media (min-width: 760px) { .hero { grid-template-columns: 1.4fr 1fr; } }
.hero h1 { margin-bottom: .4rem; }
.nivel { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.puntos { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; }
.barra { height: 12px; background: var(--borde); border-radius: 999px; overflow: hidden; }
.barra span { display: block; width: 0; height: 100%; background: var(--amarillo); border-radius: 999px; transition: width 400ms ease-out; }
.barra-relleno.p0 { width: 0%; }
.barra-relleno.p1 { width: 1%; }
.barra-relleno.p2 { width: 2%; }
.barra-relleno.p3 { width: 3%; }
.barra-relleno.p4 { width: 4%; }
.barra-relleno.p5 { width: 5%; }
.barra-relleno.p6 { width: 6%; }
.barra-relleno.p7 { width: 7%; }
.barra-relleno.p8 { width: 8%; }
.barra-relleno.p9 { width: 9%; }
.barra-relleno.p10 { width: 10%; }
.barra-relleno.p11 { width: 11%; }
.barra-relleno.p12 { width: 12%; }
.barra-relleno.p13 { width: 13%; }
.barra-relleno.p14 { width: 14%; }
.barra-relleno.p15 { width: 15%; }
.barra-relleno.p16 { width: 16%; }
.barra-relleno.p17 { width: 17%; }
.barra-relleno.p18 { width: 18%; }
.barra-relleno.p19 { width: 19%; }
.barra-relleno.p20 { width: 20%; }
.barra-relleno.p21 { width: 21%; }
.barra-relleno.p22 { width: 22%; }
.barra-relleno.p23 { width: 23%; }
.barra-relleno.p24 { width: 24%; }
.barra-relleno.p25 { width: 25%; }
.barra-relleno.p26 { width: 26%; }
.barra-relleno.p27 { width: 27%; }
.barra-relleno.p28 { width: 28%; }
.barra-relleno.p29 { width: 29%; }
.barra-relleno.p30 { width: 30%; }
.barra-relleno.p31 { width: 31%; }
.barra-relleno.p32 { width: 32%; }
.barra-relleno.p33 { width: 33%; }
.barra-relleno.p34 { width: 34%; }
.barra-relleno.p35 { width: 35%; }
.barra-relleno.p36 { width: 36%; }
.barra-relleno.p37 { width: 37%; }
.barra-relleno.p38 { width: 38%; }
.barra-relleno.p39 { width: 39%; }
.barra-relleno.p40 { width: 40%; }
.barra-relleno.p41 { width: 41%; }
.barra-relleno.p42 { width: 42%; }
.barra-relleno.p43 { width: 43%; }
.barra-relleno.p44 { width: 44%; }
.barra-relleno.p45 { width: 45%; }
.barra-relleno.p46 { width: 46%; }
.barra-relleno.p47 { width: 47%; }
.barra-relleno.p48 { width: 48%; }
.barra-relleno.p49 { width: 49%; }
.barra-relleno.p50 { width: 50%; }
.barra-relleno.p51 { width: 51%; }
.barra-relleno.p52 { width: 52%; }
.barra-relleno.p53 { width: 53%; }
.barra-relleno.p54 { width: 54%; }
.barra-relleno.p55 { width: 55%; }
.barra-relleno.p56 { width: 56%; }
.barra-relleno.p57 { width: 57%; }
.barra-relleno.p58 { width: 58%; }
.barra-relleno.p59 { width: 59%; }
.barra-relleno.p60 { width: 60%; }
.barra-relleno.p61 { width: 61%; }
.barra-relleno.p62 { width: 62%; }
.barra-relleno.p63 { width: 63%; }
.barra-relleno.p64 { width: 64%; }
.barra-relleno.p65 { width: 65%; }
.barra-relleno.p66 { width: 66%; }
.barra-relleno.p67 { width: 67%; }
.barra-relleno.p68 { width: 68%; }
.barra-relleno.p69 { width: 69%; }
.barra-relleno.p70 { width: 70%; }
.barra-relleno.p71 { width: 71%; }
.barra-relleno.p72 { width: 72%; }
.barra-relleno.p73 { width: 73%; }
.barra-relleno.p74 { width: 74%; }
.barra-relleno.p75 { width: 75%; }
.barra-relleno.p76 { width: 76%; }
.barra-relleno.p77 { width: 77%; }
.barra-relleno.p78 { width: 78%; }
.barra-relleno.p79 { width: 79%; }
.barra-relleno.p80 { width: 80%; }
.barra-relleno.p81 { width: 81%; }
.barra-relleno.p82 { width: 82%; }
.barra-relleno.p83 { width: 83%; }
.barra-relleno.p84 { width: 84%; }
.barra-relleno.p85 { width: 85%; }
.barra-relleno.p86 { width: 86%; }
.barra-relleno.p87 { width: 87%; }
.barra-relleno.p88 { width: 88%; }
.barra-relleno.p89 { width: 89%; }
.barra-relleno.p90 { width: 90%; }
.barra-relleno.p91 { width: 91%; }
.barra-relleno.p92 { width: 92%; }
.barra-relleno.p93 { width: 93%; }
.barra-relleno.p94 { width: 94%; }
.barra-relleno.p95 { width: 95%; }
.barra-relleno.p96 { width: 96%; }
.barra-relleno.p97 { width: 97%; }
.barra-relleno.p98 { width: 98%; }
.barra-relleno.p99 { width: 99%; }
.barra-relleno.p100 { width: 100%; }
.medallas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.medalla { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; font-size: .78rem; font-weight: 600; color: var(--texto-suave); padding: .5rem .25rem; border-radius: var(--radio-s); background: var(--superficie); border: 1px dashed var(--borde); }
.medalla svg { width: 1.6em; height: 1.6em; color: var(--borde); }
.medalla.ganada { border-style: solid; color: var(--texto); }
.medalla.ganada svg { color: var(--amarillo); filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }

.siguiente { display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; align-items: center; text-decoration: none; border-left: 5px solid var(--amarillo); margin-top: 1rem; transition: transform var(--rapido), box-shadow var(--rapido); }
.siguiente:hover { transform: translateY(-1px); }
.siguiente strong { font-family: var(--display); font-size: 1.15rem; }
.siguiente .flecha { grid-row: 1 / span 3; width: 1.6em; height: 1.6em; color: var(--amarillo-tinta); }
.siguiente.quieta { border-left-color: var(--borde); }

/* ---------- Competencias ---------- */
.comp { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem 1.1rem; box-shadow: var(--sombra); }
.comp h3 { margin-bottom: .2rem; }
.grados { display: grid; gap: .4rem; margin-top: .75rem; }
.g {
  display: grid; grid-template-columns: 2rem 1fr; gap: .6rem; align-items: center; text-decoration: none;
  padding: .45rem .6rem; border-radius: var(--radio-s); border: 1px solid var(--borde); min-height: var(--alto-toque);
  transition: background var(--rapido), border-color var(--rapido);
}
.g:hover { border-color: var(--amarillo); background: var(--amarillo-suave); }
.g-num { width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: var(--fondo); color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.g-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.g-txt b { font-size: .92rem; }
.g-txt small { color: var(--texto-suave); font-size: .82rem; }
.g-aprobada .g-num { background: var(--ok-fondo); color: var(--ok); }
.g-enviada .g-num { background: var(--info-fondo); color: var(--info); }
.g-devuelta .g-num { background: var(--aviso-fondo); color: var(--aviso); }
.g-disponible .g-num { background: var(--amarillo); color: var(--texto); }
.g-bloqueada { opacity: .6; }
.g-bloqueada:hover { background: transparent; border-color: var(--borde); }

/* ---------- Píldoras y estados ---------- */
.pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700; border-radius: 999px; padding: .15rem .6rem; background: var(--fondo); border: 1px solid var(--borde); color: var(--texto-suave); white-space: nowrap; }
.pill.g1 { background: var(--amarillo-suave); color: var(--amarillo-tinta); border-color: transparent; }
.pill.g2 { background: color-mix(in srgb, var(--amarillo) 45%, var(--superficie)); color: var(--amarillo-tinta); border-color: transparent; }
.pill.g3 { background: var(--amarillo); color: #1E2430; border-color: transparent; }
.pill.nivel-0 { background: var(--fondo); }
.pill.nivel-1 { background: var(--amarillo-suave); color: var(--amarillo-tinta); border-color: transparent; }
.pill.nivel-2 { background: color-mix(in srgb, var(--amarillo) 45%, var(--superficie)); color: var(--amarillo-tinta); border-color: transparent; }
.pill.nivel-3 { background: var(--amarillo); color: #1E2430; border-color: transparent; }
.pill.rojo { background: var(--error-fondo); color: var(--error); border-color: transparent; }
.pill.bloqueo { font-weight: 600; }
.pill.e-aprobada { background: var(--ok-fondo); color: var(--ok); border-color: transparent; }
.pill.e-enviada { background: var(--info-fondo); color: var(--info); border-color: transparent; }
.pill.e-devuelta { background: var(--aviso-fondo); color: var(--aviso); border-color: transparent; }
.pill.e-disponible { background: var(--amarillo-suave); color: var(--amarillo-tinta); border-color: transparent; }
.pill.e-bloqueada { opacity: .7; }
.estado { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border-radius: var(--radio-s); margin-bottom: 1rem; }
.estado svg { width: 1.5em; height: 1.5em; margin-top: .1em; }
.estado p { margin: .2rem 0 0; }
.estado.bloqueada { background: var(--fondo); border: 1px solid var(--borde); }
.estado.aprobada { background: var(--ok-fondo); color: var(--ok); }
.estado.enviada { background: var(--info-fondo); color: var(--info); }
.estado.devuelta { background: var(--aviso-fondo); color: var(--aviso); }
.estado.devuelta .nota, .estado.aprobada p, .estado.enviada p { color: inherit; opacity: .9; }

/* ---------- Capa centrada (misión y apuntes) ---------- */
.capa {
  position: fixed; inset: 0; z-index: 50; background: var(--scrim); display: grid; place-items: center;
  padding: max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
  animation: aparecer 180ms ease-out;
}
.modal {
  width: min(100%, 1000px); max-height: 100%; overflow: auto; background: var(--superficie); color: var(--texto);
  border-radius: 22px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45); padding: 1.25rem 1.4rem 1.6rem;
  animation: subir 220ms ease-out;
}
.modal.lectura { width: min(100%, 780px); }
.modal-cab { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; position: sticky; top: -1.25rem; background: var(--superficie); padding: .25rem 0 .5rem; z-index: 1; }
.modal-cab h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); margin: 0; }
.modal-cab h2:focus { outline: none; }
.cerrar { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--borde); background: var(--superficie); flex: none; }
.cerrar:hover { background: var(--fondo); }
.cerrar svg { width: 1.3em; height: 1.3em; }
.modal-cuerpo { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .modal-cuerpo { grid-template-columns: 1fr 1fr; } }
.modal-col { min-width: 0; }
.modal-col h3 { margin-bottom: .5rem; }
.pasos { margin: 0 0 1rem; padding-left: 1.4rem; }
.pasos li { margin: .35rem 0; padding-left: .2rem; }
.pasos li::marker { font-weight: 700; color: var(--amarillo-tinta); }
.criterio { border-left: 4px solid var(--amarillo); background: var(--amarillo-suave); border-radius: 0 var(--radio-s) var(--radio-s) 0; padding: .7rem .9rem; margin-bottom: 1rem; }
.criterio b { display: block; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--amarillo-tinta); margin-bottom: .2rem; }
.criterio p { margin: 0; }
.pasos-envio { list-style: none; margin: 0; padding: 0; counter-reset: paso; display: grid; gap: 1rem; }
.pasos-envio > li { position: relative; padding-left: 2.4rem; }
.pasos-envio > li::before { counter-increment: paso; content: counter(paso); position: absolute; left: 0; top: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--amarillo); color: #1E2430; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); }
.pasos-envio > li > span { display: block; margin-bottom: .4rem; font-weight: 600; }
.prompt { position: relative; }
.prompt textarea { width: 100%; font-size: .9rem; background: var(--fondo); resize: vertical; padding-bottom: 2.8rem; }
.copiar { position: absolute; right: .5rem; bottom: .6rem; min-height: 36px; padding: .3rem .7rem; font-size: .88rem; }
.copiar.hecho { background: var(--ok-fondo); color: var(--ok); border-color: transparent; }
.historial { margin-top: 1.25rem; }
.historial summary { cursor: pointer; font-weight: 700; }
.envio { margin-bottom: .75rem; }
.envio-cab { display: flex; gap: .75rem; align-items: flex-start; justify-content: space-between; margin-bottom: .25rem; }
.envio h3 a { text-decoration: none; }
.comentario { background: var(--aviso-fondo); border-radius: var(--radio-s); padding: .6rem .8rem; }
details summary { cursor: pointer; color: var(--texto-suave); font-weight: 600; }

.apunte section { margin-bottom: 1.1rem; }
.apunte h3 { font-size: 1rem; color: var(--amarillo-tinta); margin-bottom: .3rem; }
.apunte ul { margin: 0; padding-left: 1.3rem; }
.apunte li { margin: .25rem 0; }
.apunte-tarjeta { display: flex; flex-direction: column; gap: .3rem; text-decoration: none; margin: 0; transition: transform var(--rapido), border-color var(--rapido); }
.apunte-tarjeta:hover { transform: translateY(-2px); border-color: var(--amarillo); }
.apunte-tarjeta svg { width: 1.5em; height: 1.5em; color: var(--amarillo-tinta); }
.apunte-tarjeta strong { font-family: var(--display); font-size: 1.1rem; }

/* ---------- Formularios ---------- */
.formulario { display: flex; flex-direction: column; gap: .9rem; }
.formulario.compacta { margin-bottom: 1rem; }
.formulario label { display: flex; flex-direction: column; gap: .3rem; font-weight: 700; font-size: .95rem; }
.formulario small, .ayuda { font-weight: 400; color: var(--texto-suave); font-size: .85rem; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  font: inherit; padding: .65rem .8rem; border: 1px solid var(--borde); border-radius: var(--radio-s);
  min-height: var(--alto-toque); background: var(--superficie); color: var(--texto); width: 100%;
}
textarea { line-height: 1.5; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid color-mix(in srgb, var(--amarillo) 70%, transparent); outline-offset: 2px; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: var(--alto-toque);
  padding: .6rem 1.1rem; border-radius: 12px; border: 1px solid var(--borde); background: var(--superficie);
  color: var(--texto); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background var(--rapido), transform var(--rapido);
}
.boton:hover { background: var(--fondo); }
.boton:active { transform: scale(.98); }
.boton.principal { background: var(--amarillo); border-color: var(--amarillo); color: #1E2430; }
.boton.principal:hover { background: color-mix(in srgb, var(--amarillo) 85%, #000); }
.boton.secundario { background: transparent; }
.boton.peligro { border-color: var(--error); color: var(--error); }
.boton.peligro:hover { background: var(--error-fondo); }
.botones { display: flex; flex-wrap: wrap; gap: .5rem; }
.aviso { padding: .75rem 1rem; border-radius: var(--radio-s); margin-bottom: 1rem; border: 1px solid; }
.aviso-ok { background: var(--ok-fondo); border-color: var(--ok); color: var(--ok); }
.aviso-error { background: var(--error-fondo); border-color: var(--error); color: var(--error); }
.aviso-info { background: var(--info-fondo); border-color: var(--info); color: var(--info); }

/* ---------- Panel de Hugo ---------- */
.tiles { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1rem; }
.tile { display: flex; flex-direction: column; text-decoration: none; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .9rem 1rem; box-shadow: var(--sombra); }
.tile b { font-family: var(--display); font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.tile span { color: var(--texto-suave); font-size: .9rem; margin-top: .3rem; }
.tile.atencion { border-color: var(--amarillo); background: var(--amarillo-suave); }
.tile.rojo { border-color: var(--rojo); }
.tile.rojo b { color: var(--rojo); }
.rojo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.rojo-lista li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.revision h3 { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.texto-evidencia { max-height: 22rem; overflow: auto; }
.revisar textarea { min-height: 3rem; }
.tabla-scroll { overflow-x: auto; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--superficie); }
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla th, .tabla td { text-align: left; padding: .65rem .75rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla th { background: var(--fondo); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr.baja { opacity: .6; }
.matriz td .pill { text-transform: capitalize; }
.matriz select { min-width: 11rem; min-height: 40px; padding: .35rem .5rem; }
.matriz form .boton { margin-top: .75rem; }

@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { transform: translateY(12px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }