/* ============================================================
   Healthcare Ecosystem v2 — Componentes (identidad A2 glassmorphic)
   components.css — Override A2 de Bootstrap + componentes propios.
   Tokens: variables.css (A2 aprobada). Regla UX: targets ≥48px, AA.
   ============================================================ */

/* ============ Botones (glow v2.1, 48px mínimo) ============ */
.btn {
    min-height: var(--btn-min-height);
    border-radius: var(--radius-pill);
    font-weight: var(--font-weight-semibold);
    padding: 0.6rem 1.8rem;
    transition: all var(--transition-fast);
}
.btn:focus-visible {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 3px;
}
.btn-lg { min-height: 54px; font-size: var(--font-size-lg); padding: 0.75rem 2.2rem; }
.btn-sm { min-height: var(--btn-min-height); font-size: var(--font-size-sm); padding: 0.4rem 1.2rem; }

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border: none;
    box-shadow: var(--shadow-primary);
    color: var(--color-white);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, var(--color-primary-mid), var(--color-primary));
    box-shadow: var(--shadow-primary-hover);
    transform: translateY(-2px);
    color: var(--color-white);
}

.btn-outline-primary {
    color: var(--color-primary);
    border: 2px solid rgba(0, 119, 182, 0.45);
    background: rgba(255, 255, 255, 0.9);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-primary);
}

/* Botones sobre fondo oscuro (hero) */
.hero-section .btn-outline-primary,
.hero .btn-outline-primary {
    color: var(--color-white);
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: transparent;
}
.hero-section .btn-outline-primary:hover,
.hero .btn-outline-primary:hover {
    background: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-white);
}

/* ============ Cards → glass cards A2 ============ */
.card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
    color: var(--color-gray-900);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--glass-shadow-hover); }
.card-header, .card-footer {
    background: transparent;
    border-color: rgba(49, 120, 166, 0.18);
}

/* Clase glass explícita (prototipo A2) */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
}

/* ============ Formularios (targets amplios AA) ============ */
.form-control, .form-select {
    min-height: 50px;
    border-radius: var(--glass-radius-sm);
    border: 1.5px solid rgba(49, 120, 166, 0.35);
    background: rgba(255, 255, 255, 0.78);
    font-size: var(--font-size-base);
    color: var(--color-gray-900);
    padding: 0.6rem 1rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(49, 120, 166, 0.18);
}
.form-label { font-weight: var(--font-weight-semibold); color: var(--color-gray-800); }
.input-group-text {
    border-radius: var(--glass-radius-sm);
    border-color: rgba(49, 120, 166, 0.35);
    background: rgba(234, 244, 251, 0.9);
    color: var(--color-primary-dark);
}

/* ============ Acordeones (FAQ soporte) ============ */
.accordion-item {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius-sm) !important;
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.accordion-button {
    color: var(--color-gray-900);
    font-weight: var(--font-weight-semibold);
    min-height: var(--target-min);
    background: transparent;
}
.accordion-button:not(.collapsed) {
    background: rgba(49, 120, 166, 0.08);
    color: var(--color-primary-dark);
}
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(49, 120, 166, 0.18); }

/* ============ Hero dramático (v2.1: gradiente como la vieja pero A2) ============ */
.hero,
.hero-section {
    background: linear-gradient(180deg, var(--color-primary-mid) 0%, var(--color-primary) 35%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    min-height: 440px;
    display: flex;
    align-items: center;
    padding: 4.5rem 0 5rem;
}
.hero h1, .hero-section h1 {
    color: var(--color-white);
    font-size: var(--font-size-display);
}
.hero p, .hero-section p { color: rgba(255, 255, 255, 0.88); }
.hero .glass-card {
    background: var(--glass-bg-dark);
    border: 1px solid var(--glass-border-dark);
    backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--shadow-hero-card);
}
.hero .glass-card h2 { color: var(--color-white); }
.hero .glass-card strong { color: var(--color-white); }
.hero .glass-card span { color: rgba(255, 255, 255, 0.75) !important; }
.hero .feature-icon {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-primary-lighter);
}
.hero-kicker {
    display: inline-block;
    padding: 0.35rem 1.1rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.05em;
    margin-bottom: 1.2rem;
    text-transform: uppercase;
}
.hero-lead { color: rgba(255, 255, 255, 0.88) !important; }

/* Stats en el hero (grandes y brillantes como la vieja) */
.stat-value {
    font-size: 2.8rem;
    font-weight: var(--font-weight-extrabold);
    color: var(--color-primary-light);
    text-shadow: 0 2px 10px rgba(0, 119, 182, 0.3);
}
.stat-label { color: rgba(255, 255, 255, 0.75); font-size: var(--font-size-sm); }

/* Sección CTA final (gradiente como la vieja) */
.cta-section {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-white);
    border-radius: var(--glass-radius);
    padding: 4rem 2rem;
    text-align: center;
}
.cta-section h2 { color: var(--color-white); }
.cta-section p { color: rgba(255, 255, 255, 0.85); }

/* Page-hero para páginas interiores (acerca, soluciones, legales) */
.page-hero {
    padding: 3.2rem 0 2.4rem;
    border-radius: 0 0 var(--glass-radius) var(--glass-radius);
    background:
        radial-gradient(700px 380px at 90% -20%, rgba(169, 205, 232, 0.45), transparent 60%),
        rgba(255, 255, 255, 0.35);
}
.page-hero h1 { margin-bottom: 0.6rem; }
.page-hero p { color: var(--color-gray-600); font-size: var(--font-size-lg); }

/* ============ Feature icon (círculos suaves A2) ============ */
.feature-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: rgba(49, 120, 166, 0.13);
    color: var(--color-primary-dark);
    margin-bottom: 0.9rem;
}
.role-icon {
    width: 54px; height: 54px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: rgba(49, 120, 166, 0.13);
    margin-bottom: 0.9rem;
}
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-extrabold);
    box-shadow: 0 6px 16px rgba(49, 120, 166, 0.38);
}

/* ============ Badges y alerts ============ */
.badge { border-radius: var(--radius-pill); padding: 0.4em 0.9em; font-weight: var(--font-weight-semibold); }
.alert {
    border-radius: var(--glass-radius-sm);
    border: 1px solid transparent;
}
.alert-info { background: rgba(49, 120, 166, 0.10); color: var(--color-primary-dark); border-color: rgba(49, 120, 166, 0.25); }

/* ============ Breadcrumbs / nav laterales (legales) ============ */
.list-group-item {
    background: transparent;
    border-color: rgba(49, 120, 166, 0.15);
    color: var(--color-primary-dark);
    min-height: var(--target-min);
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    border-width: 0 0 0 3px;
    border-left-color: transparent;
}
.list-group-item.active, .list-group-item:hover {
    background: rgba(49, 120, 166, 0.10);
    border-left-color: var(--color-primary);
    color: var(--color-primary-dark);
}

/* ============ Links con subrayado claro (AA cognitivo) ============ */
a { text-underline-offset: 3px; }
.public-footer a, .page-hero a, .card a { text-decoration: none; }
.public-footer a:hover, .card a:hover { text-decoration: underline; }

/* ============ Dropdown glass ============ */
.dropdown-menu {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius-sm);
    box-shadow: var(--glass-shadow);
}
.dropdown-item { color: var(--color-gray-800); min-height: var(--target-min); display: flex; align-items: center; }
.dropdown-item:hover { background: rgba(49, 120, 166, 0.10); color: var(--color-primary-dark); }

/* ============ Spinner ============ */
.spinner-hc {
    width: 44px; height: 44px;
    border: 4px solid rgba(49, 120, 166, 0.2);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ============ Stats (grandes y brillantes — v2.1) ============ */
.stat-value {
    font-size: 2.8rem;
    font-weight: var(--font-weight-extrabold);
    color: var(--color-primary);
    text-shadow: 0 2px 10px rgba(0, 119, 182, 0.2);
}
.stat-label { color: var(--color-gray-600); font-size: var(--font-size-sm); }


/* ============ MFA — Number Matching (FE-2) ============ */
.mfa-challenge-number {
    font-size: clamp(3.2rem, 12vw, 5rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-primary-dark);
    background: var(--glass-bg);
    border: 2px dashed var(--color-primary);
    border-radius: var(--glass-radius);
    display: inline-block;
    padding: 0.5rem 2.2rem;
    margin: 0.25rem auto 0.5rem;
    letter-spacing: 0.12em;
}
.mfa-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    max-width: 420px;
    margin: 0.75rem auto 0;
}
.mfa-option {
    min-width: 88px;
    min-height: 60px;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
@media (max-width: 480px) {
    .mfa-option { min-width: calc(33% - 0.6rem); min-height: 56px; font-size: 1.35rem; }
    .mfa-challenge-number { padding: 0.4rem 1.4rem; }
}