/* Test de Brightspace — Sistema visual Anáhuac Mayab
   Tokens copiados de los Lineamientos de estilo para interactivos v1.0 */

@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@300;400;500;600&family=Roboto:wght@300;400;500;700&display=swap');

:root{
  /* Marca */
  --brand-orange:#FF5900;
  --brand-brown:#6B3F23;
  /* Neutros (extensión de sistema) */
  --n-0:#FFFFFF; --n-50:#F7F5F3; --n-100:#EDE9E5;
  --n-200:#D8D1CB; --n-500:#8A817B; --n-800:#3D3733; --n-900:#282726;
  /* Semánticos */
  --fb-ok:#0F7A4B; --fb-err:#EA2828; --fb-warn:#FFDA00; --fb-info:#0F66AB;
  /* Tipografía */
  --font-display:'Zilla Slab',Georgia,serif;
  --font-body:'Roboto',system-ui,sans-serif;
  /* Espaciado y forma */
  --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;
  --r-control:4px; --r-card:8px;
  --e-1:0 1px 2px rgba(40,39,38,.08);
  --e-2:0 4px 12px rgba(40,39,38,.12);
  --t-fast:150ms; --t-base:250ms;
  --ease:cubic-bezier(.2,0,0,1);
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

*{box-sizing:border-box;margin:0}
html{font-size:16px}
body{
  font:400 1rem/1.6 var(--font-body);
  color:var(--n-900);
  background:var(--n-0);
  min-height:100vh;
}

/* Encabezado con pleca naranja (gesto estructural del sistema) */
header{
  border-bottom:4px solid var(--brand-orange);
  padding:var(--s-4) var(--s-5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  background:var(--n-0);
  position:sticky;top:0;z-index:10;
}
header .marca{font:600 1.125rem var(--font-display);color:var(--n-900)}
header .marca span{color:var(--brand-orange)}
header .area{font:700 .75rem var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--n-500)}
header .logo-area{height:40px;width:auto}

main{max-width:720px;margin:0 auto;padding:var(--s-6) var(--s-5) var(--s-7)}

h1{font:600 2rem/1.15 var(--font-display);margin-bottom:var(--s-4)}
h2{font:500 1.5rem/1.25 var(--font-display);margin-bottom:var(--s-3)}
p{max-width:68ch}
.lead{font-size:1.125rem;color:var(--n-800)}
.small{font-size:.875rem;color:var(--n-500)}
a{color:var(--brand-brown);text-decoration:underline}

/* Botones (§7.1 de los lineamientos) */
.btn{
  font:500 1rem/1 var(--font-body);
  padding:14px 24px;
  border:2px solid transparent;border-radius:var(--r-control);
  min-height:44px;cursor:pointer;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.btn--primary{background:var(--brand-orange);color:var(--n-900)}
.btn--primary:hover{background:var(--brand-brown);color:var(--n-0)}
.btn--primary:disabled{background:var(--n-200);color:var(--n-500);cursor:not-allowed}
.btn--secondary{background:transparent;border-color:var(--brand-orange);color:var(--brand-brown)}
.btn--secondary:hover{background:var(--brand-orange);color:var(--n-900)}
.btn:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--fb-info);outline-offset:2px;
}

/* Formularios */
label{display:block;font-weight:500;margin-bottom:var(--s-2)}
input[type=text],input[type=email],textarea{
  font:400 1rem var(--font-body);
  width:100%;padding:12px var(--s-4);
  border:1px solid var(--n-200);border-radius:var(--r-control);
  background:var(--n-0);color:var(--n-900);
  min-height:48px;
}
textarea{min-height:96px;resize:vertical;line-height:1.6}
.campo{margin-bottom:var(--s-5)}
.codigo-input{font:600 1.75rem var(--font-display);letter-spacing:.35em;text-align:center}

/* Avisos con pleca lateral: siempre ícono + texto, no solo color */
.aviso{
  display:flex;gap:var(--s-3);align-items:flex-start;
  padding:var(--s-4);border-radius:var(--r-control);
  border-left:4px solid;margin:var(--s-4) 0;
  font-size:.9375rem;
}
.aviso--info{border-color:var(--fb-info);background:#F0F5FA}
.aviso--ok{border-color:var(--fb-ok);background:#F0F7F3}
.aviso--err{border-color:var(--fb-err);background:#FDF1F1}
.aviso--warn{border-color:#C9A800;background:#FFFBE5}
.aviso svg{flex:none;margin-top:2px}

/* Barra de progreso (§7.6) */
.progreso{margin:var(--s-4) 0 var(--s-5)}
.progreso .riel{height:8px;background:var(--n-100);border-radius:999px;overflow:hidden}
.progreso .relleno{height:100%;background:var(--brand-orange);transition:width var(--t-base) var(--ease)}
.progreso .etiqueta{font-size:.875rem;color:var(--n-500);margin-top:var(--s-2)}

/* Barra del examen (timer + progreso), elevación L1 */
.barra-examen{
  position:sticky;top:65px;z-index:9;
  background:var(--n-50);border-bottom:1px solid var(--n-100);
  padding:var(--s-3) var(--s-5);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);
  margin:calc(-1 * var(--s-6)) calc(-1 * var(--s-5)) var(--s-5);
}
.timer{font:600 1.25rem var(--font-display);color:var(--n-900);display:flex;gap:var(--s-2);align-items:center}
.timer.alerta{color:var(--fb-info)}
.timer svg{color:var(--brand-orange)}

/* Reactivo */
.reactivo-tema{font:700 .75rem var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--brand-orange);margin-bottom:var(--s-2)}
.enunciado{font:500 1.5rem/1.25 var(--font-display);margin-bottom:var(--s-5)}
.contexto{
  background:var(--n-50);border-radius:var(--r-card);
  padding:var(--s-4);margin-bottom:var(--s-5);font-style:italic;color:var(--n-800);
}
.captura{
  border:1px solid var(--n-100);border-radius:var(--r-card);
  margin-bottom:var(--s-5);min-height:120px;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  background-color:var(--n-50);
  position:relative;
}
.captura::after{content:'';position:absolute;inset:0}  /* capa anti "guardar imagen" */
.captura.placeholder{display:flex;align-items:center;justify-content:center;color:var(--n-500);font-size:.875rem;padding:var(--s-5)}

/* Opciones (§7.5): ancho completo, 48px, radio 4 */
.opciones{display:flex;flex-direction:column;gap:var(--s-3)}
.opcion{
  display:flex;gap:var(--s-3);align-items:flex-start;text-align:left;
  width:100%;min-height:48px;padding:var(--s-3) var(--s-4);
  font:400 1rem/1.5 var(--font-body);color:var(--n-900);
  background:var(--n-0);border:1px solid var(--n-200);border-radius:var(--r-control);
  cursor:pointer;
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.opcion:hover{border-color:var(--brand-orange);background:var(--n-50)}
.opcion.seleccionada{border:2px solid var(--brand-orange);background:var(--n-50)}
.opcion .letra{font:600 1rem var(--font-display);color:var(--brand-orange);flex:none}
.opcion:disabled{cursor:default;opacity:.75}

/* Elementos de caso */
.elemento-caso{margin-bottom:var(--s-5)}
.elemento-caso label{font-weight:500}
.elemento-caso .num{color:var(--brand-orange);font:600 1rem var(--font-display);margin-right:var(--s-2)}

/* Resultado */
.puntaje-bloque{text-align:center;padding:var(--s-6) 0}
.puntaje-cifra{font:600 5rem/1 var(--font-display);color:var(--brand-orange)}
.puntaje-etiqueta{font:700 .75rem var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--n-500);margin-top:var(--s-2)}
.desglose{margin:var(--s-5) 0}
.desglose-fila{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) 0;font-size:.9375rem}
.desglose-fila .riel{flex:1;height:8px;background:var(--n-100);border-radius:999px;overflow:hidden}
.desglose-fila .relleno{height:100%;background:var(--brand-orange)}
.desglose-fila .tema{width:220px;flex:none}
.desglose-fila .valor{width:90px;text-align:right;flex:none;color:var(--n-500);font-size:.875rem}

.caso-retro{border:1px solid var(--n-100);border-radius:var(--r-card);padding:var(--s-4);margin-bottom:var(--s-4)}
.caso-retro h3{font:500 1.125rem var(--font-display);margin-bottom:var(--s-3)}
.elemento-retro{display:flex;gap:var(--s-3);padding:var(--s-2) 0;font-size:.9375rem;align-items:flex-start}
.elemento-retro svg{flex:none;margin-top:3px}

/* Instrucciones */
.lista-instrucciones{list-style:none;margin:var(--s-5) 0}
.lista-instrucciones li{display:flex;gap:var(--s-3);padding:var(--s-2) 0;align-items:flex-start}
.lista-instrucciones svg{flex:none;color:var(--brand-orange);margin-top:4px}
.check-honestidad{display:flex;gap:var(--s-3);align-items:flex-start;margin:var(--s-5) 0;padding:var(--s-4);background:var(--n-50);border-radius:var(--r-card)}
.check-honestidad input{width:20px;height:20px;margin-top:3px;accent-color:var(--brand-orange)}

/* Anticopia: solo dentro del contenedor del examen (§5.3) */
.no-copiar, .no-copiar *{
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
.no-copiar input, .no-copiar textarea{
  -webkit-user-select:text;user-select:text;  /* los campos de respuesta sí se editan */
}

@media print{ body{visibility:hidden} body::before{
  content:'Este contenido no está disponible para impresión.';visibility:visible;
  display:block;padding:48px;font:1rem Roboto,sans-serif}
}

footer{border-top:1px solid var(--n-100);padding:var(--s-5);text-align:center;color:var(--n-500);font-size:.875rem}

.oculto{display:none !important}
@media (max-width:480px){
  .enunciado{font-size:1.25rem}
  .desglose-fila .tema{width:120px;font-size:.8125rem}
  header{padding:var(--s-3) var(--s-4)}
}