/* ==================================================================
   Premiaciones CD Cúcuta: tokens
   Hermana de Metas Cúcuta: el mismo navy de patio logístico.
   El dorado del trofeo es la única señal; plata y bronce solo marcan puestos.
=================================================================== */
:root {
  --ink: #13213C;
  --ink-2: #1F3157;
  --ink-3: #3B5280;
  --bg: #EEF1F6;
  --surface: #FFFFFF;
  --line: #DFE4EC;
  --text: #18233B;
  --muted: #66728A;

  --oro: #D99A1E;
  --oro-claro: #F7E5B5;
  --oro-texto: #8A5B00;
  --plata: #5F86C9;
  --plata-claro: #DCE6F7;
  --plata-texto: #34558F;
  --bronce: #B5602A;
  --bronce-claro: #F5DDCB;
  --bronce-texto: #8A4316;
  --resto: #CDD4E0;
  --resto-claro: #F1F3F7;

  --ok: #129A68;
  --ok-bg: #E3F5EE;
  --warn: #E2851B;
  --warn-bg: #FDF0DF;
  --bad: #D63F48;
  --bad-bg: #FBE6E7;

  --display: 'Bricolage Grotesque', Poppins, system-ui, sans-serif;
  --radio-s: 8px;
  --radio: 14px;
  --radio-l: 22px;
  --sombra: 0 1px 2px rgb(19 33 60 / 6%), 0 8px 24px -12px rgb(19 33 60 / 18%);
  --t: 180ms cubic-bezier(.2, .7, .2, 1);
  --lateral: 256px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 14px/1.55 Poppins, system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1 { font: 700 24px/1.2 var(--display); letter-spacing: -.02em; }
h2 { font-size: 15px; font-weight: 600; line-height: 1.35; }
h3 { font-size: 13.5px; font-weight: 600; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
svg.lucide { width: 18px; height: 18px; stroke-width: 2; flex: none; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.tenue { color: var(--muted); }
.fuerte { font-weight: 600; }
.t-oro { color: var(--oro-texto); } .t-plata { color: var(--plata-texto); } .t-bronce { color: var(--bronce-texto); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
  font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.btn:hover { border-color: #C3CBD8; }
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-primario:hover { background: var(--ink-2); border-color: var(--ink-2); box-shadow: 0 6px 16px -8px var(--ink); }
.btn-primario svg { color: var(--oro); }
.btn-fantasma { background: transparent; border-color: rgb(255 255 255 / 18%); color: #fff; height: 36px; }
.btn-fantasma:hover { background: var(--ink-2); border-color: var(--ink-3); }
.btn-claro { background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 20%); color: #fff; height: 36px; }
.btn-claro:hover { background: rgb(255 255 255 / 18%); border-color: rgb(255 255 255 / 30%); }
.btn-claro.peligro:hover { background: var(--bad); border-color: var(--bad); }
.btn-bloque { width: 100%; height: 48px; font-size: 15px; }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.cargando svg { animation: girar 1s linear infinite; }
.icono-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: 10px; border: 0; background: transparent; cursor: pointer;
  color: var(--muted); transition: background var(--t), color var(--t);
}
.icono-btn:hover:not(:disabled) { background: var(--resto-claro); color: var(--text); }
.icono-btn:disabled { opacity: .35; cursor: default; }
.enlace-suave { border: 0; background: none; padding: 0; color: var(--muted); font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.enlace-suave:hover { color: var(--bad); }

/* ---------- Campos ---------- */
.campo { display: grid; gap: 6px; min-width: 0; }
.campo > span { font-size: 13px; font-weight: 500; }
.campo input {
  height: 44px; width: 100%; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  transition: border-color var(--t), box-shadow var(--t);
}
.campo input:focus, .buscador input:focus, .selector select:focus {
  outline: none; border-color: var(--ink-3); box-shadow: 0 0 0 4px rgb(59 82 128 / 14%);
}
.input-icono { position: relative; }
.input-icono > svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--muted); pointer-events: none; }
.input-icono input { padding-left: 44px; height: 50px; font-size: 15px; }
.ver-clave { position: absolute; right: 6px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 38px; height: 38px; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 8px; }
.buscador { position: relative; display: block; }
.buscador svg { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--muted); width: 16px; height: 16px; pointer-events: none; }
.buscador input { height: 38px; width: min(280px, 100%); padding: 0 12px 0 36px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.buscador.grande input { height: 44px; width: 100%; }
.interruptor { display: flex; align-items: center; gap: 12px; font-size: 13.5px; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; }
.interruptor span { width: 40px; height: 24px; border-radius: 999px; background: var(--resto); position: relative; transition: background var(--t); flex: none; }
.interruptor span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 20%); transition: translate var(--t); }
.interruptor input:checked + span { background: var(--ok); }
.interruptor input:checked + span::after { translate: 16px 0; }
.interruptor input:focus-visible + span { outline: 3px solid var(--oro); outline-offset: 2px; }

/* ==================================================================
   Login
=================================================================== */
body.login { background: var(--surface); transition: opacity .35s; }
body.login.saliendo { opacity: 0; }
.login-grid { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.login-escena {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 70% at 50% 20%, #24396A 0%, var(--ink) 62%);
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 40px 48px;
}
.marca { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 16px; position: relative; z-index: 1; }
.marca b { font-weight: 600; color: #fff; }
.login-escena .marca { color: #B7C3DB; }
.podio-svg { width: min(460px, 86%); align-self: center; margin-top: 12px; overflow: visible; }
.podio-svg .rayos path { stroke: var(--oro); stroke-width: 2; opacity: 0; stroke-linecap: round; stroke-dasharray: 4 10; animation: aparecer-opacidad .8s ease-out 1.5s forwards; }
.podio-svg .esc rect { fill: var(--ink-2); stroke: #2C4473; stroke-width: 2; }
.podio-svg .esc-1 rect { fill: #263C6B; }
.podio-svg .esc text { fill: #fff; font: 800 64px var(--display); text-anchor: middle; opacity: .92; }
.podio-svg .esc-1 text { fill: var(--oro); font-size: 84px; }
.podio-svg .esc { transform-box: fill-box; transform-origin: bottom; animation: subir .7s cubic-bezier(.3, 1.3, .5, 1) both; }
.podio-svg .esc-2 { animation-delay: .15s; }
.podio-svg .esc-3 { animation-delay: .3s; }
.podio-svg .esc-1 { animation-delay: .45s; }
.podio-svg .tapas rect { opacity: 0; animation: aparecer-opacidad .3s ease-out forwards; }
.podio-svg .t2 { fill: var(--plata); animation-delay: .75s !important; }
.podio-svg .t3 { fill: var(--bronce); animation-delay: .85s !important; }
.podio-svg .t1 { fill: var(--oro); animation-delay: 1s !important; }
.podio-svg .corona { fill: var(--oro); opacity: 0; transform-box: fill-box; transform-origin: center; animation: coronar .6s cubic-bezier(.3, 1.4, .5, 1) 1.15s forwards; }
.login-lema { position: relative; z-index: 1; max-width: 32ch; }
.login-lema h1 { font: 700 clamp(28px, 3.2vw, 42px)/1.08 var(--display); letter-spacing: -.03em; margin-bottom: 14px; text-wrap: balance; }
.login-lema p { color: #B7C3DB; font-size: 15px; max-width: 44ch; }
.login-panel { display: grid; place-items: center; padding: 40px 24px; }
.login-form { width: min(380px, 100%); display: grid; gap: 18px; }
.login-form h2 { font: 700 28px/1.15 var(--display); letter-spacing: -.02em; }
.login-form .sub { color: var(--muted); margin-top: -10px; }
.login-logo-movil { display: none; }
.error-login, .error-form {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px;
  background: var(--bad-bg); color: #A62B33; font-size: 13px; font-weight: 500;
}
.ayuda { color: var(--muted); font-size: 13px; text-align: center; }
.sacudir { animation: sacudir .4s; }

/* ==================================================================
   Estructura
=================================================================== */
.lateral {
  position: fixed; inset: 0 auto 0 0; width: var(--lateral); z-index: 30;
  display: flex; flex-direction: column; gap: 8px; padding: 22px 14px 14px;
  background: var(--ink); color: #D5DDEC;
}
.lateral .marca { color: #B7C3DB; padding: 0 8px 18px; font-size: 15px; }
#nav { flex: 1; display: grid; align-content: start; gap: 2px; }
#nav a {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 10px; font-size: 13.5px; transition: background var(--t), color var(--t);
}
#nav a svg { color: #8494B3; transition: color var(--t); }
#nav a:hover { background: var(--ink-2); color: #fff; }
#nav a.activo { background: var(--ink-2); color: #fff; font-weight: 500; }
#nav a.activo::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--oro); }
#nav a.activo svg { color: var(--oro); }
.perfil { display: flex; align-items: center; gap: 10px; padding: 12px 8px 4px; border-top: 1px solid var(--ink-2); }
.perfil > div { flex: 1; min-width: 0; display: grid; }
.perfil strong { color: #fff; font-weight: 500; font-size: 13px; }
.perfil small { color: #8494B3; font-size: 12px; }
.perfil .icono-btn { color: #8494B3; }
.perfil .icono-btn:hover { background: var(--ink-2); color: #fff; }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none; background: var(--oro); color: var(--ink); font-weight: 600; font-size: 13px; }

.principal { margin-left: var(--lateral); min-height: 100vh; }
.rol-colaborador .principal { margin-left: 0; }
.barra {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 32px; background: rgb(238 241 246 / 88%); backdrop-filter: blur(10px);
}
.barra-titulo { flex: 1; min-width: 200px; }
.barra-titulo p { color: var(--muted); font-size: 13px; }
.barra-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.menu-movil { display: none; }
.selector-periodo { display: flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 2px; }
.selector-periodo select, .selector select { height: 36px; border: 0; padding: 0 8px; font-weight: 500; background: transparent; cursor: pointer; }
.selector-periodo select:focus-visible { outline: 2px solid var(--oro); }
.selector { position: relative; display: flex; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 2px 4px 2px 34px; }
.selector svg { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.selector select { max-width: 240px; }
.vista { padding: 8px 32px 56px; display: grid; gap: 22px; outline: none; max-width: 1440px; }
.rol-colaborador .vista { max-width: 1120px; margin: 0 auto; padding-top: 28px; }

.cabecera-colab {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px max(20px, calc((100vw - 1120px) / 2 + 32px)); background: var(--ink); color: #B7C3DB;
}
.cabecera-colab .marca { font-size: 15px; }

.tarjeta { background: var(--surface); border-radius: var(--radio); box-shadow: var(--sombra); padding: 20px; min-width: 0; }
.tarjeta-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.nota { color: var(--muted); font-size: 12.5px; }
.grupo { display: grid; gap: 12px; }
.grupo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 4px 2px 0; }
.grupo-cab h2 { font: 700 19px/1.2 var(--display); letter-spacing: -.01em; }

/* ---------- Fotos ----------
   Las iniciales van debajo de la imagen: si no hay foto o falla, se ven. */
.foto {
  --tam: 38px;
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--tam); height: var(--tam); border-radius: 50%; overflow: hidden;
  background: var(--plata-claro); color: var(--ink-3);
}
.foto .ini { font: 700 calc(var(--tam) * .36) / 1 var(--display); letter-spacing: -.02em; }
.foto svg { width: 50%; height: 50%; }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto-xs { --tam: 28px; }
.foto-sm { --tam: 36px; }
.foto-lg { --tam: 96px; }
.foto-xl { --tam: 148px; }
.foto-podio { --tam: 112px; }

/* ---------- Medallas ---------- */
.medalla {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none;
  font: 700 12px/1 var(--display); color: #fff; font-variant-numeric: tabular-nums;
}
.m-oro { background: var(--oro); } .m-plata { background: var(--plata); } .m-bronce { background: var(--bronce); }
.medalla.m-resto { background: var(--resto-claro); color: var(--muted); }
.punto-m { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cuadro { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.cuadro.m-resto { background: var(--resto-claro); box-shadow: inset 0 0 0 1px var(--resto); }
.leyenda { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--muted); font-size: 12.5px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.chip svg { width: 14px; height: 14px; }
.chip-ok { background: var(--ok-bg); color: #0B7A51; }
.chip-warn { background: var(--warn-bg); color: #A65A05; }
.chip-none { background: var(--resto-claro); color: var(--muted); }
.aviso { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: var(--oro-claro); color: #6B4500; font-weight: 500; font-size: 13px; }
.aviso-suave { background: var(--resto-claro); color: var(--muted); }


/* ---------- Estados ---------- */
.vacio { display: grid; justify-items: center; gap: 14px; padding: 56px 20px; text-align: center; color: var(--muted); background: var(--surface); border-radius: var(--radio); grid-column: 1 / -1; }
.vacio > svg { width: 36px; height: 36px; color: var(--ink-3); }
.vacio p { max-width: 46ch; }
.vacio-suave { padding: 32px 20px; }
.cargando-vista { display: flex; justify-content: center; gap: 8px; padding: 80px 0; }
.cargando-vista span { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); animation: rebote 1s ease-in-out infinite; }
.cargando-vista span:nth-child(2) { animation-delay: .15s; background: var(--oro); }
.cargando-vista span:nth-child(3) { animation-delay: .3s; }

.avisos { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: grid; gap: 8px; justify-items: end; }
.aviso-flotante {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px;
  background: var(--ink); color: #fff; font-weight: 500; font-size: 13.5px; box-shadow: 0 12px 32px -12px rgb(19 33 60 / 60%);
  animation: entrar-aviso .3s cubic-bezier(.3, 1.2, .5, 1); max-width: min(420px, calc(100vw - 40px));
}
.aviso-flotante.a-ok svg { color: #5BD7A6; }
.aviso-flotante.a-error { background: #8E2229; }
.aviso-flotante.saliendo { opacity: 0; translate: 0 8px; transition: opacity .3s, translate .3s; }

.tip {
  position: fixed; z-index: 90; pointer-events: none; padding: 8px 11px; border-radius: 9px;
  background: var(--ink); color: #DCE6F7; font-size: 12.5px; line-height: 1.45; max-width: 260px;
  box-shadow: 0 8px 24px -8px rgb(19 33 60 / 50%);
}
.tip b { color: #fff; font-weight: 600; }

.visor { border: 0; padding: 0; background: transparent; max-width: min(960px, 94vw); max-height: 94vh; overflow: visible; }
.visor::backdrop { background: rgb(10 18 34 / 82%); backdrop-filter: blur(4px); }
.visor figure { display: grid; gap: 12px; }
.visor img { max-width: 100%; max-height: 78vh; border-radius: 14px; display: block; margin: 0 auto; box-shadow: 0 24px 60px -20px rgb(0 0 0 / 60%); }
.visor figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: #DCE6F7; font-size: 13.5px; }
.visor figcaption b { color: #fff; }
.visor-acciones { display: flex; gap: 8px; }
.visor-cerrar { position: absolute; top: -14px; right: -14px; background: #fff; color: var(--ink); box-shadow: 0 4px 12px rgb(0 0 0 / 30%); border-radius: 50%; }
.visor-cerrar:hover:not(:disabled) { background: #fff; color: var(--bad); }

/* ---------- Animaciones ---------- */
@keyframes girar { to { rotate: 360deg; } }
@keyframes aparecer-opacidad { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes coronar { from { opacity: 0; transform: translateY(-40px) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes entrar-ganador { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes entrar-aviso { from { opacity: 0; translate: 0 12px; } }
@keyframes rebote { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-8px); opacity: 1; } }
@keyframes sacudir { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

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