/* ============================================================================
   Tema FacturaSeguraSV — paleta de marca sobre AdminLTE 4 / Bootstrap 5
   ----------------------------------------------------------------------------
   Este archivo SOLO sobrescribe variables CSS y selectores puntuales.
   NUNCA se edita adminlte.min.css. Se carga DESPUÉS de AdminLTE para ganar
   por orden de cascada. Así el tema es desacoplable y AdminLTE actualizable.

   Paleta del diseñador:
     #4bb8a6  verde azulado  -> primary (marca, botones, links, activos)
     #17233c  azul marino    -> dark / sidebar
     #f0f0f5  gris claro     -> light / fondo del body
     #2f2f31  gris oscuro    -> secondary / texto y acentos neutros
   ============================================================================ */

/* Evita el parpadeo de plantillas Vue antes de montar (sustituye al [v-cloak] inline) */
[v-cloak] { display: none !important; }

:root {
    /* Tokens de marca (para usar en CSS propio si se requiere) */
    --fesv-primary:   #4bb8a6;
    --fesv-primary-rgb: 75, 184, 166;
    --fesv-dark:      #17233c;
    --fesv-dark-rgb:  23, 35, 60;
    --fesv-light:     #f0f0f5;
    --fesv-light-rgb: 240, 240, 245;
    --fesv-secondary: #2f2f31;
    --fesv-secondary-rgb: 47, 47, 49;

    /* Variantes derivadas del primary para hover/active */
    --fesv-primary-hover: #3da594;   /* primary un poco más oscuro */
    --fesv-primary-dark:  #34917f;
}

/* ── Bootstrap: color PRIMARY de marca ──────────────────────────────────── */
:root,
[data-bs-theme="light"] {
    --bs-primary: var(--fesv-primary);
    --bs-primary-rgb: var(--fesv-primary-rgb);

    --bs-secondary: var(--fesv-secondary);
    --bs-secondary-rgb: var(--fesv-secondary-rgb);

    /* Enlaces con el color de marca */
    --bs-link-color: var(--fesv-primary-dark);
    --bs-link-color-rgb: var(--fesv-primary-rgb);
    --bs-link-hover-color: var(--fesv-primary-hover);
}

/* Fondo general del body con el gris claro de la paleta */
body.bg-body-tertiary,
:root {
    --bs-tertiary-bg: var(--fesv-light);
}

/* ── Botones primary ────────────────────────────────────────────────────── */
.btn-primary {
    --bs-btn-bg: var(--fesv-primary);
    --bs-btn-border-color: var(--fesv-primary);
    --bs-btn-hover-bg: var(--fesv-primary-hover);
    --bs-btn-hover-border-color: var(--fesv-primary-hover);
    --bs-btn-active-bg: var(--fesv-primary-dark);
    --bs-btn-active-border-color: var(--fesv-primary-dark);
    --bs-btn-disabled-bg: var(--fesv-primary);
    --bs-btn-disabled-border-color: var(--fesv-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--fesv-primary-dark);
    --bs-btn-border-color: var(--fesv-primary);
    --bs-btn-hover-bg: var(--fesv-primary);
    --bs-btn-hover-border-color: var(--fesv-primary);
    --bs-btn-active-bg: var(--fesv-primary);
    --bs-btn-active-border-color: var(--fesv-primary);
}

/* ── Sidebar oscuro con el azul marino de la marca ──────────────────────── */
/* El sidebar usa data-bs-theme="dark" + bg-body-secondary.
   Redefinimos el secondary-bg del tema dark al azul marino. */
.app-sidebar[data-bs-theme="dark"] {
    --bs-secondary-bg: var(--fesv-dark);
    --bs-body-bg: var(--fesv-dark);
    /* AdminLTE: menú activo con el verde de marca sobre el azul */
    --lte-sidebar-menu-active-bg: var(--fesv-primary);
    --lte-sidebar-menu-active-color: #ffffff;
    --lte-sidebar-hover-bg: rgba(var(--fesv-primary-rgb), 0.18);
    --lte-sidebar-hover-color: #ffffff;
    --lte-sidebar-submenu-active-bg: var(--fesv-primary);
    --lte-sidebar-submenu-active-color: #ffffff;
}

/* ── Acentos de marca en componentes comunes ────────────────────────────── */
/* Card outline primary y títulos */
.card-primary.card-outline { border-top-color: var(--fesv-primary); }
.card-primary:not(.card-outline) > .card-header { background-color: var(--fesv-primary); }
.text-primary { color: var(--fesv-primary-dark) !important; }
.bg-primary { background-color: var(--fesv-primary) !important; }

/* Badges y enlaces de paginación con la marca */
.badge.text-bg-primary, .badge.bg-primary { background-color: var(--fesv-primary) !important; }
.page-link { color: var(--fesv-primary-dark); }
.page-item.active .page-link {
    background-color: var(--fesv-primary);
    border-color: var(--fesv-primary);
}

/* Foco de inputs con el color de marca (en vez del azul Bootstrap) */
.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--fesv-primary-rgb), 0.6);
    box-shadow: 0 0 0 0.25rem rgba(var(--fesv-primary-rgb), 0.25);
}
.form-check-input:checked {
    background-color: var(--fesv-primary);
    border-color: var(--fesv-primary);
}

/* ── Pantalla de Registro: tarjetas de plan ─────────────────────────────── */
/* (va aquí y no en un <style> del template porque Vue monta sobre <body id="app">
   e ignora los <style> inline; los <link> CSS no se ven afectados) */
.registro-box { width: 100%; max-width: 920px; }
.plan-card,
.plan-card * { cursor: pointer !important; }
.plan-card {
    border: 2px solid #e5e7eb !important;
    transition: border-color .15s ease, background-color .15s ease;
}
.plan-card:hover { border-color: var(--fesv-primary, #4bb8a6) !important; }
.plan-card.seleccionado {
    border: 2px solid var(--fesv-primary, #4bb8a6) !important;
    background-color: rgba(75, 184, 166, .08) !important;
}
/* Plan ACTUAL del usuario (en gestión de suscripción): marco azul marino de la marca */
.plan-card.actual {
    border: 2px solid var(--fesv-dark, #17233c) !important;
    background-color: rgba(23, 35, 60, .04) !important;
    cursor: default !important;
}
.plan-card.actual * { cursor: default !important; }
.plan-precio { font-size: 1.4rem; font-weight: 700; color: var(--fesv-primary, #4bb8a6); }
.resumen-tabla td { padding: .25rem 0; font-size: .9rem; }