/*
  XiaoHack SAT — Base CSS
  Version: 2025-09-02.3 (Nav contrast + lighter dark)
  Notas:
  - Minimal overrides sobre Bootstrap.
  - Paleta más profesional y alto contraste (light/dark).
  - Navbar estable, hero legible, cards con hover sutil, formularios y alerts afinados.
*/

/* =====================
   1) Variables de tema
   ===================== */
:root {
  /* Colores base (LIGHT) */
  --sat-bg: #f4f6f8;           /* gris muy claro */
  --sat-surface: #ffffff;      /* superficie principal */
  --sat-surface-2: #f9fafb;    /* superficie secundaria */
  --sat-text: #0f172a;         /* gris-azul 900 */
  --sat-muted: #b6c1cf;        /* gris-azul 500 */
  --sat-border: #e2e8f0;       /* gris 200 */
  --sat-primary: #2563eb;      /* azul 600 */
  --sat-accent: #10b981;       /* verde 500 */
  --sat-shadow: 0 10px 30px rgba(2,6,23,.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Paleta dark más clara (dim) */
    --sat-bg: #141a22;           /* fondo general (antes: #0b0f14) */
    --sat-surface: #1b2430;      /* paneles (antes: #111827) */
    --sat-surface-2: #202a37;    /* superficie secundaria */
    --sat-text: #eef2f7;         /* texto principal más claro */
    --sat-muted: #b6c1cf;        /* texto secundario */
    --sat-border: #2a3645;       /* bordes */
    --sat-primary: #60a5fa;      /* azul 400–500 */
    --sat-accent: #34d399;       /* verde 400–500 */
    --sat-shadow: 0 14px 40px rgba(0,0,0,.35);
  }
}

/* =====================
   2) Base & resets
   ===================== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--sat-bg);
  color: var(--sat-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { height: auto; max-width: 100%; }
strong, b { font-weight: 600; }

/* Enlaces más elegantes */
a { text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

/* =====================
   3) Navbar profesional
   ===================== */
.navbar {
  background: var(--sat-surface) !important;
  border-bottom: 1px solid var(--sat-border);
  box-shadow: var(--sat-shadow);
}
.navbar .navbar-brand,
.navbar .nav-link { display: flex; align-items: center; gap: .35rem; }

/* Tipografía neutral para evitar desbordes */
.navbar a { font-size: 1rem !important; }

/* Colores de enlaces visibles en ambos temas */
.navbar .navbar-brand, .navbar .nav-link { color: var(--sat-text) !important; opacity: .85; }
.navbar .nav-link:hover { opacity: 1; }
.navbar .nav-link.active,
.navbar .nav-link:focus { color: var(--sat-primary) !important; opacity: 1; font-weight: 600; }

/* Logo del brand, tamaño consistente */
.navbar .navbar-brand img { height: 40px; width: auto; max-width: none; border-radius: .35rem; }

/* Breadcrumbs dentro del navbar (si se usan) */
.breadcrumb { margin: 0; }
.breadcrumb .breadcrumb-item a { color: var(--sat-muted); }
.breadcrumb .breadcrumb-item.active { color: var(--sat-text); }

/* =====================
   4) Dropdowns
   ===================== */
.dropdown-menu { border-color: var(--sat-border); background: var(--sat-surface); box-shadow: var(--sat-shadow); }
.dropdown-menu.show { margin: 0 !important; }
.dropdown-item { color: var(--sat-text); }
.dropdown-item:hover { background: rgba(37,99,235,.08); }

/* =====================
   5) Selector de idioma
   ===================== */
#language-selector { min-width: 72px; }
#language-form .form-select.form-select-sm {
  padding-top: .25rem; padding-bottom: .25rem;
  background: var(--sat-surface-2); color: var(--sat-text); border-color: var(--sat-border);
}

/* =====================
   6) Contenedores y layout
   ===================== */
.container { max-width: 1140px !important; }
@media (min-width: 1400px) { .container { max-width: 1320px !important; } }

main.container { padding-top: 1.25rem; padding-bottom: 2.5rem; }

/* Hero con legibilidad alta */
.hero {
  background: var(--sat-surface);
  border: 1px solid var(--sat-border);
  border-radius: .9rem;
  padding: 2rem 1.5rem;
  box-shadow: var(--sat-shadow);
}
.hero h1, .hero .display-6 { color: var(--sat-text); }
.hero .lead { color: var(--sat-muted); }

/* =====================
   7) Tarjetas y estados
   ===================== */
.card {
  background: var(--sat-surface);
  border: 1px solid var(--sat-border);
  color: var(--sat-text);
  border-radius: .9rem;
  box-shadow: var(--sat-shadow);
  font-weight: 400; /* evita “bold” global */
}
.card-title { font-weight: 600; }
.card-text.small { color: var(--sat-muted); }

/* Hover sutil para tarjetas clicables (enlaces envolviendo .card) */
.card:hover { border-color: color-mix(in srgb, var(--sat-primary) 28%, var(--sat-border)); transform: translateY(-1px); transition: border-color .2s ease, transform .2s ease; }

/* Botones redondeados + sombras suaves */
.btn { border-radius: .6rem; box-shadow: 0 2px 8px rgba(2,6,23,.05); }
.btn-primary { background-color: var(--sat-primary); border-color: var(--sat-primary); }
.btn-primary:hover { filter: brightness(.95); }
.btn-outline-secondary { color: var(--sat-text); border-color: var(--sat-border); }
.btn-outline-secondary:hover { background: var(--sat-surface-2); }

/* =====================
   8) Mensajes (alerts & legacy)
   ===================== */
.alert { border-radius: .6rem; }
.flash-message { /* fallback si no se usa alert Bootstrap */
  margin: 1rem auto; max-width: 1140px; padding: .75rem 1rem; border-radius: .6rem;
  border: 1px solid var(--sat-border); background: var(--sat-surface);
}
.flash-message.success { border-color: #b6e1c9; background: #ecfdf5; }
.flash-message.error, .flash-message.danger { border-color: #f5c2c7; background: #fff5f6; }
.flash-message.info { border-color: #b6d4fe; background: #eef5ff; }
.flash-message.warning { border-color: #ffe69c; background: #fff8e1; }

/* =====================
   9) Tablas y formularios
   ===================== */
.table { color: var(--sat-text); }
.table thead th { border-bottom: 2px solid var(--sat-border); }
.table td, .table th { border-top: 1px solid var(--sat-border); }

.form-control, .form-select { border-color: var(--sat-border); background: var(--sat-surface); color: var(--sat-text); }
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 .2rem rgba(37,99,235,.15); border-color: var(--sat-primary); }
.form-control::placeholder { color: var(--sat-muted); opacity: .9; }

/* Tarjeta de login/formularios principales */
.auth-card, .card.auth {
  background: var(--sat-surface);
  border: 1px solid var(--sat-border);
  box-shadow: var(--sat-shadow);
}

/* =====================
   10) Footer & wrapper legacy
   ===================== */
footer { background: transparent; color: var(--sat-muted); }
.wrapper { text-align: center; color: var(--sat-muted); }
@media (max-width: 576px) { .wrapper { position: static; height: auto; padding: .75rem 0; } }

/* =====================
   11) Utilidades
   ===================== */
.shadow-soft { box-shadow: var(--sat-shadow) !important; }
.rounded-2xl { border-radius: 1rem !important; }
.text-muted { color: var(--sat-muted) !important; }

/* Oculta el texto largo del brand en pantallas muy pequeñas para que no rompa el navbar */
@media (max-width: 380px) { .navbar .navbar-brand span { display: none; } }

/* =====================
   12) Contrast hotfix (hero/cards)
   ===================== */
/* Neutraliza estilos heredados que apagaban el hero */
.title, .title * { opacity: 1 !important; filter: none !important; }

/* Fuerza legibilidad en hero */
.hero, .hero * { color: var(--sat-text) !important; }
.hero { opacity: 1 !important; }
@media (prefers-color-scheme: dark) {
  .hero { background-color: #111827 !important; border-color: #1f2937 !important; }
}

/* Tarjetas con contraste claro en ambos temas */
.card { opacity: 1 !important; }
.card .card-title, .card .card-text { color: var(--sat-text) !important; }
@media (prefers-color-scheme: dark) {
  .card { background-color: var(--sat-surface-2) !important; border-color: var(--sat-border) !important; }
}
.card .card-title, .card .card-text { color: var(--sat-text) !important; }
@media (prefers-color-scheme: dark) {
  .card { background-color: #0f172a !important; border-color: #1f2937 !important; }
}

/* Tabla: mejora de contraste de filas en dark */
@media (prefers-color-scheme: dark) {
  .table-striped > tbody > tr:nth-of-type(odd) { --bs-table-accent-bg: rgba(255,255,255,.03); color: var(--sat-text); }
  .table-hover > tbody > tr:hover { --bs-table-accent-bg: rgba(255,255,255,.05); color: var(--sat-text); }
}
/* --- SAT List responsive helpers --- */
.list-cards .card { border-radius: 0.75rem; }
.list-cards .card-title { font-size: 1.05rem; }

/* Botones fluidos en móviles dentro de formularios compactos */
@media (max-width: 576px) {
  .btn.w-100 { min-height: 40px; }
}

/* Asegura que la columna de acciones no “salte” en tablas anchas */
@media (min-width: 768px) {
  table .text-end { white-space: nowrap; }
}
/* Form: evitar que los iconos rompan el layout en móviles */
.input-group > .form-control.is-invalid { margin-right: 0; }
@media (max-width: 576px) {
  .d-grid.d-sm-flex .btn { width: 100%; }
}

.truncate { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .w-min { width: 1%; white-space: nowrap; }
  @media (max-width: 991.98px) { /* <= md */
    .truncate { max-width: 180px; }
    .home-card-btn { padding: .25rem .5rem; font-size: .875rem; }
  }

/* =====================
   13) Dashboard layout tweaks
   ===================== */

/* Métricas: compacidad y jerarquía */
.metrics-cards .card-body { padding: .9rem 1rem; }
.metrics-cards .card-body .text-muted.small { margin-bottom: .25rem; display:block; }
.metrics-cards .card-body .h4 { line-height: 1.1; font-weight: 700; }

/* Accesos rápidos (tiles) */
.quick-links .card { transition: transform .15s ease, box-shadow .15s ease; }
.quick-links .card:hover { transform: translateY(-2px); }
.quick-links .card-body { min-height: 92px; display:flex; align-items:center; gap:.75rem; }
.quick-links .card-body i[class^="bi"] { 
  flex: 0 0 2.25rem; width: 2.25rem; text-align:center; 
  font-size: 2rem; line-height: 1; color: var(--sat-primary); opacity: .9;
}

/* Badge de contador en esquina (p. ej., “Ver peticiones”) */
.quick-links .card.position-relative .badge,
.quick-links .corner-badge {
  position: absolute; top: .5rem; right: .5rem;
}

/* Mejoras menores de legibilidad */
.alert .alert-link { font-weight: 600; }
.card .card-title { margin-bottom: .15rem; }

/* Fallback de hover por si el navegador no soporta color-mix */
@supports not (color-mix(in srgb, red 50%, blue)) {
  .card:hover { border-color: rgba(37,99,235,.35); }
}

/* Unificación dark para cards (evita ambigüedades si hay reglas duplicadas) */
@media (prefers-color-scheme: dark) {
  .card { background-color: #0f172a !important; border-color: #1f2937 !important; }
}

/* Navbar compacto */
.navbar .nav-link { white-space: nowrap; padding-inline: .65rem; }
@media (min-width: 992px) and (max-width: 1399.98px) {
  /* En lg-xl mostramos solo iconos (el texto ya va oculto con d-none d-xl-inline) */
  .navbar .nav-link i { margin-right: 0 !important; }
}
/* Dropdown ancho cómodo */
.dropdown-menu { min-width: 14rem; }