/* =========================================================================
   Fiscal Suite — Custom overrides minimos sobre Metronic demo39.
   Filosofia: dejar que Metronic maneje sidebar/header/cards con sus estilos
   estandar. Aqui solo:
   - Tokens de marca (azul marino) para botones y acentos
   - Logo card + avatar + theme toggle (componentes nuevos nuestros)
   - Footer profesional
   - Login split moderno
   - Dark mode fix minimo (solo text-gray-900 invisible)
   ========================================================================= */

:root {
    /* Paleta marino profesional (Stripe-like) — solo para acentos */
    --fs-brand-primary: #0a2540;
    --fs-brand-primary-light: #3a6ea5;
    --fs-brand-primary-dark: #051a35;
    --fs-brand-accent: #4a90e2;
    --fs-brand-gradient-start: #0a2540;
    --fs-brand-gradient-end: #3a6ea5;
    --fs-radius-md: 12px;
    --fs-radius-lg: 16px;
    --fs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --fs-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --fs-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);

    /* Override Bootstrap primary: btn-primary y text-primary heredan marino */
    --bs-primary: #0a2540;
    --bs-primary-rgb: 10, 37, 64;
}

/* ==================== Logo topbar (contenedor compacto) ==================== */
.fs-logo-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.fs-logo-card img {
    height: 32px;
    width: auto;
    display: block;
    max-width: 150px;
    object-fit: contain;
}

/* ==================== Avatar topbar ==================== */
.fs-avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bs-border-color-translucent);
    transition: border-color 0.2s ease;
}
.fs-avatar-img:hover {
    border-color: var(--bs-primary);
}

/* ==================== Theme toggle button ==================== */
.fs-theme-toggle {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background-color: var(--bs-body-bg);
    color: var(--bs-gray-600);
    border: 1px solid var(--bs-border-color-translucent);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.fs-theme-toggle:hover {
    background-color: var(--bs-gray-100);
    color: var(--bs-primary);
}
[data-bs-theme="light"] .fs-theme-toggle .ki-sun { display: none; }
[data-bs-theme="light"] .fs-theme-toggle .ki-moon { display: inline-block; }

/* ==================== Footer profesional ==================== */
.fs-footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--bs-border-color-translucent);
    background-color: var(--bs-body-bg);
}
.fs-footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem 1rem;
    font-size: 0.8125rem;
    color: var(--bs-gray-600);
}
.fs-footer-inner .fs-footer-sep {
    color: var(--bs-gray-400);
    user-select: none;
}
.fs-footer-inner a {
    color: var(--bs-gray-700);
    text-decoration: none;
}
.fs-footer-inner a:hover {
    color: var(--bs-primary);
}
@media (max-width: 575.98px) {
    .fs-footer-inner {
        flex-direction: column;
        gap: 0.25rem;
    }
    .fs-footer-inner .fs-footer-sep { display: none; }
}

/* ==================== Login: split moderno ==================== */
.fs-login-root {
    min-height: 100vh;
    display: flex;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.fs-login-brand {
    background: linear-gradient(135deg, var(--fs-brand-gradient-start) 0%, var(--fs-brand-gradient-end) 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    color: #fff;
}
.fs-login-brand::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle, rgba(74, 144, 226, 0.22) 0%, transparent 60%);
    pointer-events: none;
}
.fs-login-brand-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 480px;
}
.fs-login-logo-card {
    background: #ffffff;
    padding: 2rem 2.5rem;
    border-radius: var(--fs-radius-lg);
    box-shadow: var(--fs-shadow-lg);
    display: inline-block;
    margin-bottom: 2rem;
}
.fs-login-logo-card img {
    height: 80px;
    width: auto;
    display: block;
}
.fs-login-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}
.fs-login-subtitle {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    margin-bottom: 3rem;
}
.fs-login-brand-footer {
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
    z-index: 1;
}
.fs-login-brand-footer a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
}
.fs-login-brand-footer a:hover { color: #fff; }

.fs-login-form-col {
    background-color: #f8fafc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 2rem;
}
.fs-login-form-wrap {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}
.fs-login-form-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--bs-gray-900);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}
.fs-login-form-subtitle {
    color: var(--bs-gray-600);
    margin-bottom: 2.5rem;
    font-size: 0.9375rem;
}
.fs-login-input-group {
    position: relative;
    margin-bottom: 1.25rem;
}
.fs-login-input-group .ki-outline {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-gray-500);
    font-size: 1.1rem;
    pointer-events: none;
}
.fs-login-input-group .form-control {
    padding-left: 42px;
    height: 48px;
    border-radius: var(--fs-radius-md);
    border: 1px solid var(--bs-border-color);
    background-color: #fff;
    font-size: 0.9375rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fs-login-input-group .form-control:focus {
    border-color: var(--fs-brand-accent);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.18);
}
.fs-login-btn {
    width: 100%;
    height: 48px;
    border-radius: var(--fs-radius-md);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    background: linear-gradient(135deg, var(--fs-brand-primary) 0%, var(--fs-brand-primary-dark) 100%);
    border: none;
    color: #fff;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.fs-login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(10, 37, 64, 0.35);
    color: #fff;
}
.fs-login-forgot {
    font-size: 0.875rem;
    color: var(--fs-brand-primary);
    text-decoration: none;
    font-weight: 500;
}
.fs-login-forgot:hover { text-decoration: underline; }
.fs-login-form-footer {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color-translucent);
    text-align: center;
    font-size: 0.8125rem;
    color: var(--bs-gray-500);
}

/* Mobile: brand collapses */
@media (max-width: 991.98px) {
    .fs-login-root { flex-direction: column; }
    .fs-login-brand { padding: 2rem 1rem; min-height: auto; }
    .fs-login-logo-card { padding: 1rem 1.25rem; margin-bottom: 1rem; }
    .fs-login-logo-card img { height: 48px; }
    .fs-login-title { font-size: 1.5rem; margin-bottom: 0.25rem; }
    .fs-login-subtitle { font-size: 0.875rem; margin-bottom: 0; }
    .fs-login-brand-footer { display: none; }
    .fs-login-form-col { padding: 2rem 1.25rem; }
}

/* ==================== Botones unificados ==================== */
/* btn-primary: accion principal (Guardar, Crear, Timbrar, Enviar) */
.btn-primary {
    background: var(--fs-brand-primary) !important;
    border-color: var(--fs-brand-primary) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background: var(--fs-brand-primary-light) !important;
    border-color: var(--fs-brand-primary-light) !important;
    color: #fff !important;
}
.btn-primary:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(74, 144, 226, 0.35) !important;
}
.btn-outline-primary {
    color: var(--fs-brand-primary) !important;
    border-color: var(--fs-brand-primary) !important;
}
.btn-outline-primary:hover {
    background: var(--fs-brand-primary) !important;
    color: #fff !important;
}

/* btn-light-primary: accion secundaria con acento marino (Ver, Filtrar) */
.btn-light-primary {
    background: #eff6ff !important;
    border-color: transparent !important;
    color: var(--fs-brand-primary) !important;
}
.btn-light-primary:hover,
.btn-light-primary:focus,
.btn-light-primary:active,
.btn-light-primary.active {
    background: var(--fs-brand-primary) !important;
    color: #fff !important;
}
.btn-active-light-primary.active,
.btn-active-color-primary:hover,
.btn-active-color-primary.active {
    color: var(--fs-brand-primary) !important;
}

/* Dark mode variants */

/* Links y text-primary con marino */
.text-primary,
.text-hover-primary:hover,
a.text-primary,
a:hover {
    color: var(--fs-brand-primary) !important;
}

/*
 * Semantica mantenida (Metronic default):
 * - btn-success (verde):  acciones de confirmacion positiva (Aprobar, Activar, Marcar presentada)
 * - btn-light-success:    mismo en claro (etiquetas status, badges)
 * - btn-light-danger:     acciones destructivas (Eliminar, Cancelar CFDI)
 * - btn-light-warning:    advertencias (Vencida, Recalcular con perdida)
 * - btn-light-info:       informativo (Ver detalle, Modal de ayuda)
 * - btn-light:            secundario neutro (Cancelar, Cerrar modal)
 */

/* ==================== Grid hover: azul clarito sutil ==================== */
.table tbody tr {
    transition: background-color 0.12s ease;
}
.table tbody tr:hover {
    background-color: #eff6ff !important;  /* blue-50 tailwind-like */
    cursor: default;
}
.table-row-dashed tbody tr:hover,
.table-hover tbody tr:hover {
    background-color: #eff6ff !important;
}
.table tbody tr.row-current-period,
.table tbody tr.bg-light-primary {
    background-color: #dbeafe !important;  /* blue-100 */
}
.table tbody tr.row-current-period:hover {
    background-color: #bfdbfe !important;  /* blue-200 */
}
/* Dark: hover sutil con azul transparente */

/* ==================== Dark mode: tonos con contraste legible ==================== */
/* Textos principales: casi blanco */
/* Jerarquia descendente pero siempre legible */
/* Text muted: en dark debe ser mas claro que light */
/* Headings h1-h6 */
/* Card titles */
/* Table text */
/* Form labels */
/* Badges light: en dark mantener legible */
/* Links en dark: que no se pierdan */
/* Inputs placeholder */