/* ===== Base =====
   (mantengo color primario y ajustes de focus, con leve refinamiento) */

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

a {
    color: #0077cc;
}

.form-control:focus {
    border-color: #0077cc;
    /* sombra más suave (no sólida) para no “ensuciar” el input */
    box-shadow: 0 0 0 0.2rem rgba(0, 119, 204, 0.25);
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn-link.nav-link:focus {
    outline: black auto 1px;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* ===== Contenedores =====
   El autogenerado limitaba .container a 960px. Eso “cortaba” el login.
   Damos más ancho para breath en laptops y dejamos que Bootstrap mande. */

.container {
    /* más ancho que 960px, pero con margen saludable */
    max-width: min(1320px, 96%);
}

/* Si usas container-xxl en Login/_Layout, esto garantiza más aire horizontal */
@media (min-width: 1400px) {
    .container-xxl {
        max-width: 1320px;
    }
}

/* ===== Utilidades layout ===== */

.pricing-header {
    max-width: 700px;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

html {
    position: relative;
    min-height: 100%;
}

/* ===== Footer =====
   Si tu _Layout usa body.d-flex.flex-column.min-vh-100 (recomendado),
   NO uses footer absoluto (rompe en pantallas bajas).
   Dejo footer estándar; si quieres el absoluto, ver comentario al final. */

body {
    margin-bottom: 0;
}

.footer {
    position: static; /* antes: absolute */
    bottom: auto; /* antes: 0 */
    width: 100%;
    overflow: visible; /* antes: scroll */
    white-space: normal; /* antes: nowrap */
    line-height: normal; /* antes: 60px */
    padding: 1rem 0;
}

/* ===== Página de Login: mejoras responsivas ===== */

.auth-hero .auth-logo {
    /* evita que el logo “desborde” y permite que sea fluido */
    max-width: 310px;
    width: 100%;
    height: auto;
}

.auth-card {
    /* tarjeta un poco más ancha pero contenida */
    max-width: 640px;
    margin-inline: auto;
}

/* En notebooks con poca altura, reduce padding vertical del wrapper */
@media (max-height: 768px) {
    .container-xxl.py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* Ajuste fino del separador “o continúa con” en proveedores externos */
.auth-card hr {
    margin: 1.25rem 0;
}

/* ===== Password toggle ===== */

[data-password-toggle] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 0.75rem;
}

.password-toggle-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    pointer-events: none;
}

/* ===== Account management (Identity/Manage) ===== */

.manage-wrapper {
    padding: 3rem 0;
}

@media (max-width: 576px) {
    .manage-wrapper {
        padding: 2rem 0;
    }
}

.manage-card,
.manage-nav-card {
    border: 0;
    box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.08);
    border-radius: 1rem;
}

.manage-card .card-header {
    border-bottom: 0;
    background: transparent;
    padding-bottom: 0;
}

.manage-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.manage-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    background-color: #f5f7fb;
    color: #0f172a;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.manage-nav-link:hover,
.manage-nav-link:focus-visible {
    background-color: #e4e9fb;
    color: #0f172a;
    outline: none;
    transform: translateX(2px);
}

.manage-nav-link.active {
    background: linear-gradient(120deg, #2563eb, #7c3aed);
    color: #fff;
    box-shadow: 0 0.5rem 1.25rem rgba(37, 99, 235, 0.25);
}

.manage-nav-link.active .manage-nav-chevron {
    color: rgba(255, 255, 255, 0.7);
}

.manage-nav-chevron {
    font-size: 1.25rem;
    color: #94a3b8;
    line-height: 1;
}

.manage-section-title {
    font-weight: 600;
    font-size: 1.25rem;
}

.manage-description {
    color: #475569;
    font-size: 0.95rem;
}

.manage-status {
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-weight: 500;
}

.manage-status-success {
    background-color: #ecfdf5;
    color: #047857;
    border: 1px solid #6ee7b7;
}

.manage-status-error {
    background-color: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.manage-muted-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.75rem;
    border-radius: 999px;
    background-color: #e2e8f0;
    font-size: 0.8125rem;
    color: #475569;
}

.validation-summary-valid {
    display: none;
}