/* ─────────────────────────────────────────────────────────────────────────────
   Centinela24 — Silvano Design System Base
   Compartido por todas las páginas que usen base.html
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --s-bg:       #043448;
  --s-panel:    #0b4a67;
  --s-input:    #0d3d55;
  --s-border:   #1a6080;
  --s-accent:   #365C6C;
  --s-accent-h: #4a7a8f;
  --s-text:     #FFFFFF;
  --s-muted:    #C1C1C1;
  --s-faint:    #8aacba;
  --s-sidebar-w: 220px;
}

/* ── Reset base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  background-color: var(--s-bg) !important;
  color: var(--s-text) !important;
  font-family: 'Inter', 'Helvetica Now', Helvetica, Arial, sans-serif;
  margin: 0;
}
h1, h2, h3, .font-brand { font-family: 'Red Rose', serif; }

/* ── Tailwind overrides (Silvano palette) ───────────────────────────────────── */
.bg-slate-900  { background-color: var(--s-bg)    !important; }
.bg-slate-800  { background-color: var(--s-panel)  !important; }
.bg-slate-700  { background-color: var(--s-input)  !important; }
.bg-slate-600  { background-color: #1d5a75         !important; }
.hover\:bg-slate-600:hover    { background-color: #1d5a75        !important; }
.hover\:bg-slate-700:hover    { background-color: var(--s-input) !important; }
.bg-slate-700\/30             { background-color: rgba(13,61,85,.3) !important; }
.hover\:bg-slate-700\/30:hover{ background-color: rgba(13,61,85,.3) !important; }
.bg-rose-900\/10              { background-color: rgba(127,29,29,.1) !important; }
.border-slate-700 { border-color: var(--s-border) !important; }
.border-slate-600 { border-color: #1d5a75          !important; }
.border-slate-800 { border-color: var(--s-bg)      !important; }
.divide-y > * + * { border-color: rgba(26,96,128,.5) !important; }
.text-slate-200 { color: var(--s-text)  !important; }
.text-slate-300 { color: var(--s-muted) !important; }
.text-slate-400 { color: var(--s-faint) !important; }
.text-slate-500 { color: #5a8a9e        !important; }
.text-slate-600 { color: #3d6a7e        !important; }
.bg-indigo-600              { background-color: var(--s-accent)   !important; }
.bg-indigo-500              { background-color: var(--s-accent-h) !important; }
.hover\:bg-indigo-500:hover { background-color: var(--s-accent-h) !important; }
.bg-indigo-700              { background-color: var(--s-accent)   !important; }
.bg-indigo-900              { background-color: #0d2d3b            !important; }
.text-indigo-300            { color: var(--s-muted) !important; }
.text-indigo-400            { color: #7BAEC1 !important; }
.hover\:text-indigo-300:hover { color: #9bc4d4 !important; }
.border-indigo-500          { border-color: var(--s-accent-h) !important; }
.focus\:ring-indigo-500:focus { --tw-ring-color: var(--s-accent-h) !important; }
.accent-indigo-500          { accent-color: var(--s-accent) !important; }
.accent-rose-500            { accent-color: #f43f5e !important; }
.bg-blue-900   { background-color: #1e3a4a !important; }
.text-blue-300 { color: #7BAEC1 !important; }
.bg-amber-900  { background-color: #3d2a0a !important; }

/* ── Scrollbar ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--s-bg); }
::-webkit-scrollbar-thumb { background: var(--s-accent); border-radius: 3px; }

/* ── App shell layout ───────────────────────────────────────────────────────── */
.c24-app {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────────────────────── */
.c24-sidebar {
  width: var(--s-sidebar-w);
  min-width: var(--s-sidebar-w);
  background: var(--s-panel);
  border-right: 1px solid var(--s-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 30;
}

.c24-sidebar-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1rem .75rem;
  border-bottom: 1px solid var(--s-border);
}
.c24-sidebar-logo img { height: 32px; object-fit: contain; }
.c24-sidebar-logo-text { font-family: 'Red Rose', serif; font-size: 1rem; font-weight: 700; color: var(--s-text); }

.c24-sidebar-nav {
  flex: 1;
  padding: .5rem 0;
  list-style: none;
  margin: 0;
}
.c24-sidebar-nav li { margin: 0; }
.c24-nav-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1rem;
  font-size: .875rem;
  color: var(--s-faint);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
  cursor: pointer;
  background: none;
  border-right: none;
  border-top: none;
  border-bottom: none;
  width: 100%;
  text-align: left;
}
.c24-nav-item:hover {
  background: rgba(13,61,85,.6);
  color: var(--s-text);
}
.c24-nav-item.active {
  background: rgba(54,92,108,.35);
  color: var(--s-text);
  border-left-color: var(--s-accent-h);
  font-weight: 600;
}
.c24-nav-item.admin-only { display: none; } /* visible via JS si es admin */
.c24-sidebar-section {
  padding: .35rem 1rem .2rem;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #3d6a7e;
  font-weight: 700;
  margin-top: .25rem;
}
.c24-sidebar-bottom {
  border-top: 1px solid var(--s-border);
  padding: .5rem 0;
}

/* ── Main content area ──────────────────────────────────────────────────────── */
.c24-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: hidden;
}

/* ── Topbar ─────────────────────────────────────────────────────────────────── */
.c24-topbar {
  background: var(--s-panel);
  border-bottom: 1px solid var(--s-border);
  padding: .6rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 20;
  gap: 1rem;
}
.c24-topbar-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--s-text);
  white-space: nowrap;
}
.c24-topbar-right {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}
.c24-user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--s-accent);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .85rem;
  cursor: pointer; flex-shrink: 0;
}
.c24-user-info { text-align: right; display: none; }
@media (min-width: 640px) { .c24-user-info { display: block; } }
.c24-user-name { font-size: .82rem; font-weight: 600; color: var(--s-text); line-height: 1.2; }
.c24-user-role { font-size: .7rem; color: var(--s-faint); text-transform: capitalize; }

/* ── Content ────────────────────────────────────────────────────────────────── */
.c24-content {
  flex: 1;
  overflow-y: auto;
  /* Las páginas controlan su propio padding */
}

/* ── Responsive: colapsar sidebar en móvil ──────────────────────────────────── */
@media (max-width: 768px) {
  .c24-sidebar { display: none; }
  .c24-sidebar.open { display: flex; position: fixed; top: 0; left: 0; height: 100vh; z-index: 50; }
}

/* ── Badges compartidas ─────────────────────────────────────────────────────── */
.c24-badge {
  display: inline-block; padding: .15rem .55rem;
  border-radius: 999px; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
}
.c24-badge-ok      { background: rgba(34,197,94,.12); color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
.c24-badge-warn    { background: rgba(245,158,11,.12); color: #fbbf24; border: 1px solid rgba(245,158,11,.3); }
.c24-badge-error   { background: rgba(239,68,68,.12);  color: #f87171; border: 1px solid rgba(239,68,68,.3); }

/* ── Parche: nav legacy de index.html dentro del shell base ──────────────────
   El nav original de index.html contiene IDs que el JS del dashboard necesita
   (user-name, arm-btn, ws-dot, etc.). Se oculta visualmente pero se mantiene
   en el DOM para que getElementById() siga funcionando.
   Selector: primer <nav> hijo directo de #c24-content (solo index.html lo tiene).
   mission_control.html no tiene nav dentro de content — no afectado.
   ─────────────────────────────────────────────────────────────────────────── */
#c24-content > nav:first-child {
  display: none !important;
}

/* ── Separación de contexto cliente vs operación interna ─────────────────────
   .client-only: visible para viewer/operator/admin, oculto para superadmin
   (el superadmin tiene su propio contexto de navegación en /admin)
   ─────────────────────────────────────────────────────────────────────────── */
.c24-nav-item.client-only       { display: none; } /* revelado por JS si no es superadmin */
.c24-sidebar-section.client-only { display: none; }
.c24-nav-item.superadmin-only   { display: none; } /* revelado por JS si es superadmin */
.c24-sidebar-section.superadmin-only { display: none; }