/*
 * romoops-theme.css — identidad visual compartida de RomoOps V15.
 *
 * Extraído de romodj.edu.ec (Vault ROMODJ/Sitios WEB/ROMODJ.EDU.EC/public_html/index.html,
 * líneas 13-32 del <style>), 19-08-2026, para que la próxima vertical de frontend
 * (PuestoDeCombate y lo que siga) arranque con la identidad real de Romo desde el
 * primer commit, en vez de un prototipo genérico que haya que rediseñar después
 * (la lección de Base44). Punto de partida — variables y patrones base, no una
 * librería de componentes terminada.
 *
 * Uso: <link rel="stylesheet" href="romoops-theme.css"> + el link de Google Fonts
 * de abajo, antes de cualquier CSS propio de la pantalla.
 */

/* Google Fonts — pegar también como <link> en el <head>, este @import es fallback:
   https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400;500&display=swap */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400;500&display=swap');

:root{
  /* fondo — 4 tonos de casi-negro, del más oscuro (base) al más claro (tarjetas/paneles) */
  --black:#080808;
  --black2:#0f0f0f;
  --black3:#161616;
  --black4:#1c1c1c;

  /* rojo de marca — acento principal, hover/brillante, y fondo tenue para estados sutiles */
  --red:#e8001d;
  --red2:#ff1a33;
  --red-dim:rgba(232,0,29,0.1);

  /* texto */
  --white:#f0ede8;
  --gray:#66665f;
  --gray2:#2a2a28;

  /* tipografía — t=título (Orbitron, mayúsculas, futurista), b=cuerpo (DM Sans, liviano),
     m=mono (DM Mono, labels/etiquetas técnicas, siempre mayúsculas + tracking amplio) */
  --font-t:'Orbitron',sans-serif;
  --font-b:'DM Sans',sans-serif;
  --font-m:'DM Mono',monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background:var(--black);
  color:var(--white);
  font-family:var(--font-b);
  font-weight:300;
  overflow-x:hidden;
  max-width:100vw;
}

::-webkit-scrollbar{width:2px}
::-webkit-scrollbar-thumb{background:var(--red)}

/* Título de sección/pantalla — Orbitron, la firma visual del sitio */
.ro-title{
  font-family:var(--font-t);
  letter-spacing:1px;
  line-height:1.05;
  color:var(--white);
}

/* Etiqueta/label técnico — DM Mono, mayúsculas, tracking amplio, uso constante en el sitio */
.ro-label{
  font-family:var(--font-m);
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gray);
}

/* Nav fijo con blur — mismo patrón que romodj.edu.ec */
.ro-nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:stretch;padding:0;
  background:rgba(8,8,8,0.97);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(232,0,29,0.15);
}

/* Tarjeta/panel sobre fondo negro — un tono más claro, sin borde duro */
.ro-panel{
  background:var(--black2);
  border-radius:4px;
}

/* Acento de marca — para botones primarios, estados activos, badges */
.ro-accent{
  background:var(--red);
  color:var(--white);
  font-family:var(--font-m);
}