/* Portal del Primer Concurso de Programación · identidad verde y oro UAEM con acentos de código. */
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light;
  --verde: #173d24; --verde-2: #245c35; --verde-claro: #e7efe6;
  --oro: #c9a23a; --oro-claro: #f3e7c2; --oro-osc: #7a5d0e;
  --azul: #1d4c9a;
  --crema: #f7f5ee; --texto: #1b2a20; --suave: #56625a; --borde: #dcd6c2;
  --alerta: #9a3412; --alerta-bg: #fff4ec;
  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --ancho: 1040px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.6 var(--sans); color: var(--texto); background: var(--crema); }
img { max-width: 100%; height: auto; }
a { color: var(--verde-2); }
.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.mono { font-family: var(--mono); }
.etiqueta { font-family: var(--mono); font-size: .8rem; color: var(--oro-osc); letter-spacing: .02em; margin: 0; }

/* --- Encabezado institucional ------------------------------------------------ */
.institucional { background: #fff; border-bottom: 3px solid var(--oro); }
.institucional .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; padding-bottom: 10px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; }
.marca img { width: 52px; height: auto; flex: none; }
.marca .nombre { line-height: 1.25; min-width: 0; }
.marca .nombre strong { display: block; font-size: .95rem; font-weight: 700; color: var(--verde); }
.marca .nombre span { display: block; font-size: .8rem; color: var(--suave); }
.aliado { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.aliado .texto { text-align: right; line-height: 1.25; font-size: .75rem; color: var(--suave); }
.aliado .texto strong { display: block; font-size: .85rem; color: var(--azul); font-weight: 700; }
.aliado img { width: 52px; height: auto; flex: none; }

.navegacion { background: var(--verde); }
.navegacion .contenedor { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; padding-top: 10px; padding-bottom: 10px; }
.navegacion .titulo { color: #fff; font-weight: 700; font-size: .95rem; margin-right: auto; text-decoration: none; }
.navegacion .titulo span { color: var(--oro); }
.navegacion nav a { color: #e3ebe5; text-decoration: none; font-size: .9rem; margin-right: 18px; }
.navegacion nav a:last-child { margin-right: 0; }
.navegacion nav a:hover, .navegacion nav a[aria-current="page"] { color: var(--oro); }

/* --- Portada ----------------------------------------------------------------- */
.portada {
  background-color: var(--verde);
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 26px 26px; color: #fff;
}
.portada .contenedor { padding-top: 48px; padding-bottom: 44px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.portada .etiqueta { color: var(--oro); }
.portada .cursor { animation: parpadeo 1.1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.portada h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.08; font-weight: 800; margin: 10px 0 12px; color: #fff; letter-spacing: -.01em; }
.portada h1 span { color: var(--oro); }
.portada .lema { font-size: 1.08rem; color: #d5e0d8; max-width: 560px; margin: 0 0 18px; }
.lenguajes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.lenguajes li { font-family: var(--mono); font-size: .9rem; padding: 5px 14px; border-radius: 6px; background: rgba(255,255,255,.07); border: 1px solid rgba(201,162,58,.55); color: var(--oro-claro); }
.acciones { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px 32px; }
.estado-portada { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 12px 16px; color: #e3ebe5; max-width: 520px; }
.estado-portada strong { color: #fff; }
.cuenta { display: flex; gap: 16px; }
.cuenta div { text-align: center; min-width: 48px; }
.cuenta b { display: block; font-family: var(--mono); font-size: 1.9rem; line-height: 1.1; font-weight: 500; color: #fff; }
.cuenta span, .rotulo { font-size: .72rem; color: #c9d6cc; text-transform: lowercase; }
.fecha-evento { border-left: 3px solid var(--oro); padding-left: 16px; }
.fecha-evento b { display: block; font-size: 1.6rem; line-height: 1.15; color: #fff; }
.fecha-evento span { display: block; color: #d5e0d8; font-size: .9rem; }
.sello { width: 190px; background: #fff; border-radius: 50%; padding: 22px; border: 4px solid var(--oro); }

/* --- Botones ------------------------------------------------------------------ */
.boton, button { display: inline-flex; align-items: center; gap: 8px; background: var(--verde-2); color: #fff; border: 0; border-radius: 8px; padding: 12px 24px; font: 600 1rem var(--sans); cursor: pointer; text-decoration: none; }
.boton:hover, button:hover { background: var(--verde); }
.boton-oro { background: var(--oro); color: #1f1a08; font-size: 1.05rem; padding: 14px 28px; }
.boton-oro:hover { background: #d9b44c; color: #1f1a08; }

/* --- Contenido ---------------------------------------------------------------- */
main { padding: 36px 0 56px; }
main h1 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 10px; color: var(--verde); font-weight: 800; }
main h2 { font-size: 1.3rem; margin: 28px 0 8px; color: var(--verde); font-weight: 700; }
.seccion { margin: 0 0 40px; }
.seccion > h2 { margin-top: 2px; }
.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 22px 24px; margin: 16px 0; }
.aviso { background: var(--verde-claro); border-left: 4px solid var(--verde-2); padding: 12px 16px; margin: 16px 0; }
.alerta { background: var(--alerta-bg); border-left: 4px solid var(--alerta); padding: 12px 16px; margin: 16px 0; }
ul.limpia { padding-left: 20px; }

.categorias { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.categoria { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; }
.categoria.destacada { border: 2px solid var(--oro); }
.categoria header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.categoria h3 { margin: 0; font-size: 1.15rem; color: var(--verde); }
.categoria .nivel { font-family: var(--mono); font-size: .75rem; color: var(--oro-osc); }
.categoria p { font-size: .9rem; color: var(--suave); margin: 6px 0 14px; flex: 1; }
.barra { height: 8px; border-radius: 4px; background: #ece6d3; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--verde-2); }
.categoria.destacada .barra i { background: var(--oro); }
.conteo { font-size: .8rem; color: var(--suave); margin-top: 6px; }
.conteo.ultimos { color: var(--oro-osc); font-weight: 600; }

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.dato { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 16px 18px; }
.dato b { display: block; font-size: 1.35rem; color: var(--verde); }
.dato span { font-size: .85rem; color: var(--suave); }

.cronograma { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cronograma li { border-top: 4px solid var(--borde); padding-top: 10px; }
.cronograma li.hecho { border-color: var(--verde-2); }
.cronograma li.clave { border-color: var(--oro); }
.cronograma b { display: block; color: var(--verde); }
.cronograma span { font-size: .85rem; color: var(--suave); }

/* --- Formularios ---------------------------------------------------------------- */
.campo { margin: 16px 0; }
label { display: block; font-weight: 600; margin-bottom: 5px; }
label.check { font-weight: 400; display: flex; gap: 10px; align-items: flex-start; }
label.check input { margin-top: 5px; accent-color: var(--verde-2); width: 18px; height: 18px; flex: none; }
input[type=text], input[type=email], input[type=number], select, textarea { width: 100%; padding: 10px 12px; border: 1px solid #b9c4be; border-radius: 8px; font: inherit; background: #fff; }
input:focus, select:focus, textarea:focus, button:focus, a:focus { outline: 3px solid var(--oro); outline-offset: 2px; }
small { color: var(--suave); display: block; margin-top: 4px; }
.errorlist { list-style: none; margin: 4px 0 0; padding: 0; color: var(--alerta); font-size: .93rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { border: 1px solid var(--borde); padding: 10px 12px; text-align: left; }
th { background: var(--verde-claro); color: var(--verde); }

/* --- Pie --------------------------------------------------------------------- */
.pie { background: var(--verde); color: #c9d6cc; border-top: 3px solid var(--oro); font-size: .88rem; }
.pie .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding-top: 22px; padding-bottom: 22px; }
.pie .logos { display: flex; gap: 12px; }
.pie .logos img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 50%; padding: 6px; }
.pie .texto { flex: 1; min-width: 220px; line-height: 1.5; }
.pie a { color: var(--oro-claro); }

/* --- Celular ------------------------------------------------------------------- */
@media (max-width: 760px) {
  .portada .contenedor { grid-template-columns: 1fr; padding-top: 34px; padding-bottom: 34px; }
  .sello { display: none; }
  .aliado .texto { display: none; }
  .marca img, .aliado img { width: 44px; }
  .marca .nombre strong { font-size: .85rem; }
  .cronograma { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .navegacion .titulo { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .portada .cursor { animation: none; } }