/* ===========================================================
   Hermes Finanzas - Estilos globales (design system)
   Estructura basada en sitio BLD. Paleta y tipografía según
   el brandbook oficial de BLD (ver :root).

   Solo viven acá los estilos compartidos por varias páginas/
   componentes. Lo específico de un único componente está en su
   archivo .razor.css (CSS isolation).
   =========================================================== */

/* Blazor error boundary / validation (requerido por el framework) */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.validation-message {
    color: var(--danger, #dc3545);
}

:root {
    /* Paleta oficial BLD (brandbook) */
    --azul: #006298;          /* principal  - Pantone 7691 C */
    --celeste: #41B6E6;       /* secundario - Pantone 298 C  */
    --gris-oscuro: #63666A;   /* complementario - Cool Gray 10C */
    --gris-claro: #D0D0CE;    /* complementario - Cool Gray 2C  */

    /* Variantes derivadas del azul (footer y tabs ¿por qué operar?) */
    --azul-oscuro: #004d77;
    --azul-medio: #0a78b5;

    /* Canales RGB para reutilizar la paleta en degradados con transparencia */
    --azul-rgb: 0, 98, 152;
    --azul-oscuro-rgb: 0, 77, 119;

    /* Fondos */
    --bg-main: #EAF4FF;
    --bg-box: #ffffff;
    --bg-gris: #f4f8fd;
    --bg-light: #f8f9fa;

    /* Texto */
    --text: var(--azul);
    --text-main: var(--gris-oscuro);
    --title: var(--azul);
    --title-grey: var(--gris-oscuro);
    --borde: #dee2e6;
    --color-shadow: rgba(18, 38, 63, 0.08);

    /* Pesos de fuente (Montserrat). Brandbook: usar Regular o Bold.
       extrabold/black quedan definidos pero NO deben usarse. */
    --font-light: 300;
    --font-regular: 400;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
}

* {
    box-sizing: border-box;
}

/* FocusOnNavigate enfoca el primer h1 al navegar (ej. "ABRÍ TU CUENTA").
   Ocultamos el recuadro de foco en títulos (no son elementos interactivos). */
h1:focus {
    outline: none;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: var(--font-regular);
    line-height: 1.6;
    color: var(--text-main);
    background-color: var(--bg-main);
}

a {
    color: var(--celeste);
    text-decoration: none;
}

a:hover {
    color: var(--azul);
    text-decoration: underline;
}

/* ===================== LAYOUT GENERAL ===================== */
#contentMain {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#main {
    flex: 1 0 auto;
}

/* offset para el navbar fijo */
.page-content {
    padding-top: 80px;
}

.contenedor {
    width: 100%;
}

/* ===================== BOTONES ===================== */
.btn {
    border-radius: 24px;
    font-weight: var(--font-regular);
    transition: all 0.25s ease;
}

.btn-only-border {
    background: transparent;
    color: var(--azul) !important;
    border: 1px solid var(--azul) !important;
}

.btn-only-border:hover {
    background: var(--azul);
    color: #ffffff !important;
}

.btn-only-border-white {
    background: transparent;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

.btn-only-border-white:hover {
    background: #ffffff;
    color: var(--azul) !important;
}

.btn-celeste {
    background: var(--celeste) !important;
    color: #ffffff !important;
    border: 1px solid var(--celeste) !important;
}

.btn-celeste:hover {
    background: var(--azul) !important;
    border-color: var(--azul) !important;
    color: #ffffff !important;
}

.btn-light-rounded {
    background: #ffffff !important;
    color: var(--azul) !important;
    border: 1px solid #ffffff !important;
}

.btn-light-rounded:hover {
    background: var(--bg-main) !important;
}

.btn-azul {
    background: var(--azul) !important;
    color: #ffffff !important;
    border: 1px solid var(--azul) !important;
}

.btn-azul:hover {
    background: var(--azul-oscuro) !important;
    border-color: var(--azul-oscuro) !important;
}

/* ===================== FONDOS DE SECCIÓN ===================== */
/* Compartido por Footer e InstrumentosOperables. (.bg-azulOscuro vive en Footer) */
.bg-gris {
    background: var(--bg-gris);
}

/* ===================== TÍTULOS DE SECCIÓN ===================== */
.titulo-section-grey {
    font-weight: var(--font-light);
    font-size: 40px;
    color: var(--title-grey);
    line-height: 1.1;
}

.titulo-section-blue {
    font-weight: var(--font-light);
    font-size: 40px;
    color: var(--azul);
    line-height: 1.1;
}

.titulo-section-white {
    font-weight: var(--font-light);
    font-size: 40px;
    color: #ffffff;
    line-height: 1.1;
}

@media (max-width: 768px) {
    .titulo-section-grey,
    .titulo-section-blue,
    .titulo-section-white {
        font-size: 28px;
    }
}

/* ===================== TARJETAS / CARDS ===================== */
.card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 14px var(--color-shadow);
}

/* ===================== ACCORDION ===================== */
/* Design system compartido por Cuentas, FAQs e Instrumentos. El contenedor
   .accordion lo renderiza cada página y los items el componente AccordionItem,
   por eso se mantiene global (con CSS isolation requeriría ::deep). */
.accordion {
    --bs-accordion-border-radius: 12px;
    --bs-accordion-inner-border-radius: 12px;
}

.accordion-item {
    border: 1px solid var(--borde);
    margin-bottom: 8px;
    border-radius: 12px !important;
    overflow: hidden;
}

.accordion-button {
    background-color: #f1f3f6;
    color: var(--azul);
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    background-color: var(--azul);
    color: #ffffff;
    box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}

.accordion-button:focus {
    box-shadow: none;
    border-color: var(--celeste);
}

.accordion-body {
    background-color: var(--bg-box);
    color: var(--text-main);
    font-size: 0.9rem;
}

/* ===================== TABLAS ===================== */
/* Global: el contenido enriquecido (MarkupString) que viene de la DB puede
   incluir tablas, por eso estos estilos no se aíslan. */
.table {
    color: var(--text-main);
    font-size: 0.85rem;
}

.table thead th {
    background-color: var(--azul);
    color: #ffffff;
    font-weight: 600;
    border: none;
}

.table-sm td, .table-sm th {
    padding: 0.4rem 0.5rem;
}

/* ===================== UTILIDADES DE CONTENIDO ===================== */
/* Resaltado para términos de búsqueda dentro de contenido enriquecido (DB). */
.highlight {
    background: #ffe169;
    padding: 0 2px;
    border-radius: 3px;
}