/* Viper Strike Athletic - sistema visual de Viboras Team.
 *
 * Unica hoja compartida por las 16 paginas. Los tokens salen de
 * stitch_viboras_team_ui_redesign/viper_strike_athletic/DESIGN.md; los
 * mockups de Stitch no coinciden entre si (cada uno trae su propio
 * tailwind.config con golds y grises ligeramente distintos), asi que manda
 * DESIGN.md y esta hoja es la unica copia de los valores.
 *
 * No se usa Tailwind: son paginas estaticas sin build, con service worker,
 * y el CDN meteria ~100 KB mas un <script> de config en cada una de las 16.
 *
 * Detalle y lo que se descarto de los mockups:
 * ai_context/sistema_visual_viper_strike.md
 */

/* Iconos: Material Symbols, los mismos que nombran los mockups.
 *
 * El parametro icon_names recorta la fuente a los glifos de la lista, que es
 * lo que la hace viable aqui: 5,6 KB en vez de los ~300 KB de la fuente
 * entera. Al anadir un icono a una pagina hay que anadir su nombre aqui o
 * saldra el nombre escrito en texto.
 *
 * Va con @import, y no con un <link> en cada pagina, para no repetir una URL
 * de 400 caracteres dieciseis veces: cambiar la lista es una linea. Cuesta un
 * viaje extra, que con font-display:block solo retrasa los iconos.
 */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=admin_panel_settings,arrow_back,arrow_forward,calendar_month,cloud_upload,download,edit_note,emoji_events,emoji_symbols,error,fact_check,filter_alt,format_list_bulleted,gavel,group,history,leaderboard,lightbulb,menu_book,military_tech,monitoring,publish,query_stats,scoreboard,shield_person,speed,sports_tennis,swap_vert,trending_up,trophy,tune,verified_user,workspace_premium&display=block');

:root{
  /* Superficies: negro carbono y sus elevaciones. */
  --vt-bg:#121316;
  --vt-surface-deep:#0d0e11;
  --vt-surface:#18191d;
  --vt-surface-2:#1f1f23;
  --vt-surface-3:#292a2d;
  --vt-surface-4:#343538;

  /* Trazos. */
  --vt-border:#2a2c33;
  --vt-border-strong:#343538;
  --vt-border-gold:rgba(245,158,11,0.25);

  /* Oro vibora. */
  --vt-gold:#f59e0b;
  --vt-gold-light:#fbbf24;
  --vt-gold-soft:#ffc174;
  --vt-gold-dark:#d97706;
  --vt-yellow:#facc15;

  /* Texto. */
  --vt-text:#e3e2e6;
  --vt-text-strong:#ffffff;
  --vt-muted:#9ca3af;
  --vt-faint:#64748b;

  /* Semanticos. */
  --vt-error:#ffb4ab;
  --vt-error-bg:rgba(147,0,10,0.18);
  --vt-success:#eec200;
  --vt-silver:#94a3b8;
  --vt-bronze:#d97706;

  /* Formas. */
  --vt-r-sm:0.25rem;
  --vt-r:0.5rem;
  --vt-r-md:0.75rem;
  --vt-r-lg:1rem;
  --vt-r-xl:1.5rem;
  --vt-r-full:9999px;

  /* Ritmo: base 4/8, el de DESIGN.md. */
  --vt-xs:0.25rem;
  --vt-sm:0.5rem;
  --vt-md:1rem;
  --vt-lg:1.5rem;
  --vt-xl:2.5rem;

  /* Capas. Las tarjetas del rediseno usan z-index:1 para ponerse por encima
   * de su propio resplandor, y eso basta para tapar un overlay que no declare
   * ninguna: un elemento con z-index:1 pinta por encima de uno con
   * z-index:auto, aunque el overlay venga despues en el DOM y sea fixed.
   * Paso exactamente eso con el panel de administracion. Cualquier capa que
   * se ponga encima de la pagina usa estas variables, no un numero suelto. */
  --vt-z-contenido:1;
  --vt-z-flotante:100;
  --vt-z-velo:2000;
  --vt-z-modal:2001;

  /* Profundidad. */
  --vt-shadow-card:0 8px 30px rgba(0,0,0,0.45);
  --vt-shadow-float:0 8px 24px -4px rgba(0,0,0,0.6);
  --vt-glow:0 0 28px -6px rgba(245,158,11,0.25);

  /* Tipografia. */
  --vt-font-head:'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --vt-font-body:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------------------------------------------------------------- base -- */

*{box-sizing:border-box}

html{color-scheme:dark}

body{
  margin:0;
  padding:var(--vt-lg) var(--vt-md);
  background:var(--vt-bg);
  color:var(--vt-text);
  font-family:var(--vt-font-body);
  font-size:15px;
  line-height:22px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body::selection,::selection{background:var(--vt-gold);color:#121316}

a{color:var(--vt-gold-soft);text-decoration-color:var(--vt-border-gold);text-underline-offset:3px}
a:hover{color:var(--vt-gold-light)}

hr,.vt-divider{border:0;border-top:1px solid var(--vt-border);margin:var(--vt-lg) 0}

/* -------------------------------------------------------------- iconos -- */

/* El texto del elemento es el nombre del icono y la ligadura lo convierte en
   glifo. Si la fuente no llega se veria el nombre escrito; por eso el
   @import pide font-display:block, que deja el hueco en blanco hasta que
   carga en vez de ensenar "arrow_back". */
.ms{
  font-family:'Material Symbols Outlined';
  font-weight:400;
  font-style:normal;
  font-size:20px;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-block;
  white-space:nowrap;
  direction:ltr;
  flex:0 0 auto;
  user-select:none;
  -webkit-font-feature-settings:'liga';
  font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
}
.ms--sm{font-size:17px}
.ms--lg{font-size:26px}

/* Los botones de las paginas son <button> sueltos con sus propias clases, no
   .vt-btn. Para que el icono no quede pegado al texto tienen que ser flex.
   Se declara aqui y no dieciseis veces; si una pagina necesita otra cosa,
   su <style> va despues y gana. */
.btn,.back-btn,.admin-bottom,.update-btn,.info-btn,.nav-btn,.small-btn,.edit-btn,.organize-btn,.calculate-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--vt-sm);
}

/* --------------------------------------------------------- tipografia -- */

h1,h2,h3,h4,.vt-head{
  font-family:var(--vt-font-head);
  text-transform:uppercase;
  color:var(--vt-text-strong);
  margin:0;
}

h1{font-size:36px;line-height:40px;letter-spacing:0.02em;font-weight:800}
h2{font-size:24px;line-height:28px;letter-spacing:0.03em;font-weight:700;color:var(--vt-gold)}
h3{font-size:20px;line-height:24px;letter-spacing:0.04em;font-weight:600}
h4{font-size:16px;line-height:20px;letter-spacing:0.05em;font-weight:600;color:var(--vt-gold-soft)}

@media(max-width:720px){
  h1{font-size:28px;line-height:32px;letter-spacing:0.01em}
  h2{font-size:21px;line-height:25px}
}

p{margin:0 0 var(--vt-md) 0;color:var(--vt-text)}
p:last-child{margin-bottom:0}

ul,ol{margin:0 0 var(--vt-md) 0;padding-left:1.25rem;color:var(--vt-text)}
li{margin-bottom:var(--vt-sm)}
li::marker{color:var(--vt-gold-dark)}

small,.vt-small{font-size:13px;line-height:18px;color:var(--vt-muted)}

.vt-muted{color:var(--vt-muted)}
.vt-gold{color:var(--vt-gold)}
.vt-score{font-family:var(--vt-font-head);font-size:44px;line-height:44px;font-weight:800;letter-spacing:0.01em;color:var(--vt-text-strong)}

/* Etiqueta de seccion: Inter, versalitas, muy espaciada. */
.vt-label{
  font-size:10px;
  line-height:14px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--vt-muted);
}

/* Texto en degradado dorado, para la palabra destacada de un titular. */
.vt-gold-grad{
  background:linear-gradient(135deg,#fef08a 0%,var(--vt-gold) 50%,var(--vt-gold-dark) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:var(--vt-gold);
}

/* Titulo de seccion con la barra dorada a la izquierda. */
.vt-sec-title{display:flex;align-items:center;gap:var(--vt-sm);margin-bottom:var(--vt-md)}
.vt-sec-title::before{content:'';flex:0 0 auto;width:5px;height:1.1em;border-radius:var(--vt-r-sm);background:var(--vt-gold)}

/* -------------------------------------------------------------- layout -- */

.vt-page{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:var(--vt-lg)}
.vt-page--narrow{max-width:850px}
.vt-page--wide{max-width:1200px}

/* ------------------------------------------------------------- tarjeta -- */

.vt-card{
  position:relative;
  background:var(--vt-surface);
  border:1px solid var(--vt-border);
  border-radius:var(--vt-r-xl);
  padding:var(--vt-lg);
  box-shadow:var(--vt-shadow-card);
}

/* Barra de acento superior: el remate dorado de los mockups. */
.vt-card--accent{overflow:hidden}
.vt-card--accent::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg,var(--vt-gold-dark),var(--vt-gold-light),var(--vt-gold-dark));
}

.vt-card--glow{box-shadow:var(--vt-shadow-card),var(--vt-glow)}

/* Caja hundida, para graficas y bloques de datos dentro de una tarjeta. */
.vt-well{
  background:var(--vt-surface-deep);
  border:1px solid var(--vt-border);
  border-radius:var(--vt-r-lg);
  padding:var(--vt-md);
}

.vt-panel{
  background:var(--vt-surface-3);
  border-radius:var(--vt-r);
  padding:var(--vt-sm) var(--vt-md);
}

@media(max-width:720px){
  body{padding:var(--vt-md) 0.75rem}
  .vt-card{padding:var(--vt-md);border-radius:var(--vt-r-lg)}
}

/* ------------------------------------------------------------ cabecera -- */

.vt-header{
  display:flex;
  gap:var(--vt-lg);
  align-items:flex-start;
  padding-bottom:var(--vt-lg);
  border-bottom:1px solid var(--vt-border);
}

.vt-header__logo{
  flex:0 0 auto;
  width:96px;height:96px;
  border-radius:var(--vt-r-lg);
  padding:2px;
  background:linear-gradient(135deg,var(--vt-gold),var(--vt-gold-dark),#000);
  box-shadow:var(--vt-shadow-float);
}
.vt-header__logo img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--vt-r-lg) - 2px);display:block}

.vt-header__text{flex:1;min-width:0}

@media(max-width:720px){
  .vt-header{flex-direction:column;align-items:center;text-align:center;gap:var(--vt-md)}
  .vt-header__logo{width:80px;height:80px}
}

/* ------------------------------------------------- distintivos y chips -- */

.vt-badge{
  display:inline-flex;
  align-items:center;
  gap:var(--vt-sm);
  padding:4px 12px;
  border-radius:var(--vt-r-full);
  background:rgba(245,158,11,0.10);
  border:1px solid var(--vt-border-gold);
  color:var(--vt-gold-light);
  font-size:10px;
  line-height:14px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.vt-badge__dot{width:6px;height:6px;border-radius:var(--vt-r-full);background:currentColor}

.vt-chip{
  display:inline-flex;
  align-items:center;
  gap:var(--vt-xs);
  padding:4px 10px;
  border-radius:var(--vt-r);
  background:var(--vt-surface-3);
  border:1px solid var(--vt-border);
  color:var(--vt-text);
  font-size:12px;
  line-height:16px;
  font-weight:600;
  letter-spacing:0.05em;
}
.vt-chip--gold{border-color:var(--vt-border-gold);color:var(--vt-gold-light)}

/* -------------------------------------------------------------- botones -- */

.vt-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--vt-sm);
  padding:10px 20px;
  border:1px solid transparent;
  border-radius:var(--vt-r);
  background:var(--vt-gold);
  color:#121316;
  font-family:var(--vt-font-body);
  font-size:14px;
  line-height:20px;
  font-weight:700;
  letter-spacing:0.02em;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .1s ease;
}
.vt-btn:hover{background:var(--vt-yellow);box-shadow:0 0 18px -2px rgba(250,204,21,0.45)}
.vt-btn:active{transform:scale(0.97)}
.vt-btn:focus-visible{outline:2px solid var(--vt-gold-light);outline-offset:2px}
.vt-btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}

/* Fantasma: la variante de la mayoria de acciones secundarias. */
.vt-btn--ghost{background:var(--vt-surface-3);color:var(--vt-text);border-color:var(--vt-border-strong)}
.vt-btn--ghost:hover{background:var(--vt-surface-4);border-color:var(--vt-gold);box-shadow:none}

.vt-btn--quiet{background:transparent;color:var(--vt-gold-soft);border-color:var(--vt-border)}
.vt-btn--quiet:hover{background:var(--vt-surface-3);color:var(--vt-gold-light);box-shadow:none}

.vt-btn--danger{background:transparent;color:var(--vt-error);border-color:rgba(255,180,171,0.3)}
.vt-btn--danger:hover{background:var(--vt-error-bg);box-shadow:none}

.vt-btn--sm{padding:6px 14px;font-size:13px}
.vt-btn--icon{padding:0;width:40px;height:40px}

/* ------------------------------------------------------------ formulario -- */

.vt-field{display:flex;flex-direction:column;gap:var(--vt-xs)}
.vt-field > label{font-size:12px;line-height:16px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--vt-muted)}

.vt-input,.vt-select,.vt-textarea{
  width:100%;
  padding:10px 12px;
  background:var(--vt-surface-2);
  border:1px solid var(--vt-border-strong);
  border-radius:var(--vt-r);
  color:var(--vt-text);
  font-family:var(--vt-font-body);
  font-size:15px;
  line-height:22px;
}
.vt-input::placeholder,.vt-textarea::placeholder{color:var(--vt-faint)}
.vt-input:focus,.vt-select:focus,.vt-textarea:focus{outline:none;border-color:var(--vt-gold);box-shadow:inset 0 0 0 0.5px var(--vt-gold)}

/* La flecha nativa del select no se ve sobre fondo oscuro en Chrome. */
.vt-select{
  appearance:none;
  padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--vt-muted) 50%),linear-gradient(135deg,var(--vt-muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  cursor:pointer;
}
.vt-select option{background:var(--vt-surface-2);color:var(--vt-text)}

input[type=checkbox],input[type=radio]{accent-color:var(--vt-gold);width:16px;height:16px;cursor:pointer}

/* ---------------------------------------------------------------- tabla -- */

.vt-table-wrap{overflow-x:auto;border-radius:var(--vt-r-lg);border:1px solid var(--vt-border)}

.vt-table{width:100%;border-collapse:collapse;font-size:14px;line-height:20px}
.vt-table th{
  position:sticky;top:0;
  background:var(--vt-surface-3);
  color:var(--vt-muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-align:left;
  padding:10px 12px;
  white-space:nowrap;
  border-bottom:1px solid var(--vt-border-strong);
}
.vt-table td{padding:10px 12px;border-bottom:1px solid var(--vt-border);color:var(--vt-text)}
.vt-table tbody tr:last-child td{border-bottom:0}
.vt-table tbody tr:hover td{background:var(--vt-surface-2)}
.vt-table .vt-num{font-variant-numeric:tabular-nums;text-align:right}

/* Podio: oro, plata, bronce en las tres primeras posiciones. */
.vt-rank-1{color:var(--vt-gold);font-weight:700}
.vt-rank-2{color:var(--vt-silver);font-weight:700}
.vt-rank-3{color:var(--vt-bronze);font-weight:700}

/* Fila de acciones al pie de una tarjeta.
 *
 * Existe porque esas filas eran flex sin envolver, y en el historial los tres
 * botones —Administracion, Descargar resultados y Atras— no caben en un
 * telefono: "Atras" se salia 45 px a 390 y 115 a 320. Y no se notaba al medir
 * el ancho del documento, porque la tarjeta lleva overflow:hidden para
 * recortar su barra dorada, asi que el boton no desbordaba la pagina: se
 * cortaba dentro. Por debajo de 560 px se apilan a lo ancho completo. */
.vt-acciones{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--vt-sm);
  margin-top:var(--vt-md);
}
.vt-acciones > *{min-width:0}
@media(max-width:560px){
  .vt-acciones{flex-direction:column;align-items:stretch}
  .vt-acciones > *,.vt-acciones button{width:100%}
}

/* Cabecera con el "Atras" arriba a la derecha.
 *
 * En las paginas de listado —ranking, rating, estadisticas— el unico "Atras"
 * estaba al pie de la tarjeta, debajo de toda la tabla: para salir habia que
 * bajar el listado entero. Aqui va absoluto sobre la cabecera, a la altura
 * del escudo, que esta centrado y deja libre ese hueco: no empuja el titulo
 * ni cambia la altura de la cabecera. A 320 px el escudo ocupa de 104 a 192
 * y el boton entra de 210 en adelante. */
.vt-cabecera{position:relative;text-align:center}
.vt-volver{
  position:absolute;
  top:0;right:0;
  display:inline-flex;
  align-items:center;
  gap:var(--vt-xs);
  padding:6px 12px;
  background:transparent;
  border:1px solid var(--vt-border-strong);
  border-radius:var(--vt-r);
  color:var(--vt-text);
  font-family:var(--vt-font-body);
  font-size:13px;font-weight:700;
  cursor:pointer;
  transition:border-color .15s ease,color .15s ease;
}
.vt-volver:hover{border-color:var(--vt-gold);color:var(--vt-gold-light)}
.vt-volver:focus-visible{outline:2px solid var(--vt-gold-light);outline-offset:2px}

/* ----------------------------------------------------------- utilidades -- */

.vt-row{display:flex;gap:var(--vt-md);align-items:center;flex-wrap:wrap}
.vt-stack{display:flex;flex-direction:column;gap:var(--vt-md)}
.vt-between{display:flex;gap:var(--vt-md);align-items:center;justify-content:space-between;flex-wrap:wrap}
.vt-end{display:flex;justify-content:flex-end}
.vt-grow{flex:1;min-width:0}

/* La barra de scroll clara desentona sobre el carbono. */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:var(--vt-bg)}
*::-webkit-scrollbar-thumb{background:var(--vt-border);border-radius:var(--vt-r-sm)}
*::-webkit-scrollbar-thumb:hover{background:var(--vt-gold-dark)}