/* =========================================================
   ATLAS BLUE DATA – common.css
   Base visual universal para TODO el sitio
   ========================================================= */

/* -----------------------------
   0) Variables y paleta oficial
   ----------------------------- */
:root{
  /* Colores Atlas */
  --ab-base:#05070d;            /* negro galáctico */
  --ab-surface:#0b0f19;         /* panel/section oscuro */
  --ab-text:#e0faff;            /* texto principal */
  --ab-muted:#9bc7d0;           /* texto secundario */
  --ab-line:#00e0ff22;          /* líneas sutiles */

  --ab-cyan:#00e0ff;            /* neón primario */
  --ab-cyan-2:#06f2ff;          /* hover */
  --ab-blue:#1493ff;            /* complementario frío */

  --ab-green:#37ff79;           /* OK/activo */
  --ab-amber:#ffb347;           /* intermitente/warn */
  --ab-red:#ff5b5b;             /* alerta/error */

  /* Sombra neón */
  --ab-glow:0 0 22px rgba(0,224,255,.35);

  /* Tipografías */
  --font-title:'Orbitron',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  --font-body:'Rajdhani',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;

  /* Ritmo vertical */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:1rem;
  --space-4:1.5rem;
  --space-5:2rem;
  --space-6:3rem;

  /* Contenedores */
  --container:1200px;

  /* Radios */
  --radius-1:8px;
  --radius-2:12px;
}

/* -----------------------------
   1) Reset suave + base
   ----------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  background:var(--ab-base);
  color:var(--ab-text);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Titulares */
h1,h2,h3,h4{
  font-family:var(--font-title);
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:0 0 var(--space-3);
  color:var(--ab-cyan);
}
h1{font-size:clamp(2rem,4vw,3rem)}
h2{font-size:clamp(1.5rem,3vw,2.2rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem)}

p{margin:0 0 var(--space-3); color:var(--ab-text)}
small, .muted{color:var(--ab-muted)}

a{
  color:var(--ab-cyan);
  text-decoration:none;
  transition:color .2s ease,opacity .2s ease;
}
a:hover{color:var(--ab-cyan-2)}

/* Contenedor centrado */
.container{
  width:min(100% - 2rem, var(--container));
  margin-inline:auto;
}

/* Sección genérica (para páginas que no usen style.css) */
.section{
  padding: calc(70px + var(--space-6)) 0 var(--space-6);
}
.section--dark{background:var(--ab-surface)}
.hr{border:none;border-top:1px solid var(--ab-line);margin:var(--space-5) 0}

/* -----------------------------
   2) Botones universales
   ----------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:.8rem 1.2rem;
  border-radius:var(--radius-1);
  border:1px solid transparent;
  background:var(--ab-cyan);
  color:#000;
  font-weight:700; letter-spacing:.02em;
  cursor:pointer; transition:all .2s ease;
  box-shadow:var(--ab-glow);
}
.btn:hover{background:var(--ab-cyan-2); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn--outline{
  background:transparent; color:var(--ab-cyan);
  border-color:var(--ab-cyan);
}
.btn--outline:hover{background:var(--ab-cyan); color:#000}

.btn--ghost{
  background:transparent; color:var(--ab-text);
  border-color:var(--ab-line);
}
.btn--ghost:hover{border-color:var(--ab-cyan); color:var(--ab-cyan)}

/* Estados */
.badge{display:inline-block;padding:.25rem .6rem;border-radius:999px;font-weight:700}
.badge--ok{background:color-mix(in srgb, var(--ab-green) 20%, transparent); color:var(--ab-green)}
.badge--warn{background:color-mix(in srgb, var(--ab-amber) 20%, transparent); color:var(--ab-amber)}
.badge--err{background:color-mix(in srgb, var(--ab-red) 20%, transparent); color:var(--ab-red)}

/* -----------------------------
   3) Tarjetas y paneles
   ----------------------------- */
.card{
  background:var(--ab-surface);
  border:1px solid var(--ab-line);
  border-radius:var(--radius-2);
  padding:var(--space-4);
  box-shadow:0 0 0 1px rgba(0,0,0,.2), var(--ab-glow);
}
.card--hover:hover{transform:translateY(-2px); transition:transform .2s ease}

/* -----------------------------
   4) Tablas base (Core & público)
   ----------------------------- */
.table{
  width:100%; border-collapse:collapse; font-size:1rem;
  border:1px solid var(--ab-line);
  overflow:hidden; border-radius:var(--radius-2);
}
.table th, .table td{
  padding: .9rem 1rem;
  border-bottom:1px solid var(--ab-line);
  text-align:left;
}
.table thead th{
  background:linear-gradient(0deg, #0b1625, #0e1a2a);
  color:var(--ab-cyan);
  font-family:var(--font-title);
}
.table tbody tr:hover{background:#0c1320}

/* -----------------------------
   5) Formularios universales
   ----------------------------- */
.input, input[type="text"], input[type="email"], input[type="password"],
select, textarea{
  width:100%;
  background:#0d111a;
  color:var(--ab-text);
  border:1px solid var(--ab-line);
  border-radius:var(--radius-1);
  padding:.9rem 1rem;
  outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
.input:focus, input:focus, select:focus, textarea:focus{
  border-color:var(--ab-cyan);
  box-shadow:0 0 0 3px #00e0ff33;
}
.label{display:block; margin-bottom:.4rem; color:var(--ab-muted); font-weight:600}

.form-row{display:grid; gap:var(--space-3)}
@media (min-width:768px){ .form-row{grid-template-columns:repeat(2,1fr)} }

/* Mensajes */
.alert{
  border:1px solid var(--ab-line);
  border-radius:var(--radius-1);
  padding: .9rem 1rem;
  background:#0d111a; color:var(--ab-text);
}
.alert--ok{border-color:color-mix(in srgb,var(--ab-green) 50%,transparent)}
.alert--warn{border-color:color-mix(in srgb,var(--ab-amber) 50%,transparent)}
.alert--err{border-color:color-mix(in srgb,var(--ab-red) 50%,transparent)}

/* -----------------------------
   6) Utilidades
   ----------------------------- */
.center{text-align:center}
.stack > * + *{margin-top:var(--space-3)}
.grid{display:grid; gap:var(--space-3)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .grid-2,.grid-3{grid-template-columns:1fr} }

.hidden{display:none !important}
.mt-0{margin-top:0} .mt-2{margin-top:var(--space-2)} .mt-4{margin-top:var(--space-4)}
.mb-0{margin-bottom:0} .mb-2{margin-bottom:var(--space-2)} .mb-4{margin-bottom:var(--space-4)}
.py-4{padding-block:var(--space-4)} .px-4{padding-inline:var(--space-4)}

/* -----------------------------
   7) Header simple reutilizable
   (si alguna página necesita un top fijo
   pero no usa el header de la landing)
   ----------------------------- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 1rem; background:rgba(10,15,25,.85);
  border-bottom:1px solid var(--ab-line); backdrop-filter:blur(8px);
}
.topbar .brand{font-family:var(--font-title); color:var(--ab-cyan)}

/* -----------------------------
   8) Footer básico
   ----------------------------- */
.footer{
  border-top:1px solid var(--ab-line);
  padding: var(--space-4) 0; text-align:center; color:var(--ab-muted)
}