/* ::::bastion::ops:::: — re-skin oscuro para las pantallas blancas de operación
   (rf-sede, rf-oficinas, rf-unidades, audit-panel, superiores)
   mismo DOM, diseño bastion: obsidian + acento del módulo via --mod-c */

body {
  background: #050608 !important;
  background-image: radial-gradient(circle, rgba(255,255,255,0.016) 1px, transparent 1px) !important;
  background-size: 26px 26px !important;
  color: #b9c4c9 !important;
  font-family: var(--fs, "Instrument Sans", system-ui, sans-serif) !important;
}
.mono, th, .ep, input, select, button, textarea, td.r, .pct, .meta2 { font-family: var(--fm, "IBM Plex Mono", monospace) !important; }

/* ── header ── */
header { border-bottom: 1px solid rgba(0, 218, 248, 0.5) !important; box-shadow: 0 10px 24px -16px rgba(0,218,248,0.45); }
h1 { color: #ffffff !important; text-shadow: 0 0 14px color-mix(in srgb, var(--mod-c, #00daf8) 35%, transparent); }
header .meta { color: #7e8d93 !important; }
header nav a, header a { color: #00daf8 !important; }
header nav a:hover { text-shadow: 0 0 8px rgba(0,218,248,0.5); }

/* ── secciones ── */
h2 { color: #e6edf0 !important; }
.ep { border: 1px dashed rgba(255,255,255,0.25) !important; color: #7e8d93 !important; }
.note { color: #7e8d93 !important; }

/* ── tablas ── */
th { color: #7e8d93 !important; border-bottom: 2px solid color-mix(in srgb, var(--mod-c, #00daf8) 65%, transparent) !important; }
td { border-bottom: 1px solid rgba(255,255,255,0.08) !important; color: #c7d1d5; }
tr:hover td { background: rgba(255,255,255,0.02); }

/* ── pills de estado ── */
.pill { background: transparent; }
.pill.ok   { border-color: #1db87a !important; color: #1db87a !important; text-shadow: 0 0 8px rgba(29,184,122,0.4); }
.pill.pend { border-color: #3c8bff !important; color: #3c8bff !important; }
.pill.wait { border-color: #e0903a !important; color: #e0903a !important; }
.pill.mod  { border-color: #b44fff !important; color: #b44fff !important; }
.pill.bad  { border-color: #ff3860 !important; color: #ff3860 !important; }

/* ── formularios ── */
form { border: 1px solid rgba(255,255,255,0.10) !important; background: rgba(255,255,255,0.02); }
label { color: #7e8d93 !important; }
input, select, textarea {
  background: #0a0d10 !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
}
input:focus, select:focus, textarea:focus { border-color: var(--mod-c, #00daf8) !important; outline: none; box-shadow: 0 0 8px color-mix(in srgb, var(--mod-c, #00daf8) 35%, transparent); }
select option, select optgroup { background: #0a0d10; color: #e6edf0; }

/* ── botones :: octagonales, obscuros con borde de módulo ── */
button {
  background: color-mix(in srgb, var(--mod-c, #00daf8) 12%, #060709) !important;
  border: 1px solid color-mix(in srgb, var(--mod-c, #00daf8) 55%, transparent) !important;
  color: #ffffff !important;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  padding-left: 16px !important;
  padding-right: 16px !important;
  transition: box-shadow 160ms, opacity 160ms, background 160ms;
}
button:hover { opacity: 1 !important; background: color-mix(in srgb, var(--mod-c, #00daf8) 26%, #060709) !important; box-shadow: 0 0 12px color-mix(in srgb, var(--mod-c, #00daf8) 45%, transparent); }
button.sec { background: #0a0d10 !important; border-color: rgba(255,255,255,0.25) !important; color: #e6edf0 !important; }
button.sec:hover { border-color: var(--mod-c, #00daf8) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--mod-c, #00daf8) 40%, transparent); }
button.warn { background: transparent !important; border-color: #ff3860 !important; color: #ff3860 !important; }
button.warn:hover { box-shadow: 0 0 10px rgba(255,56,96,0.45); }
button:disabled { opacity: 0.4 !important; box-shadow: none !important; }

/* ── kpis ── */
.kpi { border: 1px solid rgba(255,255,255,0.14) !important; background: #0a0d10; box-shadow: inset 0 0 18px rgba(0,0,0,0.6); }
.kpi .k { color: #7e8d93 !important; }
.kpi .v { color: color-mix(in srgb, var(--mod-c, #00daf8) 80%, #fff) !important; text-shadow: 0 0 12px color-mix(in srgb, var(--mod-c, #00daf8) 45%, transparent); }
.kpi .s { color: #7e8d93 !important; }
.bar, .tube { background: #11161a !important; border-color: rgba(255,255,255,0.10) !important; }
.bar i { background: var(--mod-c, #00daf8) !important; box-shadow: 0 0 8px color-mix(in srgb, var(--mod-c, #00daf8) 55%, transparent); }

/* ── oficinas (rf-oficinas) ── */
.office { border: 1px solid rgba(255,255,255,0.16) !important; background: #0a0d10; }
.office.open { border: 2px solid #1db87a !important; box-shadow: 0 0 16px rgba(29,184,122,0.25), inset 0 0 16px rgba(29,184,122,0.06); }
.office h3 { color: #ffffff; }
.office.open .st { border-color: #1db87a !important; color: #1db87a !important; text-shadow: 0 0 8px rgba(29,184,122,0.45); }
.office.closed .st { border-color: rgba(255,255,255,0.25) !important; color: #7e8d93 !important; }
.office .meta2 { color: #7e8d93 !important; }

/* ── termómetros (audit-panel) ── */
.mod, .chart, .area { border: 1px solid rgba(255,255,255,0.14) !important; background: #0a0d10; box-shadow: inset 0 0 22px rgba(0,0,0,0.55); }
.mod h3, .chart h3, .area h3 { color: #ffffff !important; }
.mod h3 .pres { color: #7e8d93 !important; }
.thermo .lbl { color: #7e8d93 !important; }
.thermo .tube { background: #11161a !important; border: 1px solid rgba(255,255,255,0.10) !important; }
.thermo.ok i   { background: #1db87a !important; box-shadow: 0 0 8px rgba(29,184,122,0.5); }
.thermo.warn i { background: #e0903a !important; box-shadow: 0 0 8px rgba(224,144,58,0.5); }
.thermo.bad i  { background: #ff3860 !important; box-shadow: 0 0 8px rgba(255,56,96,0.5); }

/* ── documentación de caja (audit-panel) ── */
.doc.si { border-color: #1db87a !important; color: #1db87a !important; }
.doc.no { border-color: #ff3860 !important; color: #ff3860 !important; }
.tag { border-color: rgba(255,255,255,0.3) !important; color: #c7d1d5 !important; }

/* ── áreas y gráficas bi (superiores) ── */
.area .who { color: #7e8d93 !important; }
.area .b { color: #7e8d93 !important; }
.area .tube i { background: var(--mod-c, #00daf8) !important; }
.hrow .nm { color: #c7d1d5; }
.hrow .tube { background: #11161a !important; border-color: rgba(255,255,255,0.10) !important; }
.hrow .pct { color: #e6edf0; }
.stack { border-color: rgba(255,255,255,0.18) !important; }
.legend { color: #c7d1d5; }
.urbar .note, .lvlbar .note { color: #7e8d93 !important; }

/* chrome */
body { padding: 0 !important; }
.card-head .ep { margin-left: 0 !important; }
.card .kpis { grid-column: 1 / -1; }

/* ── octobar :: reset — la navegación no hereda botones de operación ── */
.octobar-row button, header .octo-btn {
  background: none !important;
  border: none !important;
  clip-path: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
}
header { flex-wrap: wrap; }