/* Tema visual moderno GIG -- se carga DESPUÉS de los demás CSS (lo inyecta nav.js)
   y sobrescribe la capa visual sin tocar la estructura. Colores del logo Geotest:
   violeta #3F00BA, azul noche #150D43 y rojo #FF001E. */
:root{
  --brand:#4A10D6;
  --brand-hover:#3A08B0;
  --brand-soft:#EFEBFF;
  --paper:#F4F5FB;
  --paper-raised:#FFFFFF;
  --line:#E6E8F2;
  --ink:#141A2E;
  --ink-soft:#6A7390;
  --radius:12px;
  --shadow-sm:0 1px 2px rgba(21,13,67,.05), 0 2px 8px rgba(21,13,67,.05);
  --shadow-md:0 8px 24px rgba(21,13,67,.10);
  --grad-brand:linear-gradient(135deg,#150D43 0%,#3F00BA 62%,#7A2BE0 100%);
  --sans:"Inter","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}
body{ background:var(--paper); font-size:14px; -webkit-font-smoothing:antialiased; }
.wrap{ max-width:1180px; }

/* ---- Encabezados ---- */
.hero, .dash-header{
  background:var(--grad-brand); position:relative; padding:30px 0 28px;
}
.hero::after, .dash-header::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,#3F00BA,#B455E8 55%,#FF001E);
}
.dash-header h1, .hero h1{ font-size:22px; font-weight:750; letter-spacing:-.01em; }
.dash-header p, .hero p{ color:#C9C3F0; }
.dash-updated, .dash-updated b{ color:#E8E4FF; }

/* ---- Menú lateral ---- */
.gig-sidebar{
  background:linear-gradient(180deg,#150D43 0%,#1D1160 100%);
  box-shadow:4px 0 24px rgba(21,13,67,.18); --sidebar-w:220px;
}
:root{ --sidebar-w:220px; }
.gig-sidebar .brand{ font-size:14.5px; font-weight:750; padding:10px 20px 20px; letter-spacing:-.01em; }
.gig-sidebar .brand small{ color:#A79DE6; }
.gig-sidebar a{ margin:2px 10px; padding:9px 12px; border-left:none; border-radius:10px; transition:background .15s, transform .15s; }
.gig-sidebar a:hover{ background:rgba(255,255,255,.09); transform:translateX(2px); }
.gig-sidebar a.active{
  background:linear-gradient(135deg,#4A10D6,#7A2BE0); color:#fff; font-weight:650;
  box-shadow:0 4px 14px rgba(74,16,214,.45);
}
.gig-sidebar .sep{ color:#8E84D6; margin:14px 22px 6px; }

/* ---- Tarjetas e indicadores ---- */
.tarjeta, .indicator-card, .meta-grid, .gate, .table-wrap, .notes-box, .login-box{
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.tarjeta{ padding:20px 22px; position:relative; overflow:hidden; transition:transform .18s, box-shadow .18s, border-color .18s; }
.tarjeta::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,#3F00BA,#FF001E); opacity:0; transition:opacity .18s;
}
.tarjeta:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#CFC4F7; }
.tarjeta:hover::before{ opacity:1; }
.tarjeta-ico{
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  background:var(--brand-soft); color:var(--brand); border-radius:12px; font-size:20px; margin-bottom:8px;
}
.tarjeta-sensible{ border-left:1px solid var(--line); }
.indicator-card{ padding:18px 20px; }
.indicator-card .value{ font-size:28px; font-weight:750; letter-spacing:-.02em;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.indicator-card .label{ font-weight:650; letter-spacing:.05em; }
.semaforo-dist span{ font-size:16px; }
.critico-card{ border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.alert-chip{ border-radius:var(--radius); }
.section-title, h2{ letter-spacing:-.01em; }

/* ---- Filtros y formularios ---- */
.filters{ border-bottom:none; background:var(--paper-raised); border-radius:var(--radius);
  padding:16px 20px; margin-top:18px; box-shadow:var(--shadow-sm); }
input[type=text], input[type=number], input[type=email], input[type=password], textarea, select,
.filter-field select, .filter-field input{
  border:1px solid #D9DCEB; border-radius:10px; padding:8px 11px; transition:border-color .15s, box-shadow .15s; background:#fff;
}
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(74,16,214,.15);
}

/* ---- Botones ---- */
button.primary{
  background:linear-gradient(135deg,#3F00BA,#6A1FD8); border-radius:999px; padding:10px 22px;
  box-shadow:0 4px 14px rgba(74,16,214,.35); transition:transform .15s, box-shadow .15s, filter .15s;
}
button.primary:hover:not(:disabled){ background:linear-gradient(135deg,#3A08B0,#5B14C9); transform:translateY(-1px); box-shadow:0 6px 18px rgba(74,16,214,.45); }
button.primary:disabled{ background:#CFC9EE; box-shadow:none; }
button.ghost, .pager button, .sql-toolbar button{
  border-radius:999px; border:1px solid #D9DCEB; background:#fff; transition:border-color .15s, background .15s;
}
button.ghost:hover, .pager button:hover:not(:disabled), .sql-toolbar button:hover{ border-color:var(--brand); background:var(--brand-soft); }

/* ---- Tablas ---- */
table.dash-table, table.prog{ background:transparent; }
table.dash-table th, table.prog th{
  background:#F8F7FF; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; font-size:10.5px;
  border-bottom:1px solid var(--line);
}
table.dash-table td, table.prog td{ border-bottom:1px solid #EEF0F7; }
table.dash-table tbody tr{ transition:background .12s; }
table.dash-table tbody tr:hover{ background:#F6F3FF; }
.avance-bar{ height:8px; border-radius:99px; background:#E9E6F7; }
.avance-bar .fill{ background:linear-gradient(90deg,#3F00BA,#B455E8); border-radius:99px; }
.badge{ border-radius:99px; padding:2px 9px; }
.drop{ border-radius:var(--radius); }
.modal-box{ border-radius:16px; box-shadow:var(--shadow-md); }
.modal-overlay{ background:rgba(21,13,67,.55); backdrop-filter:blur(3px); }

/* ---- Entrada suave ---- */
@keyframes gigFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.tarjeta, .indicator-card, .critico-card{ animation:gigFade .35s ease both; }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* ---- Login ---- */
body.login-body{
  display:flex; min-height:100vh; align-items:center; justify-content:center; padding:20px;
  background:
    radial-gradient(circle at 15% 20%, rgba(122,43,224,.55), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(255,0,30,.35), transparent 40%),
    linear-gradient(135deg,#150D43,#2B0F86);
}
.login-box{
  width:100%; max-width:400px; padding:38px 36px; background:rgba(255,255,255,.97);
  border:none; border-radius:20px; box-shadow:0 24px 60px rgba(8,4,32,.5); position:relative; overflow:hidden;
}
.login-box::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg,#3F00BA,#B455E8,#FF001E); }
.login-box img{ display:block; max-width:170px; margin:0 auto 18px; }
.login-box h1{ font-size:17px; text-align:center; margin:0 0 4px; font-weight:750; color:var(--ink); }
.login-box .login-sub{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin:0 0 22px; }
.login-box label{ font-size:12px; font-weight:600; color:var(--ink-soft); margin:14px 0 5px; }
.login-box input{ width:100%; font-size:14px; padding:11px 13px; }
.login-box button{
  width:100%; margin-top:24px; padding:12px; border:0; border-radius:999px; color:#fff; font-size:14px; font-weight:650;
  cursor:pointer; background:linear-gradient(135deg,#3F00BA,#6A1FD8); box-shadow:0 6px 18px rgba(74,16,214,.4);
  transition:transform .15s, box-shadow .15s;
}
.login-box button:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(74,16,214,.5); }
.login-err{ background:#FDECEF; color:#B0122A; border:1px solid #F6C4CC; border-radius:10px; padding:9px 12px; font-size:13px; margin-bottom:4px; }

/* ---- Logo Geotest 30 aniversario ---- */
.gig-sidebar .brand-logo{
  display:block; background:#fff; border-radius:12px; padding:8px 10px; margin-bottom:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.gig-sidebar .brand-logo img{ display:block; width:100%; height:auto; }
.login-box img{ max-width:230px; margin:0 auto 14px; }