/* ══════════════════════════════════════════════════════
   Ameth — Holographic Theme  (holo.css)
   Shared across all pages
   ══════════════════════════════════════════════════════ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Exo+2:wght@300;400;600&display=swap');

/* ── Variables ─────────────────────────────────────── */
:root {
  --c-bg:     #070512;
  --c-violet: #a855f7;
  --c-cyan:   #22d3ee;
  --c-pink:   #e879f9;
  --c-text:   #e9e3ff;
  --c-muted:  #9583c0;

  --glow-v: 0 0 4px rgba(168,85,247,1),
            0 0 18px rgba(168,85,247,0.9),
            0 0 45px rgba(168,85,247,0.5);
  --glow-c: 0 0 4px rgba(34,211,238,1),
            0 0 18px rgba(34,211,238,0.9),
            0 0 45px rgba(34,211,238,0.5);

  --card-bg: linear-gradient(160deg, rgba(80,30,140,0.32), rgba(20,10,40,0.35));
  --card-bg-cyan: linear-gradient(160deg, rgba(10,60,80,0.32), rgba(5,20,30,0.35));
}

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

/* ── Body / Background ─────────────────────────────── */
html { height: 100%; }
body {
  font-family: 'Exo 2', monospace, sans-serif;
  background-color: var(--c-bg);
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -5%,  rgba(168,85,247,0.35) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 92% 100%, rgba(34,211,238,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 8%  100%, rgba(232,121,249,0.15) 0%, transparent 60%);
  background-attachment: fixed;
  color: var(--c-text);
  min-height: 100vh;
}

/* ── Topline ───────────────────────────────────────── */
.topline {
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, #a855f7 20%, #22d3ee 50%, #a855f7 80%, transparent 100%);
  box-shadow:
    0 0 8px  rgba(168,85,247,1),
    0 0 24px rgba(168,85,247,0.8),
    0 0 50px rgba(34,211,238,0.5);
}

/* ── Header ────────────────────────────────────────── */
header {
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}

.ameth-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  text-shadow:
    0 0 8px  rgba(255,255,255,0.9),
    0 0 22px rgba(168,85,247,1),
    0 0 45px rgba(168,85,247,0.8),
    0 0 80px rgba(168,85,247,0.5);
  animation: ameth-pulse 3s ease-in-out infinite;
  transition: text-shadow .2s;
}

.ameth-title:hover {
  text-decoration: none;
  text-shadow:
    0 0 10px rgba(255,255,255,1),
    0 0 26px rgba(34,211,238,1),
    0 0 60px rgba(34,211,238,0.9),
    0 0 100px rgba(34,211,238,0.6);
}

@keyframes ameth-pulse {
  0%,100% { filter: brightness(1); }
  50%      { filter: brightness(1.25); }
}

.header-sep  { color: rgba(168,85,247,0.45); font-size: 20px; }
.header-page {
  color: var(--c-muted);
  font-family: 'Exo 2', sans-serif;
  font-size: 15px;
  font-weight: 300;
}

nav.holo-nav, .holo-nav {
  margin-left: auto;
  display: flex;
  gap: 20px;
  font-family: 'Exo 2', sans-serif;
  font-size: 13px;
  flex-wrap: wrap;
  align-items: center;
}

.holo-nav a {
  color: var(--c-cyan);
  text-decoration: none;
  text-shadow: 0 0 8px rgba(34,211,238,0.7);
  transition: text-shadow .2s, filter .2s;
}
.holo-nav a:hover {
  text-shadow: 0 0 12px rgba(34,211,238,1), 0 0 24px rgba(34,211,238,0.6);
  filter: brightness(1.25);
}

/* ── Cards / Panels ────────────────────────────────── */
.card, .holo-card {
  background: var(--card-bg);
  border: 1px solid rgba(168,85,247,0.85);
  border-radius: 10px;
  box-shadow:
    0 0 4px  rgba(168,85,247,1),
    0 0 18px rgba(168,85,247,0.85),
    0 0 45px rgba(168,85,247,0.45),
    inset 0 0 30px rgba(168,85,247,0.12);
  position: relative;
  overflow: hidden;
  padding: 18px 20px;
}

.card::before, .holo-card::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
  box-shadow: 0 0 10px rgba(255,255,255,0.7);
}

/* Cyan variant */
.card-cyan {
  background: var(--card-bg-cyan);
  border: 1px solid rgba(34,211,238,0.75);
  border-radius: 10px;
  box-shadow:
    0 0 4px  rgba(34,211,238,1),
    0 0 18px rgba(34,211,238,0.85),
    0 0 45px rgba(34,211,238,0.45),
    inset 0 0 30px rgba(34,211,238,0.08);
  position: relative;
  overflow: hidden;
  padding: 18px 20px;
}
.card-cyan::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,0.7), transparent);
  box-shadow: 0 0 10px rgba(34,211,238,0.7);
}

/* ── Typography helpers ────────────────────────────── */
.card-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.card-value {
  font-size: 26px;
  font-weight: 600;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.section-hd {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(168,85,247,0.25);
  margin-bottom: 14px;
}

/* ── Color classes ─────────────────────────────────── */
.rojo    { color: #f87171; text-shadow: 0 0 8px rgba(248,113,113,0.5); }
.verde   { color: #4ade80; text-shadow: 0 0 8px rgba(74,222,128,0.5); }
.amarillo{ color: #fbbf24; text-shadow: 0 0 6px rgba(251,191,36,0.4); }

/* ── Buttons ───────────────────────────────────────── */
button, .btn {
  font-family: 'Exo 2', sans-serif;
  background: rgba(168,85,247,0.18);
  border: 1px solid rgba(168,85,247,0.75);
  color: var(--c-text);
  border-radius: 6px;
  padding: 8px 18px;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(168,85,247,0.4);
  transition: background .15s, box-shadow .15s, border-color .15s;
  font-size: 13px;
}
button:hover, .btn:hover {
  background: rgba(168,85,247,0.38);
  box-shadow: 0 0 14px rgba(168,85,247,0.8), 0 0 28px rgba(168,85,247,0.35);
}
button:active, .btn.sel, button.sel {
  background: rgba(168,85,247,0.5);
  border-color: var(--c-cyan);
  box-shadow: 0 0 12px rgba(34,211,238,0.6);
}
button:disabled { opacity: 0.38; cursor: default; box-shadow: none; }

/* Cyan button variant */
.btn-cyan {
  border-color: rgba(34,211,238,0.75);
  background: rgba(34,211,238,0.12);
  box-shadow: 0 0 8px rgba(34,211,238,0.4);
}
.btn-cyan:hover {
  background: rgba(34,211,238,0.28);
  box-shadow: 0 0 14px rgba(34,211,238,0.8);
}

/* ── Inputs ─────────────────────────────────────────── */
input[type="text"],
input[type="number"],
textarea,
select,
.p-input {
  font-family: 'Exo 2', monospace, sans-serif;
  background: rgba(168,85,247,0.1);
  border: 1px solid rgba(168,85,247,0.45);
  color: var(--c-text);
  border-radius: 6px;
  padding: 8px 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-size: 14px;
}
input:focus, textarea:focus, select:focus, .p-input:focus {
  border-color: var(--c-cyan);
  box-shadow: 0 0 10px rgba(34,211,238,0.5);
}
input::placeholder, textarea::placeholder { color: var(--c-muted); }

/* ── Tables ─────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  text-align: left;
  color: var(--c-muted);
  font-weight: 400;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(168,85,247,0.3);
  background: rgba(168,85,247,0.18);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
td { padding: 8px 10px; border-bottom: 1px solid rgba(168,85,247,0.1); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(168,85,247,0.08); }
tr:nth-child(even) td { background: rgba(168,85,247,0.04); }

/* ── Links ──────────────────────────────────────────── */
a { color: var(--c-cyan); text-decoration: none; transition: filter .15s; }
a:hover { filter: brightness(1.3); text-decoration: underline; }

/* ── Main layout ────────────────────────────────────── */
main {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Progress bars ──────────────────────────────────── */
.prog-bar {
  height: 5px;
  background: rgba(168,85,247,0.14);
  border-radius: 3px;
  overflow: hidden;
}
.prog-fill { height: 100%; border-radius: 3px; transition: width .35s; }

/* ── Badges ─────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 0.06em;
}
.ing-row td { color: #4ade80; }
.fuente-tag { font-size: 11px; color: var(--c-muted); }
.amt { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Icon nav (fixed, top-right) ───────────────────── */
.nav-iconos {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 1000;
  display: flex;
  gap: 8px;
}
.nav-iconos a {
  font-size: 20px;
  line-height: 1;
  opacity: 0.5;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s, filter 0.2s;
}
.nav-iconos a:hover {
  opacity: 1;
  filter: drop-shadow(0 0 6px #22d3ee);
}
.nav-iconos a.activo {
  opacity: 1;
  filter: drop-shadow(0 0 8px #a855f7);
}

/* El dashboard mueve la navegación al sidebar; oculta la barra flotante global. */
body.page-dashboard .nav-iconos {
  display: none;
}

/* ── Loading / Status ───────────────────────────────── */
#estado, #p-estado, #estado-fc {
  color: var(--c-muted);
  text-align: center;
  padding: 60px 20px;
  font-family: 'Exo 2', sans-serif;
  font-size: 14px;
}