/* ═════════════════════════════════════════════════════════════════════
 *  TEMA CORPORATIVO GLOBAL — Pesca del Mar Outdoors
 *
 *  Aplica branding azul navy + acento amarillo a elementos compartidos:
 *    - Sidebar (más visible, navy con texto blanco)
 *    - Topbar móvil
 *    - Botones primarios
 *    - Footer del sidebar (perfil de usuario)
 *
 *  Diseñado para NO romper otros módulos: solo pinta la barra lateral y
 *  elementos de chrome global. El contenido principal de cada módulo
 *  mantiene su estilo (RRHH y Cobranza tienen su propio rrhh_theme.css).
 * ═══════════════════════════════════════════════════════════════════ */

:root {
    --corp-blue:        #0057BF;
    --corp-blue-deep:   #003d8a;
    --corp-navy:        #081E4D;
    --corp-navy-deep:   #050f2e;
    --corp-yellow:      #FFC20E;
    --corp-orange:      #FF6B1F;
    --corp-yellow-2:    #f5a800;
}

/* ═════════════════════════════════════════════════════════════════════
 *  SIDEBAR — fondo navy con texto blanco, look corporativo
 * ═══════════════════════════════════════════════════════════════════ */
aside#sidebar {
    background: linear-gradient(180deg, var(--corp-navy) 0%, var(--corp-navy-deep) 100%) !important;
    border-right: 0 !important;
    color: #fff;
    box-shadow: 4px 0 18px rgba(8, 30, 77, 0.18);
}

/* Patrón sutil diagonal */
aside#sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        45deg, transparent, transparent 30px,
        rgba(255,255,255,0.018) 30px, rgba(255,255,255,0.018) 32px);
    z-index: 0;
}
aside#sidebar > * { position: relative; z-index: 1; }

/* Logo header del sidebar */
aside#sidebar > div:first-child {
    background: linear-gradient(135deg, var(--corp-blue) 0%, var(--corp-blue-deep) 100%) !important;
    border-bottom: 3px solid var(--corp-yellow) !important;
}
aside#sidebar > div:first-child span.font-bold,
aside#sidebar > div:first-child span:not(.text-2xl) {
    color: #fff !important;
    letter-spacing: 0.3px;
}
aside#sidebar #sidebar-hide {
    color: rgba(255,255,255,0.7) !important;
}
aside#sidebar #sidebar-hide:hover {
    background: rgba(255,255,255,0.1) !important;
    color: var(--corp-yellow) !important;
}

/* Buscador del sidebar — fondo translúcido */
aside#sidebar input[type="search"],
aside#sidebar input[placeholder*="Buscar" i],
aside#sidebar input[placeholder*="buscar" i] {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: #fff !important;
}
aside#sidebar input[type="search"]::placeholder,
aside#sidebar input[placeholder*="Buscar" i]::placeholder {
    color: rgba(255,255,255,0.5) !important;
}
aside#sidebar input[type="search"]:focus {
    border-color: var(--corp-yellow) !important;
    background: rgba(255,255,255,0.12) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 194, 14, 0.25) !important;
}
/* Atajo Ctrl+K */
aside#sidebar kbd {
    background: rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.85) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
}

/* Headers de sección (COMPRAS, OPERACIONES, etc.) */
aside#sidebar [class*="text-xs"][class*="uppercase"],
aside#sidebar [class*="text-[10px]"][class*="uppercase"],
aside#sidebar [class*="text-[11px]"][class*="uppercase"] {
    color: var(--corp-yellow) !important;
    opacity: 0.85;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
}

/* Items del menú (links) */
aside#sidebar nav a,
aside#sidebar a[href]:not([href="#"]) {
    color: rgba(255,255,255,0.9) !important;
    transition: background 0.15s, color 0.15s;
}
aside#sidebar a[href]:hover {
    background: rgba(255,255,255,0.07) !important;
    color: #fff !important;
}
aside#sidebar a[href] svg {
    color: rgba(255,255,255,0.7) !important;
}
aside#sidebar a[href]:hover svg {
    color: var(--corp-yellow) !important;
}

/* Item ACTIVO del sidebar */
aside#sidebar a.bg-indigo-50,
aside#sidebar a[class*="bg-indigo-50"],
aside#sidebar a.active,
aside#sidebar a[aria-current="page"] {
    background: linear-gradient(90deg, rgba(255, 194, 14, 0.18) 0%, rgba(255, 194, 14, 0.05) 100%) !important;
    color: #fff !important;
    border-left: 3px solid var(--corp-yellow) !important;
    padding-left: calc(1rem - 3px) !important;
    font-weight: 600 !important;
}
aside#sidebar a.bg-indigo-50 svg,
aside#sidebar a[class*="bg-indigo-50"] svg,
aside#sidebar a.active svg,
aside#sidebar a[aria-current="page"] svg {
    color: var(--corp-yellow) !important;
}
aside#sidebar a.text-indigo-700,
aside#sidebar a[class*="text-indigo"] {
    color: #fff !important;
}

/* Sub-items (Resinas, Reorden inteligente) */
aside#sidebar a[class*="ml-4"],
aside#sidebar a[class*="ml-6"],
aside#sidebar a[class*="ml-8"],
aside#sidebar a[class*="pl-8"],
aside#sidebar a[class*="pl-10"] {
    color: rgba(255,255,255,0.75) !important;
    font-size: 0.85rem;
}

/* Bordes internos del sidebar */
aside#sidebar [class*="border-gray-200"],
aside#sidebar [class*="border-t"]:not([class*="border-t-"]),
aside#sidebar [class*="border-b"]:not([class*="border-b-"]) {
    border-color: rgba(255,255,255,0.10) !important;
}

/* ═════════════════════════════════════════════════════════════════════
 *  Footer del sidebar — perfil del usuario
 * ═══════════════════════════════════════════════════════════════════ */
aside#sidebar > div:last-child,
aside#sidebar > .border-t:last-child {
    background: rgba(0,0,0,0.18);
}

/* Avatar circular */
aside#sidebar .bg-red-500,
aside#sidebar [class*="rounded-full"][class*="bg-"] {
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Nombre y rol del usuario */
aside#sidebar .text-gray-900 {
    color: #fff !important;
}
aside#sidebar .text-gray-700 {
    color: rgba(255,255,255,0.85) !important;
}
aside#sidebar .text-gray-600,
aside#sidebar .text-gray-500 {
    color: rgba(255,255,255,0.65) !important;
}

/* Badge "admin" */
aside#sidebar [class*="bg-purple-100"],
aside#sidebar [class*="bg-violet-100"] {
    background: rgba(255, 194, 14, 0.18) !important;
    color: var(--corp-yellow) !important;
}

/* Botones del footer (Modo oscuro, Cambiar contraseña, Mi firma) */
aside#sidebar button.bg-white,
aside#sidebar a.bg-white,
aside#sidebar button[class*="bg-gray-100"],
aside#sidebar a[class*="bg-gray-100"] {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.9) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
}
aside#sidebar button.bg-white:hover,
aside#sidebar a.bg-white:hover {
    background: rgba(255,255,255,0.12) !important;
}
aside#sidebar #notification-bell,
aside#sidebar button[id*="notif"] {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.85) !important;
}

/* Compacto / botón ayuda */
aside#sidebar button[id*="compact"],
aside#sidebar button[title*="Ayuda" i],
aside#sidebar button[aria-label*="Ayuda" i] {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.9) !important;
    border-color: rgba(255,255,255,0.10) !important;
}

/* Modo oscuro / Cambiar contraseña / Mi firma — links en footer */
aside#sidebar div:last-child a:not(.bg-red-500):not([class*="bg-red"]),
aside#sidebar div:last-child button:not([class*="bg-red"]) {
    color: rgba(255,255,255,0.85) !important;
}

/* Botón CERRAR SESIÓN (rojo) — más prominente */
aside#sidebar a[href*="logout"],
aside#sidebar a[class*="bg-red-500"],
aside#sidebar button[class*="bg-red-500"] {
    background: linear-gradient(135deg, #d92027 0%, #a31820 100%) !important;
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    box-shadow: 0 2px 8px rgba(217, 32, 39, 0.35);
    border: none !important;
}
aside#sidebar a[href*="logout"]:hover,
aside#sidebar a[class*="bg-red-500"]:hover {
    background: linear-gradient(135deg, #ff2c33 0%, #b81920 100%) !important;
    transform: translateY(-1px);
}
aside#sidebar a[href*="logout"] svg,
aside#sidebar a[class*="bg-red-500"] svg {
    color: #fff !important;
}

/* Scrollbar del sidebar */
aside#sidebar::-webkit-scrollbar,
aside#sidebar *::-webkit-scrollbar { width: 6px; height: 6px; }
aside#sidebar::-webkit-scrollbar-track,
aside#sidebar *::-webkit-scrollbar-track { background: transparent; }
aside#sidebar::-webkit-scrollbar-thumb,
aside#sidebar *::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
}
aside#sidebar::-webkit-scrollbar-thumb:hover,
aside#sidebar *::-webkit-scrollbar-thumb:hover {
    background: var(--corp-yellow);
}

/* ═════════════════════════════════════════════════════════════════════
 *  TOPBAR MÓVIL — header con paleta corporativa
 * ═══════════════════════════════════════════════════════════════════ */
.lg\:hidden.sticky.top-0[class*="bg-white"] {
    background: linear-gradient(135deg, var(--corp-blue) 0%, var(--corp-blue-deep) 100%) !important;
    color: #fff !important;
    border-bottom: 3px solid var(--corp-yellow) !important;
}
.lg\:hidden.sticky.top-0 #sidebar-toggle {
    color: #fff !important;
}
.lg\:hidden.sticky.top-0 #sidebar-toggle:hover {
    background: rgba(255,255,255,0.15) !important;
}

/* ═════════════════════════════════════════════════════════════════════
 *  Compatibilidad con modo oscuro toggle (html.dark) — el sidebar
 *  ya es oscuro, así que respetamos ambos estados
 * ═══════════════════════════════════════════════════════════════════ */
html.dark aside#sidebar {
    background: linear-gradient(180deg, var(--corp-navy-deep) 0%, #02060f 100%) !important;
}

/* ═════════════════════════════════════════════════════════════════════
 *  BOTÓN FLOTANTE de re-abrir sidebar
 * ═══════════════════════════════════════════════════════════════════ */
#sidebar-reopen {
    background: linear-gradient(135deg, var(--corp-blue) 0%, var(--corp-blue-deep) 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(8, 30, 77, 0.35) !important;
}
#sidebar-reopen:hover {
    background: linear-gradient(135deg, var(--corp-blue-deep) 0%, var(--corp-navy) 100%) !important;
}


/* ═════════════════════════════════════════════════════════════════════
 *  TEMA UNIFORME — aplica al contenido principal de TODOS los módulos
 *  (cotizaciones, almacén, envasado, pagos, reorden, etc.)
 *
 *  Reglas pensadas para mejorar consistencia sin romper layouts:
 *    - Tablas con header azul navy y texto blanco
 *    - Cards con sombra sutil
 *    - Botones primarios con gradiente azul corporativo
 *    - Inputs con focus azul
 *    - Stripes en tablas pares
 *
 *  Estas reglas NO usan !important agresivo para que módulos con tema
 *  específico (RRHH, Cobranza vía rrhh_theme.css) puedan sobreescribir.
 *  Usan selectores de baja-media especificidad para Tailwind utility
 *  classes comunes.
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Tipografía base de body ────────────────────────────────────── */
body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #0A1428;
}

/* ─────────────────────────────────────────────────────────────────
 * ESTILO EJECUTIVO DE TABLAS — basado en Crédito y Cobranza
 * ───────────────────────────────────────────────────────────────── */

/* Header: gradiente navy con texto blanco SIEMPRE legible */
#main-container table:not(.no-corp-style) thead tr,
#main-container table:not(.no-corp-style) > thead > tr {
    background: linear-gradient(180deg, var(--corp-blue) 0%, var(--corp-blue-deep) 100%) !important;
}
#main-container table:not(.no-corp-style) thead tr th,
#main-container table:not(.no-corp-style) thead tr td {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
    padding: 11px 14px !important;
    border-bottom: 2px solid var(--corp-navy) !important;
    vertical-align: middle !important;
}
#main-container table:not(.no-corp-style) thead tr th *,
#main-container table:not(.no-corp-style) thead tr td * {
    color: #ffffff !important;
    opacity: 1 !important;
    font-size: inherit !important;
}
/* Iconos de ordenamiento */
#main-container table:not(.no-corp-style) thead tr th svg,
#main-container table:not(.no-corp-style) thead tr th [class*="sort"] {
    color: rgba(255, 255, 255, 0.8) !important;
    opacity: 0.8 !important;
}
/* Primera/última celda del header con esquinas redondeadas si la
 * tabla no está dentro de un wrapper con overflow:hidden */
#main-container table:not(.no-corp-style) thead tr th:first-child {
    border-top-left-radius: 6px;
}
#main-container table:not(.no-corp-style) thead tr th:last-child {
    border-top-right-radius: 6px;
}

/* ── Body: stripe + hover azul corporativo ───────────────────── */
/* Auto-stripe: TODAS las tablas dentro de #main-container tienen zebra
 * sutil para el look ejecutivo. Si una tabla NO debe tener stripe,
 * agregar clase .no-corp-stripe */
#main-container table:not(.no-corp-style):not(.no-corp-stripe) tbody tr:nth-child(even) {
    background: #FAFBFC;
}
#main-container table:not(.no-corp-style):not(.no-corp-stripe) tbody tr:nth-child(odd) {
    background: #FFFFFF;
}
/* Hover azul corporativo MUY suave (más profesional que ámbar) */
#main-container table:not(.no-corp-style) tbody tr:hover {
    background: rgba(0, 87, 191, 0.04) !important;
    cursor: default;
}
#main-container table:not(.no-corp-style) tbody tr:hover td {
    color: var(--corp-navy);
}

/* Celdas: padding generoso ejecutivo + alineación vertical */
#main-container table:not(.no-corp-style) tbody td {
    padding: 11px 14px;
    vertical-align: middle;
    color: #0A1428;
    border-top: 1px solid #EEF1F5;
}

/* Folios y códigos (E-15674, EMP-130, A160320) — estilo link azul */
#main-container table:not(.no-corp-style) tbody td.font-mono,
#main-container table:not(.no-corp-style) tbody td [class*="font-mono"] {
    color: var(--corp-blue) !important;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Datos secundarios (MXN, USD, badges pequeños) — gris ligero */
#main-container table:not(.no-corp-style) tbody td .text-gray-400,
#main-container table:not(.no-corp-style) tbody td .text-gray-500 {
    color: #98A2B3 !important;
    font-weight: 500;
}

/* Filas de subtotal/total: bg gris muy claro + bold */
#main-container table:not(.no-corp-style) tbody tr.subtotal,
#main-container table:not(.no-corp-style) tbody tr.total,
#main-container table:not(.no-corp-style) tfoot tr {
    background: #F1F5F9 !important;
    font-weight: 700 !important;
    color: var(--corp-navy) !important;
    border-top: 2px solid #CBD5E1 !important;
}
#main-container table:not(.no-corp-style) tbody tr.subtotal td,
#main-container table:not(.no-corp-style) tbody tr.total td,
#main-container table:not(.no-corp-style) tfoot tr td {
    padding: 13px 14px !important;
}

/* Tabla envuelta en card: border-radius + shadow */
#main-container .table-wrapper,
#main-container [class*="overflow-x-auto"]:has(> table) {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(8, 30, 77, 0.08), 0 1px 2px rgba(8, 30, 77, 0.04);
    border: 1px solid #E5E9F0;
}

/* Pills/badges en celdas: redondeados, padding consistente */
#main-container table:not(.no-corp-style) tbody td span[class*="rounded-full"],
#main-container table:not(.no-corp-style) tbody td span[class*="rounded-md"][class*="bg-"],
#main-container table:not(.no-corp-style) tbody td span[class*="rounded"][class*="bg-"][class*="text-"] {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ── Cards y paneles blancos: sombra sutil + radio mejorado ────── */
#main-container .bg-white.rounded-lg,
#main-container .bg-white.border.rounded-lg,
#main-container [class*="rounded-lg"][class*="bg-white"]:not(.shadow-none) {
    box-shadow: 0 1px 3px rgba(8, 30, 77, 0.06), 0 1px 2px rgba(8, 30, 77, 0.04);
}

/* ── Botones primarios con gradiente azul corporativo ───────────── */
/* Tailwind bg-indigo-600/700 → cambiamos a azul corporativo en módulos
 * que NO tengan tema específico ya aplicado */
body:not(.rrhh-scope):not(.cobranza-scope) button.bg-indigo-600,
body:not(.rrhh-scope):not(.cobranza-scope) a.bg-indigo-600,
body:not(.rrhh-scope):not(.cobranza-scope) button[class*="bg-indigo-6"],
body:not(.rrhh-scope):not(.cobranza-scope) a[class*="bg-indigo-6"] {
    background: linear-gradient(135deg, var(--corp-blue) 0%, var(--corp-blue-deep) 100%) !important;
    color: #fff !important;
    box-shadow: 0 1px 0 var(--corp-navy);
    transition: transform 0.15s, box-shadow 0.15s;
}
body:not(.rrhh-scope):not(.cobranza-scope) button.bg-indigo-600:hover,
body:not(.rrhh-scope):not(.cobranza-scope) a.bg-indigo-600:hover,
body:not(.rrhh-scope):not(.cobranza-scope) button[class*="hover:bg-indigo-7"]:hover,
body:not(.rrhh-scope):not(.cobranza-scope) a[class*="hover:bg-indigo-7"]:hover {
    background: linear-gradient(135deg, var(--corp-blue-deep) 0%, var(--corp-navy) 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 87, 191, 0.25);
}

/* Botones secundarios bg-emerald conservan verde corporativo */
body:not(.rrhh-scope):not(.cobranza-scope) button.bg-emerald-600,
body:not(.rrhh-scope):not(.cobranza-scope) a.bg-emerald-600,
body:not(.rrhh-scope):not(.cobranza-scope) button[class*="bg-emerald-6"] {
    background: linear-gradient(135deg, #16A34A 0%, #1EA854 100%) !important;
    color: #fff !important;
    box-shadow: 0 1px 0 #15803d;
}

/* Botones de acento amarillo (Tailwind bg-amber/yellow) */
body:not(.rrhh-scope):not(.cobranza-scope) button.bg-amber-500,
body:not(.rrhh-scope):not(.cobranza-scope) button.bg-yellow-500,
body:not(.rrhh-scope):not(.cobranza-scope) button[class*="bg-amber-5"],
body:not(.rrhh-scope):not(.cobranza-scope) button[class*="bg-yellow-5"] {
    background: linear-gradient(135deg, var(--corp-yellow) 0%, var(--corp-yellow-2) 100%) !important;
    color: var(--corp-navy) !important;
    font-weight: 600;
    box-shadow: 0 1px 0 #c89400;
}

/* Botones rojos: rojo corporativo */
body:not(.rrhh-scope):not(.cobranza-scope) button.bg-red-600,
body:not(.rrhh-scope):not(.cobranza-scope) a.bg-red-600,
body:not(.rrhh-scope):not(.cobranza-scope) button[class*="bg-red-6"] {
    background: linear-gradient(135deg, #d92027 0%, #a31820 100%) !important;
    color: #fff !important;
    box-shadow: 0 1px 0 #7a1218;
}

/* ── Inputs y selects: focus azul corporativo ──────────────────── */
body:not(.rrhh-scope):not(.cobranza-scope) input[type="text"]:focus,
body:not(.rrhh-scope):not(.cobranza-scope) input[type="email"]:focus,
body:not(.rrhh-scope):not(.cobranza-scope) input[type="number"]:focus,
body:not(.rrhh-scope):not(.cobranza-scope) input[type="date"]:focus,
body:not(.rrhh-scope):not(.cobranza-scope) input[type="search"]:focus,
body:not(.rrhh-scope):not(.cobranza-scope) input[type="password"]:focus,
body:not(.rrhh-scope):not(.cobranza-scope) textarea:focus,
body:not(.rrhh-scope):not(.cobranza-scope) select:focus {
    border-color: var(--corp-blue) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 87, 191, 0.15) !important;
}

/* ── Headings: subtítulos con tinte azul ───────────────────────── */
body:not(.rrhh-scope):not(.cobranza-scope) main h1.text-gray-900,
body:not(.rrhh-scope):not(.cobranza-scope) main h2.text-gray-900 {
    color: var(--corp-navy);
}

/* ── Links de texto: azul corporativo ──────────────────────────── */
body:not(.rrhh-scope):not(.cobranza-scope) main a:not([class*="bg-"]):not(.btn):not(.rrhh-btn) {
    color: var(--corp-blue);
}
body:not(.rrhh-scope):not(.cobranza-scope) main a:not([class*="bg-"]):not(.btn):hover {
    color: var(--corp-blue-deep);
}

/* Links indigo Tailwind → corporativo */
body:not(.rrhh-scope):not(.cobranza-scope) main a.text-indigo-600,
body:not(.rrhh-scope):not(.cobranza-scope) main a.text-indigo-700 {
    color: var(--corp-blue) !important;
}
body:not(.rrhh-scope):not(.cobranza-scope) main a.text-indigo-600:hover,
body:not(.rrhh-scope):not(.cobranza-scope) main a.text-indigo-700:hover {
    color: var(--corp-blue-deep) !important;
}

/* ── Badges/pills genéricos con paleta corporativa ─────────────── */
body:not(.rrhh-scope):not(.cobranza-scope) [class*="bg-indigo-100"] {
    background-color: rgba(0, 87, 191, 0.10) !important;
}
body:not(.rrhh-scope):not(.cobranza-scope) [class*="text-indigo-700"],
body:not(.rrhh-scope):not(.cobranza-scope) [class*="text-indigo-800"] {
    color: var(--corp-blue-deep) !important;
}

/* ── Tabs / pestañas: borde activo amarillo ─────────────────────── */
body:not(.rrhh-scope):not(.cobranza-scope) [class*="border-indigo-500"] {
    border-color: var(--corp-yellow) !important;
}
body:not(.rrhh-scope):not(.cobranza-scope) [class*="ring-indigo"] {
    --tw-ring-color: var(--corp-blue) !important;
}

/* ── Scrollbar horizontal en contenedores principales ──────────── */
#main-container ::-webkit-scrollbar { height: 10px; width: 10px; }
#main-container ::-webkit-scrollbar-track { background: #f7f8fa; }
#main-container ::-webkit-scrollbar-thumb {
    background: #d8dde5;
    border-radius: 5px;
}
#main-container ::-webkit-scrollbar-thumb:hover {
    background: var(--corp-blue);
}

/* ── Topbar móvil: ya estaba estilizada arriba para todas las páginas ── */


/* ═════════════════════════════════════════════════════════════════════
 *  REFINAMIENTO EJECUTIVO — cards, headings, badges, KPIs
 * ═══════════════════════════════════════════════════════════════════ */

/* Cards con sombra más profunda y borde sutil */
#main-container .bg-white.border.rounded-lg,
#main-container .bg-white.rounded-lg.shadow,
#main-container [class*="rounded-lg"][class*="bg-white"]:not(.shadow-none) {
    box-shadow: 0 1px 3px rgba(8, 30, 77, 0.06),
                 0 4px 12px rgba(8, 30, 77, 0.04) !important;
    border-color: #E5E9F0 !important;
}

/* Headings de página principales */
#main-container main h1,
#main-container > h1 {
    color: var(--corp-navy);
    font-weight: 700;
    letter-spacing: -0.3px;
}

/* Headings de secciones (h2, h3) */
#main-container main h2,
#main-container main h3 {
    color: var(--corp-blue-deep);
    font-weight: 600;
}

/* Pills y badges con tonos pastel corporativos legibles */
#main-container [class*="bg-emerald-100"],
#main-container [class*="bg-green-100"] {
    background-color: #DCFCE7 !important;
    color: #166534 !important;
}
#main-container [class*="bg-amber-100"],
#main-container [class*="bg-yellow-100"] {
    background-color: #FEF3C7 !important;
    color: #92400E !important;
}
#main-container [class*="bg-red-100"] {
    background-color: #FEE2E2 !important;
    color: #991B1B !important;
}
#main-container [class*="bg-blue-100"]:not([class*="text-"]) {
    background-color: #DBEAFE !important;
    color: #1E40AF !important;
}
#main-container [class*="bg-gray-100"]:not(table):not(thead) {
    background-color: #F1F5F9 !important;
    color: #475569 !important;
}

/* Refinamiento de "Pendiente" — ámbar suave consistente */
#main-container span:not([class*="bg-"]) + span[class*="text-"] {
    /* badges sin bg pero con text-color: dejarlos */
}

/* KPI cards genéricos: numero grande + label uppercase */
#main-container [class*="grid-cols"] [class*="bg-white"][class*="rounded"] .text-2xl,
#main-container [class*="grid-cols"] [class*="bg-white"][class*="rounded"] .text-3xl {
    font-weight: 700;
    color: var(--corp-navy);
    letter-spacing: -0.5px;
}

/* Botones outline: borde azul corporativo */
body:not(.rrhh-scope):not(.cobranza-scope) #main-container button[class*="border-indigo"],
body:not(.rrhh-scope):not(.cobranza-scope) #main-container a[class*="border-indigo"] {
    border-color: var(--corp-blue) !important;
    color: var(--corp-blue) !important;
}
body:not(.rrhh-scope):not(.cobranza-scope) #main-container button[class*="border-indigo"]:hover {
    background-color: rgba(0, 87, 191, 0.08) !important;
}

/* Filas con clase específica de estado: respetar pero ajustar */
#main-container table tbody tr.bg-red-50,
#main-container table tbody tr[class*="bg-red-50"] {
    background-color: #FEF2F2 !important;
}
#main-container table tbody tr.bg-green-50,
#main-container table tbody tr[class*="bg-green-50"] {
    background-color: #F0FDF4 !important;
}
#main-container table tbody tr.bg-amber-50,
#main-container table tbody tr[class*="bg-amber-50"],
#main-container table tbody tr[class*="bg-yellow-50"] {
    background-color: #FFFBEB !important;
}

/* Inputs y selects con look más limpio */
#main-container input[type="text"],
#main-container input[type="email"],
#main-container input[type="number"],
#main-container input[type="date"],
#main-container input[type="search"],
#main-container input[type="password"],
#main-container textarea,
#main-container select {
    border-color: #D1D9E6;
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* Section dividers (separadores horizontales) */
#main-container hr {
    border-color: #E5E9F0;
    border-top-width: 1px;
    margin: 1.25rem 0;
}

/* Breadcrumbs / migas */
#main-container nav.breadcrumb a,
#main-container [class*="breadcrumb"] a {
    color: var(--corp-blue);
    font-weight: 500;
}

/* Empty states (Sin registros, etc.) */
#main-container .empty-state,
#main-container [class*="text-center"][class*="text-gray-400"],
#main-container [class*="text-center"][class*="text-gray-500"] {
    color: #94A3B8;
}