/* =========================================================
   Siscontcloud — Design System  v2.0
   Tema CLARO por defecto — oscuro automático con OS
   ========================================================= */

/* ── 1. Tokens: CLARO ─────────────────────────────────── */
:root {
  --s-bg:        #f6f7fb;
  --s-surface:   #ffffff;
  --s-surface2:  #f1f3f7;
  --s-border:    rgba(0,0,0,.1);
  --s-text:      #1f2937;
  --s-muted:     #6b7280;
  --s-primary:   #2563eb;
  --s-primary-d: #1d4ed8;
  --s-success:   #16a34a;
  --s-warning:   #d97706;
  --s-danger:    #dc2626;
  --s-radius:    10px;
  --s-shadow:    0 4px 12px rgba(0,0,0,.08);
  --s-navbar-h:  52px;
}

/* ── 2. Tokens: OSCURO (automático con OS) ─────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --s-bg:        #0b1020;
    --s-surface:   #111827;
    --s-surface2:  #1a2537;
    --s-border:    #24324a;
    --s-text:      #e2e8f0;
    --s-muted:     #94a3b8;
    --s-primary:   #3b82f6;
    --s-primary-d: #1d4ed8;
    --s-success:   #22c55e;
    --s-warning:   #f59e0b;
    --s-danger:    #ef4444;
    --s-shadow:    0 8px 24px rgba(0,0,0,.4);
  }
}

/* ── 3. Base ───────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body {
  background: var(--s-bg);
  color: var(--s-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  margin: 0;
}
a { color: var(--s-primary); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--s-primary); }

/* ── 4. Navbar ─────────────────────────────────────────── */
.s-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: var(--s-navbar-h);
  background: var(--s-surface);
  border-bottom: 1px solid var(--s-border);
  box-shadow: var(--s-shadow);
}
.s-navbar .s-brand {
  font-weight: 800;
  font-size: .95rem;
  color: var(--s-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.s-navbar .s-brand:hover { color: var(--s-primary); text-decoration: none; }
.s-navbar .s-sep { color: var(--s-border); font-size: 1.1rem; flex-shrink: 0; }
.s-navbar .s-module {
  font-size: .82rem;
  font-weight: 600;
  color: var(--s-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.s-navbar .s-spacer { flex: 1; min-width: 0; }
.s-navbar .s-user {
  font-size: .78rem;
  color: var(--s-muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.s-navbar .s-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--s-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.s-navbar .s-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--s-muted);
  border: 1px solid var(--s-border);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .15s, background .15s;
}
.s-navbar .s-nav-link:hover {
  color: var(--s-text);
  background: var(--s-surface2);
  text-decoration: none;
}
.s-navbar .s-nav-link.s-logout {
  border-color: rgba(220,38,38,.3);
  color: #dc2626;
}
.s-navbar .s-nav-link.s-logout:hover {
  background: rgba(220,38,38,.08);
  color: #dc2626;
  text-decoration: none;
}
@media (prefers-color-scheme: dark) {
  .s-navbar .s-nav-link.s-logout {
    border-color: rgba(239,68,68,.35);
    color: #f87171;
  }
  .s-navbar .s-nav-link.s-logout:hover {
    background: rgba(239,68,68,.12);
    color: #ef4444;
  }
}

/* ── 5. Contenedor de página ───────────────────────────── */
.s-page        { padding: 20px 16px; max-width: 1600px; margin: 0 auto; }
.s-page-narrow { padding: 20px 16px; max-width: 960px; margin: 0 auto; }

/* ── 6. Cards ──────────────────────────────────────────── */
.s-card {
  background: var(--s-surface);
  border: 1px solid var(--s-border);
  border-radius: var(--s-radius);
  box-shadow: var(--s-shadow);
  padding: 16px;
}

/* ── 7. Botones ────────────────────────────────────────── */
.s-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: filter .15s;
  text-decoration: none;
  line-height: 1.4;
}
.s-btn:hover { filter: brightness(1.08); text-decoration: none; }
.s-btn-primary { background: var(--s-primary); color: #fff; }
.s-btn-success { background: var(--s-success); color: #fff; }
.s-btn-danger  { background: var(--s-danger); color: #fff; }
.s-btn-warning { background: var(--s-warning); color: #fff; }
.s-btn-ghost   { background: transparent; border: 1px solid var(--s-border); color: var(--s-text); }
.s-btn-ghost:hover { border-color: var(--s-primary); color: var(--s-primary); }
.s-btn-sm { padding: 4px 9px; font-size: 12px; }

/* ── 8. Bootstrap overrides: CLARO (siempre) ──────────── */
.table { color: var(--s-text); }
.form-label { color: var(--s-text); }
.form-text  { color: var(--s-muted); }
.text-muted { color: var(--s-muted) !important; }

/* ── 9. Bootstrap overrides: OSCURO (solo en dark mode) ── */
@media (prefers-color-scheme: dark) {
  body { background: var(--s-bg); color: var(--s-text); }

  h1, h2, h3, h4, h5, h6 { color: var(--s-text); }

  .bg-light, .bg-white { background: var(--s-surface) !important; color: var(--s-text) !important; }
  .bg-body             { background: var(--s-bg) !important; }
  .border              { border-color: var(--s-border) !important; }
  .text-dark           { color: var(--s-text) !important; }
  .text-muted          { color: var(--s-muted) !important; }

  /* Tables */
  .table {
    color: var(--s-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--s-border);
    --bs-table-striped-bg: rgba(255,255,255,.03);
    --bs-table-hover-bg: rgba(59,130,246,.07);
  }
  .table > :not(caption) > * > * {
    background-color: transparent;
    border-color: var(--s-border);
    color: var(--s-text);
  }
  .table thead th {
    color: var(--s-muted);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: rgba(17,24,39,.8);
  }
  .table-secondary { --bs-table-bg: rgba(255,255,255,.04); color: var(--s-muted); }

  /* Forms */
  .form-control, .form-select {
    background-color: var(--s-surface2);
    border-color: var(--s-border);
    color: var(--s-text);
  }
  .form-control:focus, .form-select:focus {
    background-color: var(--s-surface2);
    border-color: var(--s-primary);
    color: var(--s-text);
    box-shadow: 0 0 0 .15rem rgba(59,130,246,.25);
  }
  .form-control::placeholder { color: var(--s-muted); }
  .form-label { color: var(--s-text); }
  .form-text  { color: var(--s-muted); }
  .input-group-text {
    background: var(--s-surface2);
    border-color: var(--s-border);
    color: var(--s-muted);
  }

  /* Cards Bootstrap */
  .card {
    background: var(--s-surface);
    border-color: var(--s-border);
    color: var(--s-text);
  }
  .card-header, .card-footer {
    background: var(--s-surface2);
    border-color: var(--s-border);
    color: var(--s-text);
  }

  /* Buttons Bootstrap */
  .btn-outline-secondary {
    border-color: var(--s-border);
    color: var(--s-muted);
  }
  .btn-outline-secondary:hover {
    background: var(--s-surface2);
    color: var(--s-text);
    border-color: var(--s-primary);
  }
  .btn-outline-primary { border-color: var(--s-primary); color: var(--s-primary); }
  .btn-outline-primary:hover { background: var(--s-primary); color: #fff; }
  .btn-outline-light, .btn-outline-dark {
    border-color: var(--s-border);
    color: var(--s-text);
  }
  .btn-outline-light:hover, .btn-outline-dark:hover {
    background: var(--s-surface2);
    color: var(--s-text);
  }
  .btn-secondary { background: var(--s-surface2); border-color: var(--s-border); color: var(--s-muted); }
  .btn-secondary:hover { background: var(--s-border); color: var(--s-text); }

  /* Alerts */
  .alert-danger  { background: rgba(220,38,38,.12);  border-color: rgba(220,38,38,.3);  color: #fca5a5; }
  .alert-success { background: rgba(22,163,74,.12);  border-color: rgba(22,163,74,.3);  color: #86efac; }
  .alert-warning { background: rgba(217,119,6,.12);  border-color: rgba(217,119,6,.3);  color: #fcd34d; }
  .alert-info    { background: rgba(37,99,235,.12);  border-color: rgba(37,99,235,.3);  color: #93c5fd; }

  /* Modal */
  .modal-content { background: var(--s-surface); border-color: var(--s-border); color: var(--s-text); }
  .modal-header, .modal-footer { border-color: var(--s-border); }
  .btn-close { filter: invert(1); }

  /* Dropdown */
  .dropdown-menu { background: var(--s-surface2); border-color: var(--s-border); }
  .dropdown-item { color: var(--s-text); }
  .dropdown-item:hover { background: var(--s-surface); color: var(--s-primary); }
  .dropdown-divider { border-color: var(--s-border); }

  /* Pagination */
  .page-link {
    background: var(--s-surface2);
    border-color: var(--s-border);
    color: var(--s-muted);
  }
  .page-link:hover { background: var(--s-surface); color: var(--s-primary); }
  .page-item.active .page-link { background: var(--s-primary); border-color: var(--s-primary); color: #fff; }
  .page-item.disabled .page-link { opacity: .4; }

  /* Badges */
  .badge.bg-secondary { background-color: var(--s-surface2) !important; color: var(--s-muted); }
  .badge.bg-light     { background-color: var(--s-border) !important; color: var(--s-text); }
  .badge.text-bg-secondary { background-color: var(--s-surface2) !important; color: var(--s-text); }

  /* Nav tabs */
  .nav-tabs { border-color: var(--s-border); }
  .nav-tabs .nav-link { color: var(--s-muted); border-color: transparent; }
  .nav-tabs .nav-link:hover { border-color: var(--s-border); color: var(--s-text); background: var(--s-surface2); }
  .nav-tabs .nav-link.active {
    background: var(--s-surface);
    border-color: var(--s-border) var(--s-border) var(--s-surface);
    color: var(--s-text);
  }

  /* Acordeón */
  .accordion-item  { background: var(--s-surface); border-color: var(--s-border); color: var(--s-text); }
  .accordion-button { background: var(--s-surface2); color: var(--s-text); }
  .accordion-button:not(.collapsed) { background: var(--s-surface); color: var(--s-primary); box-shadow: none; }
  .accordion-button::after { filter: invert(1) brightness(.7); }
  .accordion-body { background: var(--s-surface); }

  /* Navbar Bootstrap */
  .navbar { background: var(--s-surface) !important; border-color: var(--s-border) !important; }
  .navbar-brand, .nav-link { color: var(--s-text) !important; }
  .navbar-text { color: var(--s-muted) !important; }
}

/* ── 10. Responsive ────────────────────────────────────── */
@media (max-width: 640px) {
  .s-navbar .s-module       { display: none; }
  .s-navbar .s-user .s-user-name { display: none; }
  .s-page, .s-page-narrow   { padding: 12px; }
}

/* ── 11. Imprimir: ocultar navbar ──────────────────────── */
@media print {
  .s-navbar { display: none !important; }
}

/* =========================================================
   12. CAPA DE LEGIBILIDAD — claro y oscuro (v2.1)
   Garantiza que formularios, botones y textos se lean en los
   dos temas aunque una página tenga colores fijos propios.
   Para excluir un control: agregar la clase .no-tema
   ========================================================= */
:root {
  --s-field:        #ffffff;
  --s-field-ro:     #f1f3f7;
  --s-field-text:   #111827;
  --s-link:         #1d4ed8;
  --s-info-txt:     #0e7490;
  --s-warn-txt:     #b45309;
}
@media (prefers-color-scheme: dark) {
  :root {
    --s-field:      #0f1a2b;
    --s-field-ro:   #172234;
    --s-field-text: #e2e8f0;
    --s-link:       #93c5fd;
    --s-info-txt:   #67e8f9;
    --s-warn-txt:   #fcd34d;
  }
}

/* Campos de formulario: siempre fondo y texto del tema */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not(.no-tema),
select:not(.no-tema),
textarea:not(.no-tema) {
  background-color: var(--s-field) !important;
  color: var(--s-field-text) !important;
  border-color: var(--s-border);
}
input[readonly]:not([type=checkbox]):not([type=radio]):not(.no-tema),
input:disabled:not([type=checkbox]):not([type=radio]):not(.no-tema),
select:disabled:not(.no-tema),
textarea[readonly]:not(.no-tema),
textarea:disabled:not(.no-tema) {
  background-color: var(--s-field-ro) !important;
}
input::placeholder, textarea::placeholder { color: var(--s-muted) !important; opacity: 1; }
select option { background-color: var(--s-field); color: var(--s-field-text); }
input[type=date]:not(.no-tema), input[type=datetime-local]:not(.no-tema), input[type=month]:not(.no-tema), input[type=time]:not(.no-tema) { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  input[type=date]:not(.no-tema), input[type=datetime-local]:not(.no-tema), input[type=month]:not(.no-tema), input[type=time]:not(.no-tema) { color-scheme: dark; }
}

/* Botones Bootstrap con poco contraste */
.btn.btn-info, .btn.btn-info:hover, .btn.btn-info:focus { background-color: #0e7490; border-color: #0e7490; color: #fff; }
.btn.btn-outline-info { color: var(--s-info-txt); border-color: var(--s-info-txt); }
.btn.btn-outline-info:hover { background-color: #0e7490; border-color: #0e7490; color: #fff; }
.btn.btn-outline-warning { color: var(--s-warn-txt); border-color: var(--s-warn-txt); }
.btn.btn-outline-warning:hover { background-color: #d97706; border-color: #d97706; color: #fff; }
.text-warning { color: var(--s-warn-txt) !important; }
.text-info    { color: var(--s-info-txt) !important; }
.bg-warning, .badge.bg-warning, .bg-warning.text-dark, .text-bg-warning { color: #1f2937 !important; }
.bg-info, .badge.bg-info, .text-bg-info { color: #082f49 !important; }
@media (prefers-color-scheme: light) {
  .btn.btn-outline-light { color: var(--s-text); border-color: var(--s-border); }
  .btn.btn-outline-light:hover { background: var(--s-surface2); color: var(--s-text); }
}
@media (prefers-color-scheme: dark) {
  .btn.btn-outline-dark { --bs-btn-color: var(--s-text); color: var(--s-text); border-color: var(--s-border); }
  .btn.btn-outline-dark:hover { background: var(--s-surface2); color: var(--s-text); }
  .btn.btn-success { background-color: #15803d; border-color: #15803d; color: #fff; }
  .btn.btn-success:hover { background-color: #166534; border-color: #166534; }
  .alert-secondary { background: var(--s-surface2); border-color: var(--s-border); color: var(--s-text); }
  .alert-light     { background: var(--s-surface2); border-color: var(--s-border); color: var(--s-text); }
  .list-group-item { background-color: var(--s-surface); border-color: var(--s-border); color: var(--s-text); }
  .list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--s-surface2); color: var(--s-text); }
  .table-light, .table-light > th, .table-light > td, thead.table-light th {
    --bs-table-bg: var(--s-surface2); background-color: var(--s-surface2) !important; color: var(--s-muted) !important;
  }
  .table-success > *, .table-success td { --bs-table-bg: rgba(22,163,74,.15); color: var(--s-text); }
  .table-warning > *, .table-warning td { --bs-table-bg: rgba(217,119,6,.15); color: var(--s-text); }
  .table-danger  > *, .table-danger td  { --bs-table-bg: rgba(220,38,38,.15); color: var(--s-text); }
  .table-info    > *, .table-info td    { --bs-table-bg: rgba(14,116,144,.18); color: var(--s-text); }
  .progress { background-color: var(--s-surface2); }
  .form-check-input { background-color: var(--s-field); border-color: var(--s-border); }
  .form-check-input:checked { background-color: var(--s-primary); border-color: var(--s-primary); }
  .btn-light { background: var(--s-surface2); border-color: var(--s-border); color: var(--s-text); }
  .text-dark { color: var(--s-text) !important; }
  .bg-warning.text-dark, .badge.bg-warning.text-dark { color: #1f2937 !important; }
  .bg-light.text-dark, .badge.bg-light.text-dark, .badge.bg-light { background-color: var(--s-surface2) !important; color: var(--s-text) !important; }
  kbd, code { background: var(--s-surface2); color: var(--s-text); }
}