/*
 * File: public/assets/style.css
 * Purpose: Sistema de diseño global. Override de Bootstrap 5.3 con paleta
 *          y tratamientos visuales nivel "enterprise SaaS".
 */

/* ============================================================
 * 1. Tokens (CSS vars) — paleta y tipografía
 * ============================================================ */
:root {
    --bs-primary:        #1f3a8a;
    --bs-primary-rgb:    31, 58, 138;
    --bs-success:        #16a34a;
    --bs-success-rgb:    22, 163, 74;
    --bs-danger:         #dc2626;
    --bs-danger-rgb:     220, 38, 38;
    --bs-warning:        #d97706;
    --bs-warning-rgb:    217, 119, 6;
    --bs-info:           #0284c7;
    --bs-info-rgb:       2, 132, 199;

    --bs-body-bg:        #fafbfc;
    --bs-body-color:     #0f172a;
    --bs-secondary-color: #64748b;
    --bs-tertiary-color: #94a3b8;
    --bs-border-color:   #e5e7eb;

    --bs-body-font-family: 'Inter', system-ui, -apple-system, "Segoe UI",
                           Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size:    0.9375rem;   /* 15px */
    --bs-body-line-height:  1.55;

    --app-radius-sm: 6px;
    --app-radius:    10px;
    --app-radius-lg: 14px;

    --app-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --app-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --app-shadow:    0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --app-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);

    --app-grad-primary: linear-gradient(135deg, #1f3a8a 0%, #1e3478 60%, #142250 100%);
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { background: var(--bs-body-bg); color: var(--bs-body-color); }

::selection { background: rgba(31,58,138,0.15); color: #1a2c66; }

/* ============================================================
 * App shell — sidebar + main
 * ============================================================ */
body.app {
    margin: 0;
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    min-height: 100vh;
}
body.app.no-sidebar {
    grid-template-columns: 1fr;
}

.app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    background: white;
    border-right: 1px solid var(--bs-border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.app-sidebar-header {
    padding: 1rem 1.125rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: #0f172a;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.018em;
}
.app-brand-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--app-grad-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 15px;
    box-shadow: 0 4px 10px rgba(31,58,138,0.22);
}
.app-brand-name { color: #0f172a; }

.app-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.5rem 0.625rem;
    scrollbar-width: thin;
}
.app-nav::-webkit-scrollbar { width: 6px; }
.app-nav::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 3px;
}
.app-nav-section {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bs-tertiary-color);
    padding: 1rem 0.75rem 0.375rem;
}
.app-nav-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--app-radius-sm);
    color: #475569;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.125rem;
    transition: background-color .12s, color .12s;
}
.app-nav-link i {
    font-size: 16px;
    color: #94a3b8;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}
.app-nav-link:hover {
    background: #f1f5f9;
    color: #0f172a;
}
.app-nav-link:hover i { color: var(--bs-primary); }
.app-nav-link.active {
    background: rgba(31,58,138,0.08);
    color: var(--bs-primary);
}
.app-nav-link.active i { color: var(--bs-primary); }

.app-sidebar-footer {
    border-top: 1px solid var(--bs-border-color);
    padding: 0.75rem 0.875rem 1rem;
    background: white;
}
.app-user-card {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    background: #fafbfc;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--app-radius-sm);
    margin-bottom: 0.5rem;
}
.app-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--app-grad-primary);
    color: white;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}
.app-user-meta {
    flex: 1;
    min-width: 0;
}
.app-user-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}
.app-user-role {
    font-size: 0.6875rem;
    color: var(--bs-tertiary-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.25;
}
.app-user-logout {
    color: var(--bs-tertiary-color);
    width: 28px;
    height: 28px;
    border-radius: var(--app-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color .12s, color .12s;
}
.app-user-logout:hover {
    background: #fee2e2;
    color: #dc2626;
}
.app-sidebar-version {
    text-align: center;
    color: var(--bs-tertiary-color);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
}

.app-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.app-content {
    flex: 1;
    padding: 1.75rem 2rem 3rem;
    max-width: 1320px;
    width: 100%;
}

/* Anti-overflow para tablas anchas dentro del main */
.app-content .table-responsive { overflow-x: auto; }
/* Cualquier .card que contenga una .table directa se vuelve scroll-x cuando
   el contenido excede el ancho disponible, sin tener que envolver cada vista
   manualmente con .table-responsive. */
.app-content .card:has(.table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.app-content .card .table { min-width: max-content; }

/* ============================================================
 * 2. Tipografía
 * ============================================================ */
h1, h2, h3, h4, h5 {
    color: #0f172a;
    letter-spacing: -0.018em;
}
h1, .h1 { font-weight: 700; }
h2, .h2 { font-weight: 600; }
h3, .h3 { font-weight: 600; }
h4, .h4 { font-weight: 600; }

.text-muted { color: var(--bs-secondary-color) !important; }
.text-tertiary { color: var(--bs-tertiary-color); }

code, pre, .font-monospace {
    font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace !important;
    font-size: 0.875em;
}
code:not(pre code) {
    background: #f1f5f9;
    color: #0f172a;
    padding: 0.125rem 0.375rem;
    border-radius: var(--app-radius-sm);
    font-size: 0.8125em;
}

/* Eyebrow (label pequeño antes de un título) */
.eyebrow {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bs-primary);
    margin-bottom: 0.5rem;
}

/* ============================================================
 * 3. Navbar
 * ============================================================ */
.navbar {
    background: white !important;
    border-bottom: 1px solid var(--bs-border-color);
    box-shadow: var(--app-shadow-xs);
    padding: 0.625rem 0;
    min-height: 60px;
}
.navbar .navbar-brand {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #0f172a !important;
    letter-spacing: -0.015em;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.25rem 0;
}
.navbar .navbar-brand-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--app-grad-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 15px;
    box-shadow: 0 4px 10px rgba(31,58,138,0.25);
}
.navbar .nav-link {
    color: var(--bs-secondary-color) !important;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.5rem 0.875rem !important;
    border-radius: var(--app-radius-sm);
    transition: background-color .12s, color .12s;
}
.navbar .nav-link:hover {
    color: var(--bs-primary) !important;
    background: rgba(31,58,138,0.06);
}
.navbar .nav-link.active {
    color: var(--bs-primary) !important;
    background: rgba(31,58,138,0.08);
}
.navbar .navbar-user {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.875rem;
    background: #f8fafc;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}
.navbar .navbar-user .avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--app-grad-primary);
    color: white;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}
.navbar .role-pill {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
    background: white;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
}

/* ============================================================
 * 4. Botones
 * ============================================================ */
.btn {
    --bs-btn-padding-x: 0.875rem;
    --bs-btn-padding-y: 0.45rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: var(--app-radius-sm);
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: background-color .12s, border-color .12s, box-shadow .12s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-lg {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-font-size: 0.9375rem;
    --bs-btn-border-radius: var(--app-radius);
}
.btn-sm {
    --bs-btn-padding-x: 0.625rem;
    --bs-btn-padding-y: 0.3125rem;
    --bs-btn-font-size: 0.8125rem;
    --bs-btn-border-radius: var(--app-radius-sm);
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #1e3478;
    --bs-btn-hover-border-color: #1e3478;
    --bs-btn-active-bg: #1a2c66;
    --bs-btn-active-border-color: #1a2c66;
    --bs-btn-disabled-bg: #94a3b8;
    --bs-btn-disabled-border-color: #94a3b8;
    box-shadow: 0 1px 2px rgba(31,58,138,0.20);
}
.btn-primary:hover { box-shadow: 0 4px 10px rgba(31,58,138,0.25); }

.btn-outline-secondary {
    --bs-btn-color: #475569;
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-bg: #f8fafc;
    --bs-btn-hover-border-color: #cbd5e1;
    --bs-btn-hover-color: #0f172a;
    --bs-btn-active-bg: #f1f5f9;
    --bs-btn-active-border-color: #cbd5e1;
    --bs-btn-active-color: #0f172a;
}
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: rgba(31,58,138,0.30);
    --bs-btn-hover-bg: rgba(31,58,138,0.08);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-active-bg: rgba(31,58,138,0.12);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-active-color: var(--bs-primary);
}
.btn-outline-danger {
    --bs-btn-color: #b91c1c;
    --bs-btn-border-color: rgba(220,38,38,0.30);
    --bs-btn-hover-bg: rgba(220,38,38,0.08);
    --bs-btn-hover-border-color: var(--bs-danger);
    --bs-btn-hover-color: #991b1b;
}

/* ============================================================
 * 5. Cards
 * ============================================================ */
.card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-xs);
    background: white;
}
.card-header {
    background: white;
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.875rem 1.125rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.card-header > .badge { font-weight: 500; }
.card-body { padding: 1.25rem; }

/* Stat card (pequeño KPI) */
.stat-card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--app-radius);
    background: white;
    padding: 1.125rem;
    transition: border-color .12s, box-shadow .12s, transform .05s;
}
.stat-card:hover {
    border-color: #cbd5e1;
    box-shadow: var(--app-shadow-sm);
}
.stat-card-label {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.stat-card-label .bi {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: rgba(31,58,138,0.08);
    color: var(--bs-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.stat-card-value {
    font-size: 1.875rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.025em;
    line-height: 1;
    margin-bottom: 0.25rem;
}
.stat-card-cta {
    font-size: 0.8125rem;
    color: var(--bs-primary);
    text-decoration: none;
    font-weight: 500;
}
.stat-card-cta:hover { text-decoration: underline; }

/* Page header (título grande arriba de cada vista) */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    gap: 1rem;
}
.page-header .page-title {
    font-size: 1.625rem;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.025em;
    margin: 0;
}
.page-header .page-description {
    color: var(--bs-secondary-color);
    font-size: 0.9375rem;
    margin: 0.25rem 0 0;
}
.page-header .page-actions {
    display: flex; gap: 0.5rem; flex-shrink: 0;
}

/* ============================================================
 * 6. Tablas
 * ============================================================ */
.table {
    --bs-table-hover-bg: #fafbfc;
    --bs-table-hover-color: #0f172a;
    margin-bottom: 0;
    font-size: 0.875rem;
}
.table > :not(caption) > * > * {
    padding: 0.75rem 1rem;
    border-bottom-color: var(--bs-border-color);
    vertical-align: middle;
}
.table > thead > tr > th {
    background: #fafbfc;
    color: #475569;
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--bs-border-color);
}
.table-hover > tbody > tr {
    transition: background-color .08s;
}
.card .table:first-child > thead:first-child > tr:first-child > th {
    border-top: 0;
}
.card .table:last-child > tbody:last-child > tr:last-child > td {
    border-bottom: 0;
}

/* ============================================================
 * 7. Forms
 * ============================================================ */
.form-label {
    font-weight: 500;
    color: #334155;
    font-size: 0.8125rem;
    margin-bottom: 0.375rem;
    letter-spacing: -0.005em;
}
.form-control, .form-select {
    border: 1.5px solid #e2e8f0;
    border-radius: var(--app-radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    color: #0f172a;
    transition: border-color .12s, box-shadow .12s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(31,58,138,0.10);
}
.form-control::placeholder { color: #94a3b8; }

textarea.form-control.code,
textarea.code {
    font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
    font-size: 13px;
    line-height: 1.5;
}
.form-text { color: var(--bs-tertiary-color); }
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(31,58,138,0.10);
    border-color: var(--bs-primary);
}
.input-group-text {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    color: var(--bs-secondary-color);
}

/* ============================================================
 * 8. Badges / Status pills
 * ============================================================ */
.badge {
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.3em 0.65em;
    border-radius: 999px;
    letter-spacing: -0.005em;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.badge .bi { font-size: 11px; }

.badge.text-bg-light {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0;
}
.badge.text-bg-secondary {
    background: #f1f5f9 !important;
    color: #475569 !important;
}
.badge.text-bg-primary {
    background: rgba(31,58,138,0.10) !important;
    color: var(--bs-primary) !important;
}
.badge.text-bg-info {
    background: rgba(2,132,199,0.10) !important;
    color: #075985 !important;
}
.badge.text-bg-success {
    background: rgba(22,163,74,0.10) !important;
    color: #14532d !important;
}
.badge.text-bg-warning {
    background: rgba(217,119,6,0.10) !important;
    color: #92400e !important;
}
.badge.text-bg-danger {
    background: rgba(220,38,38,0.10) !important;
    color: #991b1b !important;
}

/* ============================================================
 * 9. Alerts
 * ============================================================ */
.alert {
    border-radius: var(--app-radius);
    border: 1px solid;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    display: flex;
    gap: 0.625rem;
}
.alert .btn-close { padding: 0.5rem; }
.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.alert-danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-info    { background: #f0f9ff; border-color: #bae6fd; color: #075985; }

/* ============================================================
 * 10. Empty states
 * ============================================================ */
.empty-state {
    text-align: center;
    padding: 3.5rem 1.5rem;
    color: var(--bs-secondary-color);
}
.empty-state-icon {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: #f1f5f9;
    color: #94a3b8;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px;
    margin-bottom: 1rem;
}
.empty-state h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
}
.empty-state p {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}
/* Compatibilidad con el patrón anterior (.empty-state .bi directo) */
.empty-state > .bi {
    font-size: 2.5rem;
    color: #cbd5e1;
}

/* ============================================================
 * 11. Live log panel (Stage 3 / 4 SSE)
 * ============================================================ */
.live-log {
    background: #0b1220;
    color: #cbd5e1;
    padding: 1rem 1.25rem;
    border-radius: var(--app-radius);
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 12.5px;
    line-height: 1.55;
    max-height: 60vh;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid #1e293b;
}
.sse-indicator {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    margin-right: 0.5rem;
    box-shadow: 0 0 0 0 rgba(148,163,184,0.4);
}
.sse-indicator.connected {
    background: #16a34a;
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%   { box-shadow: 0 0 0 0 rgba(22,163,74,0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
    100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

/* ============================================================
 * 12. Timeline
 * ============================================================ */
.timeline {
    position: relative;
    padding-left: 1.5rem;
    margin: 0;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--bs-border-color);
    border-radius: 1px;
}
.timeline-item {
    position: relative;
    padding: 0 0 1rem 0.5rem;
    font-size: 0.875rem;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 0.4rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    border: 2px solid #cbd5e1;
    z-index: 1;
}
.timeline-item.stage::before     { border-color: var(--bs-primary); background: var(--bs-primary); }
.timeline-item.execution::before { border-color: var(--bs-info);    background: var(--bs-info); }
.timeline-item.test::before      { border-color: var(--bs-warning); background: var(--bs-warning); }
.timeline-item.ai_call::before   { border-color: #8b5cf6;           background: #8b5cf6; }
.timeline-item.manual_api::before{ border-color: var(--bs-success); background: var(--bs-success); }
.timeline-item.prompt_revision::before { border-color: #f97316; background: #f97316; }

.timeline-item time {
    display: block;
    color: var(--bs-tertiary-color);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.125rem;
}

/* ============================================================
 * 13. Modales
 * ============================================================ */
.modal-content {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-lg);
}
.modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.modal-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #0f172a;
}
.modal-body { padding: 1.25rem; }
.modal-footer {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--bs-border-color);
    background: #fafbfc;
    border-bottom-left-radius: var(--app-radius);
    border-bottom-right-radius: var(--app-radius);
}

/* ============================================================
 * 14. Footer global
 * ============================================================ */
footer.app-footer {
    background: white;
    border-top: 1px solid var(--bs-border-color);
    padding: 1rem 0;
    margin-top: 3rem;
    color: var(--bs-tertiary-color);
    font-size: 0.8125rem;
}

/* ============================================================
 * 15. Tabs
 * ============================================================ */
.nav-tabs {
    border-bottom: 1px solid var(--bs-border-color);
}
.nav-tabs .nav-link {
    color: var(--bs-secondary-color);
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0;
}
.nav-tabs .nav-link:hover {
    color: var(--bs-primary);
    border-color: transparent;
}
.nav-tabs .nav-link.active {
    color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);
    background: transparent;
}

/* ============================================================
 * 16. List groups (sidebars)
 * ============================================================ */
.list-group-item {
    padding: 0.625rem 1rem;
    border-color: var(--bs-border-color);
    font-size: 0.875rem;
}
.list-group-item.active {
    background: rgba(31,58,138,0.08);
    color: var(--bs-primary);
    border-color: rgba(31,58,138,0.15);
    font-weight: 500;
}

/* ============================================================
 * 17. Toasts
 * ============================================================ */
.toast {
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-lg);
}
.toast.text-bg-success { background: #16a34a !important; }
.toast.text-bg-danger  { background: #dc2626 !important; }
.toast.text-bg-warning { background: #d97706 !important; color: white !important; }

/* ============================================================
 * 18. Spinners
 * ============================================================ */
.spinner-border, .spinner-border-sm {
    border-width: 0.18em;
}

/* ============================================================
 * 19. Página específicas (overrides puntuales)
 * ============================================================ */

/* Detail pages: header con jerarquía clara */
.detail-header {
    background: white;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--app-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}
.detail-header .detail-eyebrow {
    font-size: 0.75rem;
    color: var(--bs-tertiary-color);
    margin-bottom: 0.25rem;
}
.detail-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #0f172a;
}

/* Pre con buen wrap */
pre.code-block {
    background: #fafbfc;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--app-radius-sm);
    padding: 1rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #1e293b;
    margin: 0;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}