:root{
  /* ===== BRAND ===== */
  --sodi-blue-1: #005579;
  --sodi-blue-2: #001f4d;
  --sodi-yellow: #FBA600;
  --sodi-footer: #00142C;

  /* ===== FONDO ===== */
  --bg: var(--sodi-blue-2);
  --bg-2: #001a3f;                /* un poco más claro que blue-2 */
  --surface: rgba(255,255,255,.10);
  --surface-2: rgba(255,255,255,.14);

  /* ===== TEXTO ===== */
  --text: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.72);

  /* ===== COLORES (alias del tema original) ===== */
  --primary: var(--sodi-blue-1);
  --primary-2: var(--sodi-blue-2);
  --accent: var(--sodi-yellow);
  --accent-2: rgba(251,166,0,.78);

  /* ===== UI ===== */
  --border: rgba(255,255,255,.18);
  --shadow: 0 18px 55px rgba(0,0,0,.28);
  --shadow-md: 0 12px 28px rgba(0,0,0,.22);

  /* ===== TIPOGRAFÍAS ===== */
  --font-title: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-ui: 'Nunito', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* ===== RADIOS ===== */
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 12px;
}

/* ===== RESET ===== */
*{ box-sizing: border-box; }
html, body{ height:100%; }

/* ===== BODY ===== */
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--text);
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(251,166,0,.22) 0%, rgba(251,166,0,0) 60%),
    radial-gradient(900px 420px at 90% 10%, rgba(0,85,121,.25) 0%, rgba(0,85,121,0) 65%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

/* ===== TITULARES ===== */
h1,h2,h3,h4{
  font-family: var(--font-title);
  font-weight: 900;
  margin:0;
  letter-spacing:.3px;
  color: var(--text);
}
h1{ font-size: 24px; }
h2{ font-size: 20px; }
h3{ font-size: 17px; }

/* ===== TEXTO ===== */
p{ margin:0; }
.small{ font-size: 13px; color: var(--muted); }
.muted{ color: var(--muted); }

/* ===== CONTENEDORES ===== */
.wrap{
  max-width: 1100px;
  margin: auto;
  padding: 18px;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 18px;
  backdrop-filter: blur(12px);
}

/* ===== BOTONES ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius: var(--r-md);
  border:1px solid var(--border);
  background: rgba(255,255,255,.10);
  color: var(--text);
  cursor:pointer;
  text-decoration:none;
  font-family: var(--font-ui);
  font-weight: 900;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.28);
}
.btn:active{
  transform: translateY(0);
  box-shadow: none;
}
.btn:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-primary{
  border:0;
  background: linear-gradient(135deg, var(--sodi-blue-1), var(--sodi-blue-2));
  color:#fff;
}

.btn-accent{
  border:0;
  background: linear-gradient(135deg, rgba(251,166,0,1), rgba(251,166,0,.78));
  color:#0b1220;
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
}

/* ===== INPUTS ===== */
input, select, textarea{
  width:100%;
  padding:12px;
  border-radius: var(--r-md);
  border:1px solid rgba(7,16,34,.12);      /* antes blanco */
  background: rgba(255,255,255,.92);        /* antes negro */
  color: #071022;                           /* texto oscuro OK */
  font-family: var(--font-body);
  font-weight: 800;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

select option{ color:#071022; }

input::placeholder, textarea::placeholder{
  color: rgba(7,16,34,.42);                 /* antes blanco */
  font-weight: 700;
}

input:focus, select:focus, textarea:focus{
  border-color: rgba(251,166,0,.55);
  box-shadow: 0 0 0 4px rgba(251,166,0,.28);
}


/* ===== TOPBAR ===== */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand .logo{
  width:36px;
  height:36px;
  border-radius:12px;
  background: rgba(251,166,0,.18);
  border:1px solid var(--border);
}

.brand .title{
  font-family: var(--font-title);
  font-size: 18px;
  color: var(--text);
}

/* ===== ALERTAS ===== */
.alert{
  margin-top:12px;
  padding:10px 12px;
  border-radius: var(--r-md);
  border:1px solid var(--border);
  background: rgba(255,255,255,.08);
  color: var(--text);
}

.alert.ok{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.12);
}

.alert.err{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.12);
}

/* ===== RESPONSIVE ===== */
@media(max-width:520px){
  .wrap{ padding:14px; }
  .btn{ width:100%; }
}

/* ======================
   NAVX FIJO (no se mueve)
====================== */
.navx{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

/* Deja espacio para que el contenido no quede debajo del menú */
body.page-dashboard{
  padding-top: 110px;   
}

/* Si en móvil cambia el alto del nav, ajustá el padding */
@media (max-width: 640px){
  body.page-dashboard{
    padding-top: 110px;      
  }
}