:root{
  /* Colores corporativos (ajústalos a tu paleta) */
  --bg:#0f172a;           /* azul-gris muy oscuro */
  --panel:#111827;        /* panel oscuro */
  --panel-2:#0b1222;      /* variante */
  --text:#e5e7eb;         /* gris claro */
  --muted:#94a3b8;        /* gris medio */
  --primary:#22c55e;      /* verde corporativo */
  --primary-700:#15803d;  /* tono oscuro */
  --danger:#ef4444;       /* rojo */
  --warn:#f59e0b;         /* ámbar */
  --ok:#10b981;           /* esmeralda */
  --border:#1f2937;       /* borde */
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,var(--bg),#0b1222 60%);color:var(--text);font:400 16px/1.5 system-ui,Segoe UI,Roboto,Ubuntu,sans-serif}
img{max-width:100%;display:block}
.container{width:min(1100px, 92%);margin-inline:auto}

/* Header */
.app-header{position:sticky;top:0;backdrop-filter:saturate(1.2) blur(6px);background:rgba(10,14,26,.6);border-bottom:1px solid var(--border);z-index:20}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.brand-logo{height:36px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.brand-name{font-weight:700;letter-spacing:.2px}
.top-nav{display:flex;align-items:center;gap:10px}
.nav-link{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:10px}
.nav-link:hover{background:rgba(255,255,255,.06)}
.nav-inline{display:inline}

/* Watermark */
.watermark{position:fixed;inset:auto 0 5% 0;height:320px;opacity:.06;pointer-events:none;background-repeat:no-repeat;background-position:center;background-size:contain;filter:grayscale(1)}

/* Main */
.main{padding:28px 0 48px}

/* Cards */
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.card-header{padding:20px 20px 0}
.card-header--row{display:flex;align-items:end;justify-content:space-between;gap:20px}
.card-title{margin:0;font-weight:800;font-size:22px}
.card-subtitle{margin:6px 0 0;color:var(--muted)}
.card-body{padding:20px}

/* Forms */
.form{display:grid;gap:16px}
.form-row{display:grid;gap:6px}
label{font-weight:600;color:var(--text)}
input,select{background:#0b1222;border:1px solid var(--border);color:var(--text);border-radius:12px;padding:12px 14px;outline:none}
input:focus,select:focus{border-color:var(--primary)}
.form-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid transparent;background:#1f2937;color:var(--text);cursor:pointer;text-decoration:none;transition:.15s}
.btn:hover{filter:brightness(1.05)}
.btn-primary{background:linear-gradient(180deg,var(--primary),var(--primary-700));border-color:rgba(0,0,0,.15);color:#001b07;font-weight:700}
.btn-outline{background:transparent;border-color:var(--border)}
.btn-danger{background:linear-gradient(180deg,#f87171,var(--danger));color:#300}
.btn-sm{padding:6px 10px;border-radius:10px;font-size:14px}

/* Tables */
.table-responsive{overflow:auto}
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th,.table td{padding:12px 14px;text-align:left}
.table thead th{color:var(--muted);font-weight:600;border-bottom:1px solid var(--border)}
.table tbody tr{background:#0b1222;border:1px solid var(--border)}
.table tbody tr td:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
.table tbody tr td:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.text-center{text-align:center}
.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}

/* Lists + info grid */
.list{margin:0;padding-left:18px}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:14px}

/* Flash */
.flash-area{margin-bottom:16px}
.alert{padding:12px 14px;border-radius:12px;border:1px solid var(--border)}
.alert-success{background:rgba(16,185,129,.12);border-color:#065f46}
.alert-error{background:rgba(239,68,68,.12);border-color:#7f1d1d}
.alert-warning{background:rgba(245,158,11,.12);border-color:#78350f}

/* Footer */
.app-footer{border-top:1px solid var(--border);padding:18px 0;background:rgba(10,14,26,.6)}
.app-footer p{margin:0;color:var(--muted);text-align:center}

/* Search */
.search{display:flex;gap:10px;align-items:center}
.search input[type="search"]{min-width:260px}

@media (max-width:720px){
  .brand-name{display:none}
  .header-inner{gap:10px}
}