/* ==============================================================
   Feria de Ciencia 2026 — Colegio Sophianum
   Identidad visual de la plataforma
   ==============================================================
   Paleta oficial del material grafico de la feria:

     #1B2A4A  azul profundo   estructura, encabezados, texto fuerte
     #2E7D8C  turquesa        acentos, enlaces, estados informativos
     #FFD200  amarillo        atencion, plazos, el trazo del escudo
     #E41F26  rojo            errores, penalizaciones, urgencias
     #F2F4F7  gris claro      fondo

   Lema: «Exploramos hoy, inspiramos el mañana»
   Divisa del colegio: «In Veritas, Libertas»

   EL AMARILLO NO SE USA PARA TEXTO
   Sobre blanco no llega al contraste minimo (AA pide 4.5:1 y el
   amarillo puro se queda en 1.5:1). Va como fondo, borde o filete;
   cuando hace falta texto de aviso se usa el ambar oscuro.
   ============================================================== */

:root{
  --navy:        #1B2A4A;
  --navy-claro:  #2A4272;
  --teal:        #2E7D8C;
  --teal-claro:  #E6F1F3;
  --amarillo:    #FFD200;
  --ambar:       #8A6400;   /* el amarillo, legible como texto */
  --rojo:        #E41F26;
  --rojo-oscuro: #8E1519;
  --rojo-suave:  #FDECEA;
  --verde:       #1E7A44;
  --verde-suave: #E4F4EA;

  --tinta:  #16202E;
  --gris:   #5A6470;
  --borde:  #D6DCE5;
  --fondo:  #F2F4F7;
  --papel:  #FFFFFF;

  --sombra:    0 1px 4px rgba(27,42,74,.09);
  --sombra-md: 0 8px 30px rgba(27,42,74,.13);
  --radio:     11px;

  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{ box-sizing: border-box }

body{
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.5;
}

/* --- Encabezado ------------------------------------------------ */
.cabecera{
  background: linear-gradient(135deg, var(--navy) 0%, #24365C 100%);
  color: #fff;
  padding: 11px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 20;
  /* El filete amarillo es el remate del escudo: ata la pantalla al
     material impreso de la feria. */
  border-bottom: 3px solid var(--amarillo);
}
.cabecera .escudo{ width: 34px; height: 34px; flex-shrink: 0 }
.cabecera .titulo{ flex: 1; min-width: 0 }
.cabecera h1{
  font-size: 15.5px; margin: 0; font-weight: 700; letter-spacing: .2px;
}
.cabecera .lema{
  font-size: 11.5px; opacity: .8; font-style: italic; margin: 0;
}
.cabecera .quien{ font-size: 13px; opacity: .88 }
.cabecera form{ margin: 0 }
.cabecera button{
  background: rgba(255,255,255,.15); color: #fff; border: 0;
  padding: 7px 13px; border-radius: 7px; font-size: 13px;
  cursor: pointer; font-family: inherit;
}
.cabecera button:hover{ background: rgba(255,255,255,.28) }

/* --- Pestañas --------------------------------------------------- */
.pestanas{
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
  padding: 0 18px;
  display: flex;
  gap: 4px;
  position: sticky;
  top: 51px;
  z-index: 19;
  overflow-x: auto;
}
.pestanas button{
  background: none; border: 0; border-bottom: 3px solid transparent;
  padding: 12px 15px; font-size: 14px; font-weight: 600;
  color: var(--gris); cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.pestanas button.activa{ color: var(--navy); border-bottom-color: var(--teal) }

main{ max-width: 1020px; margin: 0 auto; padding: 18px 16px 70px }

/* --- Tarjetas --------------------------------------------------- */
.tarjeta{
  background: var(--papel); border-radius: var(--radio); padding: 16px;
  margin-bottom: 13px; box-shadow: var(--sombra);
}
.tarjeta h2{ margin: 0 0 12px; font-size: 16px; color: var(--navy) }
.tarjeta h3{ margin: 0 0 4px; font-size: 15px }

/* --- Botones ---------------------------------------------------- */
.btn{
  background: var(--navy); color: #fff; border: 0; padding: 10px 15px;
  border-radius: 8px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit; text-decoration: none;
  display: inline-block;
}
.btn:hover{ background: var(--navy-claro) }
.btn:disabled{ opacity: .5; cursor: default }
.btn.claro{ background: var(--teal-claro); color: var(--navy) }
.btn.claro:hover{ background: #d3e6ea }
.btn.acento{ background: var(--teal) }
.btn.acento:hover{ background: #266976 }
.btn.peligro{ background: var(--rojo-suave); color: var(--rojo-oscuro) }
.btn.peligro:hover{ background: #f9d9d5 }
.btn.pequeno{ padding: 6px 11px; font-size: 13px }

/* --- Formularios ------------------------------------------------ */
label{ display: block; font-size: 13px; font-weight: 600; margin: 12px 0 5px }
input, select, textarea{
  width: 100%; padding: 10px 12px;
  font-size: 16px;               /* 16px evita el zoom automatico en iOS */
  font-family: inherit;
  border: 1.5px solid var(--borde); border-radius: 8px; background: #FDFDFE;
  color: var(--tinta);
}
textarea{ min-height: 74px; resize: vertical }
input:focus, select:focus, textarea:focus{
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(46,125,140,.16);
}
input:disabled, select:disabled{
  background: #F3F4F6; color: #8A8F98; cursor: not-allowed;
}

/* --- Etiquetas de estado ---------------------------------------- */
.etiqueta{
  display: inline-block; font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.et-ok  { background: var(--verde-suave); color: var(--verde) }
.et-pend{ background: #FFF6D9;            color: var(--ambar) }
.et-mal { background: var(--rojo-suave);  color: var(--rojo-oscuro) }
.et-gris{ background: #EEF1F6;            color: var(--gris) }
.et-info{ background: var(--teal-claro);  color: var(--teal) }

/* --- Avisos ----------------------------------------------------- */
.aviso{ padding: 11px 13px; border-radius: 8px; font-size: 13.5px; margin: 12px 0 }
.aviso.error{ background: var(--rojo-suave); color: var(--rojo-oscuro);
              border-left: 3px solid var(--rojo) }
.aviso.bien { background: var(--verde-suave); color: #166034;
              border-left: 3px solid var(--verde) }
.aviso.info { background: var(--teal-claro); color: #1F5B66;
              border-left: 3px solid var(--teal) }
.aviso.ojo  { background: #FFF6D9; color: var(--ambar);
              border-left: 3px solid var(--amarillo) }

/* --- Tablas ----------------------------------------------------- */
table{ width: 100%; border-collapse: collapse; font-size: 14px }
th{
  text-align: left; font-size: 12px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--gris); padding: 8px 9px;
  border-bottom: 2px solid var(--borde);
}
td{ padding: 9px; border-bottom: 1px solid #EEF1F6; vertical-align: middle }
tr:hover td{ background: #FAFBFD }
/* Las tablas anchas se desplazan DENTRO de su caja: el cuerpo de la
   pagina nunca se mueve en horizontal. */
.envoltorio{ overflow-x: auto }

/* --- Piezas sueltas --------------------------------------------- */
.codigo{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--gris); background: #EEF1F6;
  padding: 2px 7px; border-radius: 5px;
}
.clave{
  font-family: ui-monospace, Menlo, monospace; font-size: 15px;
  font-weight: 700; background: #fff; padding: 3px 9px;
  border-radius: 5px; user-select: all; border: 1px solid var(--borde);
}
.nota{ font-size: 12.5px; color: var(--gris); margin: 4px 0 0 }
.oculto{ display: none }
.vacio{ text-align: center; padding: 36px 20px; color: var(--gris) }
.vacio .icono{ font-size: 40px; margin-bottom: 8px }

/* ================================================================
   FERIA 2026 · CUADERNO DE LABORATORIO SOPHIANUM
   Capa visual común para las seis experiencias del sistema.
   ================================================================ */
:root{
  --tinta:#102A43; --tinta-2:#183B56; --azul:#173B67;
  --turquesa:#087F8C; --turquesa-claro:#E5F5F3;
  --amarillo:#F6C945; --rojo:#D64545; --papel:#F7F9F8;
  --linea:#D7E1E7; --muted:#526779;
  --sombra:0 12px 35px rgba(16,42,67,.09);
  --radio:14px; --display:Georgia,"Times New Roman",serif;
  --texto:"Avenir Next","Segoe UI",Arial,sans-serif;
  --dato:"Cascadia Mono","SFMono-Regular",Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  min-height:100vh; margin:0; color:var(--tinta); line-height:1.5;
  font-family:var(--texto);
  background-color:var(--papel);
  background-image:linear-gradient(rgba(23,59,103,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,59,103,.035) 1px,transparent 1px);
  background-size:28px 28px;
}
body::before{
  content:""; position:fixed; inset:0 0 auto; z-index:100; height:5px;
  background:linear-gradient(90deg,var(--amarillo) 0 58%,var(--rojo) 58% 72%,var(--turquesa) 72%);
}
h1,h2,h3{color:var(--tinta);letter-spacing:-.02em}
h1,h2{font-family:var(--display)}
a{color:var(--azul)}
button,input,select,textarea{font:inherit}
button,.btn,[type="submit"]{
  border-radius:8px!important; font-weight:750!important; letter-spacing:.01em;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
button:hover,.btn:hover,[type="submit"]:hover{
  transform:translateY(-1px);box-shadow:0 5px 14px rgba(16,42,67,.14)
}
button:active,.btn:active,[type="submit"]:active{transform:translateY(0)}
:focus-visible{outline:3px solid rgba(246,201,69,.8)!important;outline-offset:3px}
input,select,textarea{
  border:1px solid #C9D6DF!important;border-radius:8px!important;
  background:rgba(255,255,255,.96)!important;color:var(--tinta)!important
}
input:focus,select:focus,textarea:focus{
  border-color:var(--turquesa)!important;box-shadow:0 0 0 3px rgba(8,127,140,.12)!important
}
table{border-collapse:collapse}
th{
  color:var(--muted)!important;font-family:var(--dato);font-size:.75rem!important;
  letter-spacing:.06em;text-transform:uppercase
}
td{border-color:var(--linea)!important}
tbody tr:hover{background:#F2F8F7}
.codigo,code,.clave{font-family:var(--dato)!important;letter-spacing:.02em}
.etiqueta{border-radius:999px!important;font-family:var(--dato);font-size:.72rem!important}
.aviso{
  border-left:4px solid var(--turquesa)!important;border-radius:8px!important;
  background:var(--turquesa-claro)!important
}

/* Cabeceras institucionales */
.vista-admin>header,.vista-docente>header,.vista-publica>header,
.vista-resultados>header,.vista-jurado .cabecera{
  position:relative;overflow:hidden;border-bottom:0!important;
  background:radial-gradient(circle at 88% 15%,rgba(246,201,69,.14) 0 72px,transparent 73px),
    linear-gradient(125deg,#102A43,#173B67 62%,#176878)!important;
  box-shadow:0 7px 24px rgba(16,42,67,.18)
}
.vista-admin>header::after,.vista-docente>header::after,.vista-jurado .cabecera::after{
  position:absolute;right:max(22px,calc((100vw - 1120px)/2));bottom:12px;
  color:rgba(255,255,255,.67);font-family:var(--dato);font-size:.68rem;
  letter-spacing:.11em;text-transform:uppercase
}
.vista-admin>header::after{content:"CENTRO DE CONTROL"}
.vista-docente>header::after{content:"BITÁCORA DOCENTE"}
.vista-jurado .cabecera::after{content:"MESA DE EVALUACIÓN"}
.vista-admin>header h1,.vista-docente>header h1,.vista-publica>header h1,
.vista-resultados>header h1,.vista-jurado .cabecera h1,
.vista-admin>header p,.vista-docente>header p,.vista-publica>header p,
.vista-resultados>header p,.vista-jurado .cabecera p{color:#fff!important}
.vista-admin>header img,.vista-docente>header img,.vista-publica>header img,
.vista-resultados>header img,.vista-jurado .cabecera img{
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.22))
}

/* Navegación de aplicación */
.vista-admin>nav,.vista-docente .navegacion{
  position:sticky;top:5px;z-index:50;overflow-x:auto;border:0!important;
  border-bottom:1px solid var(--linea)!important;background:rgba(255,255,255,.94)!important;
  box-shadow:0 5px 16px rgba(16,42,67,.06);backdrop-filter:blur(14px);
  scrollbar-width:thin
}
.vista-admin>nav button,.vista-docente .navegacion button,.vista-docente .navegacion a{
  border-radius:0!important;border-bottom:3px solid transparent!important;
  background:transparent!important;color:var(--muted)!important;
  box-shadow:none!important;white-space:nowrap
}
.vista-admin>nav button:hover,.vista-docente .navegacion button:hover,
.vista-docente .navegacion a:hover,.vista-admin>nav button.activo,
.vista-docente .navegacion .activo{
  border-bottom-color:var(--turquesa)!important;color:var(--tinta)!important
}

/* Superficies con marcas de calibración */
.vista-admin main>section,.vista-docente main>section,.vista-jurado main>section,
.vista-jurado .panel-hero,.vista-publica main>div:not(.pie),.vista-resultados main>div{
  position:relative;border:1px solid var(--linea)!important;border-radius:var(--radio)!important;
  background:rgba(255,255,255,.97)!important;box-shadow:var(--sombra)!important
}
.vista-admin main>section::before,.vista-docente main>section::before,
.vista-jurado main>section::before,.vista-publica #contenido::before,
.vista-resultados #contenido::before{
  content:"";position:absolute;top:18px;left:-4px;width:7px;height:42px;border-radius:4px;
  background:repeating-linear-gradient(to bottom,var(--turquesa) 0 6px,transparent 6px 10px)
}
.vista-admin main,.vista-docente main,.vista-jurado main{
  width:min(1120px,calc(100% - 32px))!important;max-width:none!important;margin-inline:auto!important
}
.vista-admin .tarjeta,.vista-docente .tarjeta,.vista-jurado .tarjeta{
  border:1px solid var(--linea)!important;border-radius:12px!important;
  box-shadow:0 6px 18px rgba(16,42,67,.06)!important
}

/* Administración */
.vista-admin main>section>h2:first-child::after{
  content:" / REGISTRO";color:var(--turquesa);font-family:var(--dato);
  font-size:.55em;font-weight:500;letter-spacing:.08em
}
.vista-admin table{width:100%;background:#fff}
.vista-admin .resumen,.vista-admin .metricas{gap:10px!important}
.vista-admin .resumen>*,.vista-admin .metricas>*{
  border:1px solid var(--linea)!important;background:linear-gradient(145deg,#fff,#F2F8F7)!important
}

/* Docente */
.vista-docente .proyecto,.vista-docente [class*="proyecto"]{
  border-top:4px solid var(--amarillo)!important
}
.vista-docente .acciones{gap:8px!important}

/* Jurado */
.vista-jurado .panel-hero{
  overflow:hidden;border:0!important;color:#fff;
  background:linear-gradient(120deg,rgba(246,201,69,.12),transparent 35%),#173B67!important
}
.vista-jurado .panel-hero h1,.vista-jurado .panel-hero h2,
.vista-jurado .panel-hero p{color:#fff!important}
.vista-jurado .acciones-jurado{
  position:sticky;top:14px;z-index:40;padding:10px!important;
  border:1px solid var(--linea);border-radius:12px;background:rgba(255,255,255,.92);
  box-shadow:0 8px 22px rgba(16,42,67,.1);backdrop-filter:blur(12px)
}
.vista-jurado input[type="range"]{accent-color:var(--turquesa)}

/* Exposición pública y ranking */
.vista-publica>header,.vista-resultados>header{padding-block:24px!important;text-align:center}
.vista-publica main,.vista-resultados main{
  width:min(860px,calc(100% - 28px))!important;max-width:none!important;margin:26px auto 42px!important
}
.vista-publica #contenido,.vista-resultados #contenido{padding:clamp(22px,4vw,42px)!important}
.vista-publica #contenido h1,.vista-resultados #contenido h1{
  font-size:clamp(1.8rem,4vw,3rem)!important;line-height:1.04
}
.vista-publica #contenido h2,.vista-resultados #contenido h2{
  padding-bottom:9px;border-bottom:2px solid var(--amarillo)
}
.vista-publica .alumno,.vista-publica [class*="estudiante"]{
  border-radius:10px!important;transition:background .16s ease,border-color .16s ease,transform .16s ease
}
.vista-publica .seleccionado,.vista-publica [aria-pressed="true"]{
  border-color:var(--turquesa)!important;background:var(--turquesa-claro)!important;
  color:#075D66!important;transform:translateX(4px)
}
.vista-resultados table{
  overflow:hidden;border:1px solid var(--linea);border-radius:10px;background:#fff
}
.vista-resultados tbody tr:first-child{
  background:linear-gradient(90deg,rgba(246,201,69,.24),#fff)
}

/* Acceso */
.vista-acceso{
  display:grid!important;place-items:center;min-height:100vh;padding:28px;
  background:radial-gradient(circle at 15% 18%,rgba(246,201,69,.15) 0 90px,transparent 91px),
    radial-gradient(circle at 88% 82%,rgba(8,127,140,.18) 0 150px,transparent 151px),
    linear-gradient(135deg,#102A43,#173B67 58%,#0D6672)!important
}
.vista-acceso .caja{
  width:min(920px,100%)!important;max-width:none!important;display:grid;
  grid-template-columns:.9fr 1.1fr;overflow:hidden;padding:0!important;
  border:1px solid rgba(255,255,255,.35)!important;border-radius:18px!important;
  background:#fff!important;box-shadow:0 28px 80px rgba(3,18,35,.34)!important
}
.vista-acceso .marca{
  display:flex;flex-direction:column;justify-content:center;min-height:450px;
  padding:46px 36px!important;color:#fff;
  background:linear-gradient(rgba(16,42,67,.78),rgba(16,42,67,.88)),
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(255,255,255,.08) 28px),#173B67!important
}
.vista-acceso .marca h1,.vista-acceso .marca p{color:#fff!important}
.vista-acceso form{
  display:flex;flex-direction:column;justify-content:center;padding:48px!important
}
.vista-acceso form::before{
  content:"ACCESO A LA FERIA";margin-bottom:22px;color:var(--turquesa);
  font-family:var(--dato);font-size:.75rem;font-weight:800;letter-spacing:.12em
}
.vista-acceso .caja>.pie{
  grid-column:1/-1;margin:0!important;padding:18px 28px!important;
  border-top:1px solid var(--linea);background:#F8FAFB;text-align:center
}

@media(max-width:720px){
  body::before{height:4px}
  .vista-admin main,.vista-docente main,.vista-jurado main{
    width:min(100% - 18px,1120px)!important
  }
  .vista-admin>header::after,.vista-docente>header::after,.vista-jurado .cabecera::after{display:none}
  .vista-acceso{padding:14px}
  .vista-acceso .caja{grid-template-columns:1fr}
  .vista-acceso .marca{min-height:auto;padding:28px 24px!important}
  .vista-acceso form{padding:30px 24px 36px!important}
  .vista-publica #contenido,.vista-resultados #contenido{padding:22px 18px!important}
  table{font-size:.86rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
}