/* Configuration Page Styles */
.configuration-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
    min-height: 100vh;
    overflow-x: hidden; /* evita scroll horizontal en resoluciones chicas */
}

.configuration-header {
    background: linear-gradient(135deg, var(--alliance-primary) 0%, var(--alliance-primary-dark) 100%);
    color: var(--alliance-text-light);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.configuration-header .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.configuration-header .header-icon {
    font-size: 2rem; /* reduce icon */
    opacity: 0.9;
}

.configuration-header .header-text {
    text-align: right;
}

.configuration-header .header-text h1 {
    margin: 0;
    font-size: 21px; /* internal page title standard */
    font-weight: 700;
}

.configuration-header .header-text p {
    margin: 0;
    font-size: 1rem; /* subtitle standard */
    opacity: 0.9;
}

.configuration-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Loading and Error States */
.loading-container {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--bs-secondary);
}

.loading-container .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}

/* Syncfusion Tab Component Styling - Based on Official Documentation */
.configuration-tabs {
    margin-bottom: 1.5rem;
    background: var(--color-background-light);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    width: 100%;
    --font-size-medium: 0.72rem;
}

/* Important: Bootstrap sets all anchors to blue by default.
   SfTab renders headers with <a> tags inside the wrap. We need to
   explicitly override those link colors inside our tab container so
   they inherit the corporate palette instead of Bootstrap blue. */
.configuration-tabs .e-tab-header a,
.configuration-tabs .e-tab-header .e-toolbar-item a {
    color: var(--alliance-text-secondary) !important;
    text-decoration: none !important;
}
.configuration-tabs .e-tab-header .e-toolbar-item.e-active a {
    color: var(--alliance-text-light) !important;
}
/* Apply background on active toolbar item too, to catch theme variants */
.configuration-tabs .e-tab-header .e-toolbar-item.e-active {
    background-color: var(--alliance-primary) !important;
    border-color: var(--alliance-primary) !important;
    border-radius: 8px !important;
}
/* Ensure any inner content inherits light color when active */
.configuration-tabs .e-tab-header .e-toolbar-item.e-active .e-tab-wrap *,
.configuration-tabs .e-tab-header .e-toolbar-item.e-active .e-tab-text,
.configuration-tabs .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
    color: var(--alliance-text-light) !important;
}

/* Tab Header Background - Official Syncfusion Selector */
.configuration-tabs .e-tab-header {
    background: var(--color-background-alt) !important;
    border-bottom: none !important;
    padding: 0.35rem !important;
    border-radius: 12px 12px 0 0 !important;
    width: 100%;
    margin: 0 auto !important;
}
/* Remove theme blue accent on headers/links */
.configuration-tabs .e-tab .e-tab-header,
.configuration-tabs .e-tab .e-tab-header .e-toolbar-item,
.configuration-tabs .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    --e-primary: var(--alliance-primary) !important; /* Syncfusion variable in some themes */
}


/* Tab Items Container */
.configuration-tabs .e-tab-header .e-toolbar-items {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.2rem !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
}
/* allow wrapping on small screens only */
@media (max-width: 768px) {
    .configuration-tabs .e-tab-header .e-toolbar-items { flex-wrap: wrap !important; }
}

/* Individual Tab Items */
.configuration-tabs .e-tab-header .e-toolbar-item {
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-right: 0.25rem !important;
    margin-bottom: 0.25rem !important;
    flex: 0 0 auto !important; /* prevent full-width vertical stacking */
    width: auto !important;
}

/* Tab Wrap - Default State (Official Syncfusion Selector) */
.configuration-tabs .e-tab-header .e-toolbar-item .e-tab-wrap {
    color: var(--alliance-text-secondary) !important;
    background: var(--color-background-light) !important;
    border: 1px solid var(--color-border) !important;
    padding: 0.55rem 0.6rem !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 60px !important;
    text-align: center !important;
    border-radius: 8px !important;
    font-size: 0.5rem !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    max-width: 160px !important;
}

/* Tab Hover State (Official Syncfusion Selector) */
.configuration-tabs .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap:hover {
    background: var(--color-background-tertiary) !important;
    color: var(--alliance-text-primary) !important;
    border-color: var(--alliance-primary) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(var(--alliance-primary-rgb), 0.2) !important;
}

/* Stronger overrides to replace default blue with corporate yellow */
.configuration-tabs.e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
.configuration-tabs.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
.configuration-tabs .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
.configuration-tabs .e-tab-header .e-toolbar-item[aria-selected="true"] .e-tab-wrap,
.configuration-tabs .e-tab-header .e-toolbar-item.e-active a,
.configuration-tabs .e-tab-header .e-toolbar-item[aria-selected="true"] a {
    background-color: var(--alliance-primary) !important;
    border-color: var(--alliance-primary) !important;
    color: var(--alliance-text-light) !important;
}
.configuration-tabs.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
.configuration-tabs.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
    color: var(--alliance-text-light) !important;
}
.configuration-tabs .e-tab-header .e-toolbar-item.e-active a,
.configuration-tabs .e-tab-header .e-toolbar-item[aria-selected="true"] a {
    color: var(--alliance-text-light) !important;
}
/* Remove blue focus ring from theme */
.configuration-tabs .e-tab-header .e-toolbar-item .e-tab-wrap:focus {
    outline: none !important;
    box-shadow: var(--shadow-focus) !important;
}
/* Increase tab header font size for readability */
.configuration-tabs .e-tab-header .e-toolbar-item .e-tab-text {
    font-size: 0.7rem !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: 1.4 !important;
    white-space: normal !important;
}

/* Tab Active State - Corporate Yellow (Official Syncfusion Selector) */
.configuration-tabs .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    background: var(--alliance-primary) !important;
    color: var(--alliance-text-light) !important;
    border-color: var(--alliance-primary) !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(var(--alliance-primary-rgb), 0.3) !important;
}
/* Some themes render header content inside an <a>; ensure active gets yellow bg */
.configuration-tabs .e-tab-header .e-toolbar-item.e-active a {
    background: var(--alliance-primary) !important;
    color: var(--alliance-text-light) !important;
    border-color: var(--alliance-primary) !important;
    border-radius: 8px !important;
    display: block !important;
    padding: 0.5rem 0.75rem !important;
}

/* Tab Content Area */
.configuration-tabs .e-content {
    padding: 1.5rem !important;
    background: var(--color-background-light) !important;
    border-radius: 0 0 12px 12px !important;
    min-height: 360px !important;
    width: 100%;
    margin: 0 auto !important;
}

/* Security Questions OTP block improvements */
.mfa-panel .otp-help { font-size: 1rem; line-height: 1.4; }
.alliance-otp-input input { font-size: 1.1rem; padding: 8px 10px; }
.otp-toolbar { gap: 12px; }
.otp-toast { font-size: 0.95rem; padding: 6px 10px; }
.btn-otp-send { border-radius: 9999px; }
.otp-status {
    font-size: 0.9rem;
    color: #0f5132;
}

/* Tiny action buttons for secq */
.btn-mini { 
  --bg: var(--color-background-tertiary);
  background: var(--bg);
  color: var(--alliance-text-primary);
  border: 1px solid var(--color-border);
  padding: 2px 8px; 
  font-size: 0.8rem; 
  border-radius: 6px; 
}
.btn-mini:hover:not([disabled]) {
  background: var(--alliance-primary);
  color: var(--alliance-text-light);
  border-color: var(--alliance-primary);
}

/* Preferences */
.pref-card { border:1px solid var(--color-border); background:#fff; border-radius:12px; padding:16px; max-width:520px; }
.lang-row { display:flex; gap:12px; align-items:center; }
.lang-select { max-width:260px; font-size:1rem; }

/* Legal documents viewer */
.legal-toggle-group {
  display: flex; gap: 12px; margin: 8px 0 16px 0; flex-wrap: wrap;
}
.legal-viewer {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  padding: 0;
  max-height: 72vh;
  min-height: 60vh;
  overflow: auto;
}
.legal-viewer iframe, .legal-viewer .legal-body, .legal-viewer object {
  width: 100%; height: 100%; border: 0;
}

/* Group badge with number */
.group-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background: var(--color-background-tertiary);
  border:1px solid var(--color-border);
  color: var(--alliance-text-primary);
  font-size: 0.8rem; margin-right:8px;
}

/* Force override Fluent2 blue accent and indicators */
.configuration-tabs .e-tab-header .e-toolbar-item .e-tab-text {
    font-size: var(--font-size-medium) !important;
}
.configuration-tabs .e-tab-header .e-indicator, /* active underline/indicator */
.configuration-tabs .e-tab-header .e-ink-bar {
    background-color: var(--alliance-primary) !important;
    border-color: var(--alliance-primary) !important;
}
/* Active and inactive text colors */
.configuration-tabs .e-tab-header .e-toolbar-item .e-tab-text { color: var(--alliance-text-secondary) !important; }
.configuration-tabs .e-tab-header .e-toolbar-item.e-active .e-tab-text { color: var(--alliance-text-light) !important; }

/* Syncfusion active indicator (underline) color override */
.configuration-tabs .e-tab-header .e-indicator {
    background-color: var(--alliance-primary) !important;
}

/* Icon color align with text */
.configuration-tabs .e-tab-header .e-toolbar-item .e-tab-icon { color: inherit !important; }


/* Removed conflicting block: unify styles to target .e-tab-wrap only */

/* Tab Content */
.configuration-sections {
    background: var(--color-background-light);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.section-content {
    padding: 2rem;
    min-height: 400px;
}
/* Personal form layout */
.personal-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
.field-card { background: var(--color-background-light); border:1px solid var(--color-border); border-radius:8px; padding:12px; }
.field-card.span-2 { grid-column: span 2; }
.field-card .form-label { font-weight:600; margin-bottom:6px; display:block; }
.doc-row { display:flex; gap:8px; }
.doc-row .small { max-width: 160px; }
.otp-actions-row { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.otp-input { max-width: 120px; }
.cooldown { color: var(--alliance-text-secondary); }
.status { display:block; margin-top:6px; color: var(--alliance-text-secondary); }
.actions-row { margin-top: 16px; display:flex; gap:10px; }
@media (max-width: 768px) { .personal-grid { grid-template-columns: 1fr; } .field-card.span-2 { grid-column: span 1; } }

/* Credentials */
.credentials-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
.pw-strength { display:flex; align-items:center; gap:8px; margin-top:6px; }
.pw-strength .bar { height:6px; width:120px; background:#e5e7eb; border-radius:3px; position:relative; }
.pw-strength .bar::after { content:""; position:absolute; left:0; top:0; height:100%; width:0%; background:var(--alliance-primary); border-radius:3px; transition:width .3s ease; }
.pw-strength .bar.level-0::after { width:0%; background:#ef4444; }
.pw-strength .bar.level-1::after { width:25%; background:#ef4444; }
.pw-strength .bar.level-2::after { width:50%; background:#f59e0b; }
.pw-strength .bar.level-3::after { width:75%; background:#10b981; }
.pw-strength .bar.level-4::after { width:100%; background:#059669; }
.pw-rules { margin:8px 0 0; padding-left:18px; color: var(--alliance-text-secondary); font-size: 0.9rem; }
.match-status { margin-top:6px; font-size:0.9rem; }
.match-status.ok { color:#059669; }
.match-status.bad { color:#ef4444; }
@media (max-width: 768px) { .credentials-grid { grid-template-columns: 1fr; } }

/* Summary grid */

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 1200px) {
    .summary-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .summary-grid { grid-template-columns: 1fr; }
}

.summary-card {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background-light);
}
.summary-card.wide { grid-column: span 3; }
@media (max-width: 1200px) { .summary-card.wide { grid-column: span 2; } }
@media (max-width: 768px) { .summary-card.wide { grid-column: span 1; } }

.summary-card .card-icon {
    color: var(--alliance-primary);
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
}
.summary-card .card-title { font-weight: 600; color: var(--alliance-text-primary); }
.summary-card .card-value { color: var(--alliance-text-secondary); }
.summary-card .card-action {
    background: var(--alliance-primary);
    color: var(--alliance-text-light);
    border: none;
    border-radius: 6px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.summary-card .card-action[disabled] { opacity: 0.5; cursor: default; }

.section-content h2 {
    color: var(--bs-dark);
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 21px; /* internal section title standard */
}

.section-content .text-muted {
    margin-bottom: 2rem;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .configuration-container {
        padding: 1rem;
    }

    .configuration-header .header-content {
        flex-direction: column;
        text-align: center;
    }

    .configuration-header .header-text {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .configuration-container {
        padding: 0.5rem;
    }

    .configuration-header {
        padding: 1.25rem;
    }
}

/* Coming Soon Placeholder */
.coming-soon {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--bs-secondary);
}

.coming-soon i {
    margin-bottom: 1rem;
    opacity: 0.6;
}

.coming-soon p {
    font-size: 1.1rem;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .configuration-header {
        padding: 1.5rem 0;
        margin-bottom: 1rem;
    }

    .page-title {
        font-size: 2rem;
    }

    .page-subtitle {
        font-size: 1rem;
    }

    .configuration-nav {
        padding: 0.5rem;
        margin-bottom: 1rem;
    }

    .configuration-nav .nav-link {
        padding: 0.5rem;
        font-size: 0.9rem;
        min-height: 50px;
    }

    .configuration-nav .nav-link i {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }

    .section-content {
        padding: 1.5rem;
        min-height: 300px;
    }

    .section-content h2 {
        font-size: 1.5rem;
    }

    .coming-soon {
        padding: 3rem 1rem;
    }
}

@media (max-width: 576px) {
    .configuration-nav .nav-pills {
        flex-direction: column;
        gap: 0.25rem;
    }

    .configuration-nav .nav-link {
        justify-content: flex-start;
        text-align: left;
    }

    .page-title {
        font-size: 1.75rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .page-title i {
        font-size: 2rem;
    }
}

/* Accessibility Enhancements */
.configuration-nav .nav-link:focus {
    outline: 2px solid var(--alliance-yellow);
    outline-offset: 2px;
}

.configuration-nav .nav-link:focus:not(:focus-visible) {
    outline: none;
}

/* Animation for tab transitions */
.tab-pane {
    transition: opacity 0.3s ease-in-out;
}

.tab-pane:not(.show) {
    opacity: 0;
}

.tab-pane.show {
    opacity: 1;
}

/* Custom scrollbar for content areas */
.section-content::-webkit-scrollbar {
    width: 6px;
}

.section-content::-webkit-scrollbar-track {
    background: var(--bs-light);
    border-radius: 3px;
}

.section-content::-webkit-scrollbar-thumb {
    background: var(--bs-secondary);
    border-radius: 3px;
}

.section-content::-webkit-scrollbar-thumb:hover {
    background: var(--alliance-yellow);
}

/* ============================================================
   Settings: responsiveness + palette centralization
   ============================================================ */

/* Header: icon on the right, title/subtitle on the left */
.configuration-header .header-content { flex-direction: row-reverse; }
.configuration-header .header-text { text-align: left; }

/* Bigger, more legible tab buttons (accessibility for older users) */
.configuration-tabs { --font-size-medium: 0.95rem; }
.configuration-tabs .e-tab-header .e-toolbar-item { min-height: 48px !important; }
.configuration-tabs .e-tab-header .e-toolbar-item .e-tab-wrap { padding: 10px 18px !important; }
.configuration-tabs .e-tab-header .e-tab-text { font-size: 0.95rem !important; font-weight: 600 !important; }
.configuration-tabs .e-tab-header .e-tab-icon { font-size: 1.05rem !important; }

/* Centralize brand color: Bootstrap yellow accents -> primary palette */
.configuration-container .btn-warning {
    background-color: var(--alliance-primary) !important;
    border-color: var(--alliance-primary) !important;
    color: #ffffff !important;
}
    .configuration-container .btn-warning:hover,
    .configuration-container .btn-warning:focus {
        background-color: var(--alliance-primary-dark) !important;
        border-color: var(--alliance-primary-dark) !important;
        color: #ffffff !important;
    }
.configuration-container .text-warning { color: var(--alliance-primary) !important; }
.loading-container .spinner-border,
.configuration-container .spinner-border.text-warning { color: var(--alliance-primary) !important; }

/* Loading state: center the brand spinner + text */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/* Authentication: preferred-method options full width (match the section below) */
.mfa-method-options {
    flex-direction: column !important;
    gap: 0.75rem !important;
}
    .mfa-method-options .mfa-method-card {
        width: 100%;
        min-width: 0 !important;
    }
    .mfa-method-options .mfa-method-card.bg-light {
        border-color: var(--alliance-primary) !important;
        background-color: rgba(151, 111, 65, 0.08) !important;
    }

/* Legal documents: toggle buttons take the full form width */
.legal-toggle-group {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
    .legal-toggle-group .btn {
        flex: 1 1 0;
        min-width: 160px;
    }

/* Save / Cancel actions: larger and centered; split half/half on small screens */
.actions-row {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
    .actions-row .btn {
        min-width: 170px;
        padding: 0.6rem 1.75rem;
        font-size: 1rem;
    }

@media (max-width: 576px) {
    .actions-row { gap: 12px; }
        .actions-row .btn {
            flex: 1 1 0;
            min-width: 0;
        }

    /* Legal buttons stack full-width on phones */
    .legal-toggle-group .btn { flex: 1 1 100%; }
}

/* ============================================================
   Tabs: ensure ALL tab headers are reachable on small screens.
   Syncfusion's toolbar uses a horizontal scroll (e-hor-nav) that
   hides overflowing tabs; force real wrapping into multiple rows
   and hide the scroll arrows so every tab stays visible/clickable.
   ============================================================ */
@media (max-width: 992px) {
    .configuration-tabs .e-tab-header,
    .configuration-tabs .e-tab-header .e-toolbar,
    .configuration-tabs .e-tab-header .e-toolbar-items {
        overflow: visible !important;
        white-space: normal !important;
    }

    .configuration-tabs .e-tab-header .e-toolbar-items {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        justify-content: center !important;
    }

    /* Hide Syncfusion's horizontal scroll navigation (arrows / popup) */
    .configuration-tabs .e-tab-header .e-hor-nav,
    .configuration-tabs .e-tab-header .e-scroll-nav,
    .configuration-tabs .e-tab-header .e-scroll-right-nav,
    .configuration-tabs .e-tab-header .e-scroll-left-nav,
    .configuration-tabs .e-tab-header .e-popup-up-icon,
    .configuration-tabs .e-tab-header .e-hscroll-bar {
        display: none !important;
    }

    .configuration-tabs .e-tab-header .e-toolbar-item {
        flex: 0 0 auto !important;
    }
}

/* ============================================================
   Ajustes finales de Settings
   ============================================================ */

/* 1) Header: que el texto y el ícono no queden pegados a los extremos */
.configuration-header { padding: 1.25rem 1.75rem !important; }

/* 3) "Send code" (btn-outline-warning): borde y hover con el color principal, no amarillo */
.configuration-container .btn-outline-warning {
    color: var(--alliance-primary) !important;
    border-color: var(--alliance-primary) !important;
    background-color: transparent !important;
}
    .configuration-container .btn-outline-warning:hover,
    .configuration-container .btn-outline-warning:focus,
    .configuration-container .btn-outline-warning:active {
        color: #ffffff !important;
        background-color: var(--alliance-primary) !important;
        border-color: var(--alliance-primary) !important;
    }

/* 2) Tabs: al envolver en pantallas medianas/pequeñas, que ocupen todo el ancho
   (sin huecos a los lados), repartiéndose el espacio por fila */
@media (max-width: 992px) {
    .configuration-tabs .e-tab-header .e-toolbar-items {
        justify-content: flex-start !important;
    }
    .configuration-tabs .e-tab-header .e-toolbar-item {
        flex: 1 1 140px !important;
        width: auto !important;
        margin: 0.2rem !important;
    }
    .configuration-tabs .e-tab-header .e-toolbar-item .e-tab-wrap {
        justify-content: center !important;
        width: 100% !important;
    }
}

/* 2b) Tabs ocupan todo el ancho también en pantallas grandes (distribución uniforme, ordenada) */
.configuration-tabs .e-tab-header .e-toolbar-item {
    flex: 1 1 auto !important;
    width: auto !important;
}
.configuration-tabs .e-tab-header .e-toolbar-item .e-tab-wrap {
    justify-content: center !important;
    width: 100% !important;
}

/* ============================================================
   Tabs estandarizados: grilla de columnas iguales en todo ancho.
   Sustituye el layout flex anterior (que hacía los botones de
   distinto tamaño según el texto). Todos los botones quedan del
   MISMO tamaño y alineados, adaptando el nº de columnas al ancho.
   ============================================================ */
.configuration-tabs .e-tab-header .e-toolbar-items {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 0.4rem !important;
    width: 100% !important;
    align-items: stretch !important;
}
    .configuration-tabs .e-tab-header .e-toolbar-items .e-toolbar-item {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        flex: initial !important;
        height: 100% !important;
    }
        .configuration-tabs .e-tab-header .e-toolbar-item .e-tab-wrap {
            width: 100% !important;
            height: 100% !important;
            justify-content: center !important;
            text-align: center !important;
        }
/* Ocultar el indicador (barra) de Syncfusion: el activo ya se ve por el fondo */
.configuration-tabs .e-tab-header .e-indicator {
    display: none !important;
}

/* ===== Botones secundarios normalizados (mismo criterio que el "Cancelar" de Security):
   neutro (fondo claro + borde), hover en tono marca. ===== */
.configuration-container .btn-outline-secondary {
    background: var(--color-background-primary);
    color: var(--alliance-text-secondary);
    border: 1px solid var(--alliance-content-border);
    border-radius: 6px;
    font-weight: 600;
}

.configuration-container .btn-outline-secondary:hover {
    background: var(--alliance-content-bg);
    border-color: var(--alliance-primary);
    color: var(--alliance-primary);
}

/* Inline section alert bar (replaces native alert() dialogs) */
.config-alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
}
.config-alert.error {
    background-color: rgba(220, 38, 38, 0.08);
    color: #DC2626;
    border: 1px solid rgba(220, 38, 38, 0.35);
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.12);
}
.config-alert.success {
    background-color: rgba(25, 135, 84, 0.08);
    color: #198754;
    border: 1px solid rgba(25, 135, 84, 0.35);
}
.config-alert i { flex: 0 0 auto; }

/* =========================================================================
   Guia de pasos para datos sensibles (correo / telefono) y estados de OTP.
   Añadido para que el usuario sepa el orden: cambiar -> enviar -> validar ->
   guardar. Antes no habia ninguna indicacion y habia que adivinarlo.
   ========================================================================= */
.config-help-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background-color: rgba(151, 111, 65, 0.07);
    border: 1px solid rgba(151, 111, 65, 0.30);
    border-left: 4px solid var(--alliance-primary, #976F41);
    border-radius: 8px;
    padding: 0.75rem 0.95rem;
    margin-bottom: 1.1rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #4A3A28;
}
.config-help-banner > i {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    color: var(--alliance-primary, #976F41);
}
.config-help-banner strong { display: block; margin-bottom: 0.35rem; }

.config-help-steps {
    margin: 0;
    padding-left: 1.15rem;
}
.config-help-steps li { margin-bottom: 0.15rem; }

/* Pista contextual bajo cada campo sensible. */
.otp-hint {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    line-height: 1.35;
}

/* Bloque de pregunta de seguridad aun sin configurar (cliente migrado). */
.secq-pending {
    color: #B45309;
    font-weight: 600;
    font-size: 0.88rem;
}

/* Card de resumen puramente informativa (p. ej. "Último inicio de sesión").
   No lleva botón de editar, así que se reserva el espacio de la derecha para que
   quede alineada con el resto de la rejilla y no se vea descuadrada. */
.summary-card--readonly {
    padding-right: 2.75rem;
}

/* ============================================================
   Contención del SfTab: la toolbar de Syncfusion nunca debe
   forzar un ancho mayor que su contenedor (evita scroll-x).
   ============================================================ */
.configuration-content,
.configuration-tabs {
    max-width: 100%;
    min-width: 0;
}

    .configuration-tabs .e-tab-header,
    .configuration-tabs .e-tab-header .e-toolbar,
    .configuration-tabs .e-tab-header .e-hscroll,
    .configuration-tabs .e-tab-header .e-toolbar-items {
        max-width: 100% !important;
        min-width: 0 !important;
    }
/* ============================================================
   Datos personales en SOLO LECTURA.
   El cliente consulta sus datos aqui; los cambios se tramitan en
   el portal administrativo previa verificacion por OTP.
   ============================================================ */
.field-readonly {
    padding: 0.55rem 0.75rem;
    background: var(--alliance-content-bg, #f8f9fa);
    border: 1px solid var(--alliance-content-border, #e5e7eb);
    border-radius: 0.5rem;
    font-size: 0.95rem;
    color: var(--alliance-text-primary, #1f2937);
    min-height: 2.6rem;
    display: flex;
    align-items: center;
    word-break: break-word;
}

.field-readonly--small {
    flex: 0 0 auto;
    min-width: 8rem;
}

/* La fila de documento conserva la misma proporcion que tenia con inputs. */
.personal-grid--readonly .doc-row {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}

@media (max-width: 576px) {
    .personal-grid--readonly .doc-row {
        flex-direction: column;
    }

    .field-readonly--small {
        min-width: 0;
    }
}