/* ============================================================
   style.css — estilo base del sistema (oscuro + acento verde)
   Si ya tienes tu propio css/style.css original de Alpha Automotriz,
   puedes reemplazar este archivo por el tuyo: las páginas usan
   las mismas clases (card, btn, grid, field, topbar, etc.)
   ============================================================ */

:root{
  --bg:        #0b0f14;
  --bg2:       #0f1620;
  --card:      #121a24;
  --border:    rgba(255,255,255,0.08);
  --text:      #eaf0f5;
  --muted:     #8b9aab;
  --accent:    #3dea24;
  --accent2:   #2fc61b;
  --danger:    #ff5470;
  --warning:   #ffb020;
  --radius:    16px;
  --fh:        'Orbitron', sans-serif;
  --ff:        'Poppins', sans-serif;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(61,234,36,0.08), transparent),
    var(--bg);
  color:var(--text);
  font-family:var(--ff);
  min-height:100vh;
}

.app{ display:flex; flex-direction:column; min-height:100vh; }

/* ---------- Topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:0.8rem 1.5rem;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20;
}
.brand{ display:flex; align-items:center; gap:0.6rem; }
.logo-img{ height:38px; }
.brand-fallback{
  font-family:var(--fh); font-weight:900; letter-spacing:1px;
  color:var(--accent); font-size:1.1rem;
}
.topbar nav{ display:flex; gap:1.4rem; }
.topbar nav a{
  color:var(--muted); text-decoration:none; font-size:0.85rem;
  font-weight:600; letter-spacing:0.3px;
}
.topbar nav a:hover, .topbar nav a.activo{ color:var(--accent); }
.userbox{ display:flex; align-items:center; gap:0.7rem; font-size:0.85rem; color:var(--muted); }
.userbox b{ color:var(--text); }

/* ---------- Layout ---------- */
.main{ flex:1; padding:1.6rem; max-width:1200px; margin:0 auto; width:100%; }
.page-head{ margin-bottom:1.2rem; }
.page-head h1{
  font-family:var(--fh); font-size:1.5rem; margin:0 0 0.2rem 0; font-weight:700;
}
.page-head h1 span{ color:var(--accent); }
.page-head p{ color:var(--muted); margin:0; font-size:0.9rem; }

/* ---------- Cards ---------- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.3rem;
}
.card.hl{ border-color:rgba(61,234,36,0.3); }
.card h2{
  font-family:var(--fh); font-size:1rem; margin:0 0 1rem 0;
  display:flex; align-items:center; gap:0.5rem;
}
.card h2 i{ color:var(--accent); }
.mt-1{ margin-top:1rem; } .mt-2{ margin-top:1.5rem; }

/* ---------- Grid / Fields ---------- */
.grid{ display:grid; gap:1rem; }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:800px){ .grid.cols-2,.grid.cols-3,.grid.cols-4{ grid-template-columns:1fr; } }

.field{ display:flex; flex-direction:column; gap:0.35rem; }
.field label{ font-size:0.78rem; color:var(--muted); font-weight:600; }
input, select, textarea{
  background:var(--bg2); border:1px solid var(--border); border-radius:10px;
  padding:0.65rem 0.8rem; color:var(--text); font-family:var(--ff); font-size:0.9rem;
  outline:none; width:100%;
}
input:focus, select:focus, textarea:focus{ border-color:var(--accent); }
textarea{ min-height:80px; resize:vertical; }
.input-with-btn{ display:flex; gap:0.4rem; }
.input-with-btn input{ flex:1; }

/* ---------- Botones ---------- */
.btn{
  font-family:var(--ff); font-weight:700; font-size:0.82rem; letter-spacing:0.3px;
  border:none; border-radius:10px; padding:0.65rem 1.1rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:0.5rem; text-decoration:none;
  transition:transform .1s ease, opacity .15s ease;
}
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#04170a; }
.btn-primary:hover{ opacity:0.92; }
.btn-ghost{ background:transparent; border:1px solid var(--border); color:var(--text); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-danger{ background:rgba(255,84,112,0.12); color:var(--danger); border:1px solid rgba(255,84,112,0.3); }
.btn-sm{ padding:0.45rem 0.8rem; font-size:0.75rem; }
.btn-block{ width:100%; justify-content:center; }
.btn-icon{ padding:0.45rem 0.6rem; }

/* ---------- Utilidades ---------- */
.flex{ display:flex; align-items:center; gap:0.6rem; }
.flex-wrap{ flex-wrap:wrap; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; gap:0.6rem; }
.muted{ color:var(--muted); }
.small{ font-size:0.78rem; }

/* ---------- Badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.25rem 0.7rem; border-radius:99px; font-size:0.72rem; font-weight:700;
}
.badge-ok{ background:rgba(61,234,36,0.12); color:var(--accent); }
.badge-warn{ background:rgba(255,176,32,0.12); color:var(--warning); }
.badge-danger{ background:rgba(255,84,112,0.12); color:var(--danger); }

/* ---------- Stat box ---------- */
.stat-box{ background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:0.9rem 1rem; }
.stat-box .n{ font-family:var(--fh); font-size:1.3rem; }
.stat-box .l{ color:var(--muted); font-size:0.75rem; margin-top:0.2rem; }

/* ---------- Tabla ---------- */
table{ width:100%; border-collapse:collapse; font-size:0.85rem; }
thead th{
  text-align:left; color:var(--muted); font-size:0.72rem; text-transform:uppercase;
  letter-spacing:0.5px; padding:0.6rem 0.7rem; border-bottom:1px solid var(--border);
}
tbody td{ padding:0.65rem 0.7rem; border-bottom:1px solid var(--border); }
tbody tr:hover{ background:rgba(255,255,255,0.03); }
tbody tr.fila-nueva{ animation:destello 1.6s ease; }
@keyframes destello{ from{ background:rgba(61,234,36,0.18); } to{ background:transparent; } }

/* ---------- Login ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem;
}
.login-box{
  width:100%; max-width:380px; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:2rem 1.8rem; text-align:center;
}
.login-box .logo-slot{
  height:64px; display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem;
}
.login-box .logo-slot img{ max-height:64px; max-width:220px; }
.login-box h1{ font-family:var(--fh); font-size:1.15rem; margin:0 0 1.4rem 0; }
.login-box .field{ text-align:left; margin-bottom:0.9rem; }
.login-msg{ font-size:0.82rem; margin-top:0.9rem; min-height:1.2em; }
.login-msg.error{ color:var(--danger); }
.login-msg.warn{ color:var(--warning); }

/* ---------- Contador de intentos ---------- */
.intentos-box{ margin-top:1rem; }
.intentos-puntos{ display:flex; justify-content:center; gap:8px; margin-bottom:0.5rem; }
.punto{
  width:11px; height:11px; border-radius:50%;
  background:transparent; border:2px solid var(--accent);
}
.punto.gastado{ background:var(--danger); border-color:var(--danger); }
.intentos-txt{ font-size:0.76rem; color:var(--muted); }
.intentos-txt b{ color:var(--text); }

/* ---------- Bloqueo con cuenta regresiva ---------- */
.bloqueo-box{
  margin-top:1rem; padding:0.9rem;
  background:rgba(255,176,32,0.08);
  border:1px solid rgba(255,176,32,0.3);
  border-radius:12px;
}
.bloqueo-box i{ color:var(--warning); font-size:1.1rem; }
.bloqueo-box .cuenta{
  font-family:var(--fh); font-size:1.6rem; color:var(--warning);
  margin:0.35rem 0 0.25rem;
}

/* ---------- Reglas de bloqueo ---------- */
.reglas{
  margin-top:1.2rem; padding-top:0.9rem;
  border-top:1px solid var(--border);
  font-size:0.7rem; color:var(--muted); line-height:1.6;
}

footer.footnote{
  text-align:center; color:var(--muted); font-size:0.72rem; padding:1rem; opacity:0.7;
}