/* ==========================================================================
   SISTEMA DE COMPONENTES CORPORATIVO
   La paleta de variables vive en site.css (fuente única), que este layout ya
   carga antes que este archivo.
   ========================================================================== */
/* ==========================================================================
   2. RESET GENERAL Y CONFIGURACIÓN BASE
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--gris-fondo);
    color: var(--texto-principal);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* ==========================================================================
   3. ARQUITECTURA DEL LAYOUT RESPONSIVO
   ========================================================================== */
.dashboard-container {
    display: flex;
    min-height: 100vh;
    position: relative;
}

.sidebar {
    width: 280px;
    background-color: var(--brand-primary);
    color: var(--blanco-puro);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px 16px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 999;
    transition: var(--transicion-suave);
}

.main-content {
    flex: 1;
    margin-left: 280px;
    display: flex;
    flex-direction: column;
    padding: 40px;
    min-width: 0;
}

/* ==========================================================================
   4. COMPONENTES DEL SIDEBAR
   ========================================================================== */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 24px;
}

.logo-icon {
    width: 36px;
    height: 36px;
    background-color: var(--brand-action);
    color: var(--blanco-puro);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
}

.brand-text {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.92rem;
    transition: var(--transicion-suave);
}

    .menu-item:hover {
        color: var(--blanco-puro);
        background-color: rgba(255, 255, 255, 0.05);
    }

    .menu-item.active {
        color: var(--blanco-puro);
        background-color: var(--brand-action);
    }

.treeview-node {
    display: flex;
    flex-direction: column;
}

.treeview-trigger {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
}

.treeview-arrow {
    margin-left: auto;
    font-size: 0.65rem;
    transition: var(--transicion-suave);
    transform: rotate(0deg);
    opacity: 0.5;
}

.treeview-node.open .treeview-arrow {
    transform: rotate(90deg);
    opacity: 1;
}

.treeview-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    margin: 2px 4px 6px 12px;
}

.treeview-node.open .treeview-submenu {
    max-height: 250px;
}

.submenu-item {
    display: block;
    padding: 10px 16px 10px 24px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 6px;
    transition: var(--transicion-suave);
}

    .submenu-item:hover {
        color: var(--blanco-puro);
        background-color: rgba(255, 255, 255, 0.05);
    }

.sidebar-profile {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 16px;
    margin-top: auto;
}

.profile-container {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: rgba(255, 255, 255, 0.03);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.profile-avatar {
    width: 38px;
    height: 38px;
    background-color: var(--brand-action);
    color: var(--blanco-puro);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-grow: 1;
}

.profile-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blanco-puro);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-role {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
}

.profile-settings-btn {
    text-decoration: none;
    opacity: 0.6;
    transition: var(--transicion-suave);
    font-size: 1.1rem;
}

    .profile-settings-btn:hover {
        opacity: 1;
        transform: rotate(30deg);
    }

/* ==========================================================================
   5. TOP HEADER 
   ========================================================================== */
.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    gap: 24px;
}

.page-title h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--texto-principal);
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}

.header-subtitle {
    font-size: 0.9rem;
    color: var(--texto-secundario);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-primary:not(.btn),
.btn-login,
.btn-forgot,
.btn-reset,
.btn-submit,
.btn-confirm-return,
.ds-btn-brand {
    background-color: var(--brand-action);
    color: var(--blanco-puro);
    padding: 10px 20px;
    border-radius: var(--radio-boton);
    border: none;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transicion-suave);
}

    .btn-primary:not(.btn):hover,
    .btn-login:hover,
    .btn-forgot:hover,
    .btn-reset:hover,
    .btn-submit:hover,
    .btn-confirm-return:hover,
    .ds-btn-brand:hover {
        background-color: var(--brand-action-hover);
    }

/* ==========================================================================
   6. CAMPANA DE NOTIFICACIONES 
   ========================================================================== */
.notification-dropdown {
    position: relative;
    display: inline-block;
}

.notification-bell-btn {
    background: none;
    border: none;
    font-size: 1.35rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    position: relative;
    transition: var(--transicion-suave);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .notification-bell-btn:hover {
        background-color: rgba(0, 0, 0, 0.03);
    }

.notification-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: var(--color-peligro);
    color: var(--blanco-puro);
    font-size: 0.68rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--gris-fondo);
}

.notification-panel {
    position: absolute;
    top: 100%;
    right: 0;
    width: 340px;
    background-color: var(--blanco-puro);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-interactiva);
    margin-top: 12px;
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.notification-dropdown.active .notification-panel {
    display: block;
    animation: slideDown 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--gris-borde);
}

    .panel-header h3 {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--texto-principal);
    }

.mark-read-all {
    font-size: 0.75rem;
    color: var(--brand-action);
    text-decoration: none;
    font-weight: 500;
}

    .mark-read-all:hover {
        text-decoration: underline;
    }

.panel-content {
    max-height: 280px;
    overflow-y: auto;
}

.notification-item {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    border-bottom: 1px solid var(--gris-borde);
    transition: var(--transicion-suave);
    background-color: var(--blanco-puro);
}

    .notification-item:hover {
        background-color: var(--gris-fondo);
    }

    .notification-item.unread {
        background-color: rgba(0, 0, 0, 0.005);
    }

.item-status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
    background-color: var(--gris-borde);
}

.notification-item.danger .item-status-indicator {
    background-color: var(--color-peligro);
}

.notification-item.success .item-status-indicator {
    background-color: var(--color-exito);
}

.notification-item.unread:not(.danger):not(.success) .item-status-indicator {
    background-color: var(--brand-action);
}

.item-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-message {
    font-size: 0.82rem;
    color: var(--texto-principal);
    line-height: 1.4;
}

.notification-item.unread .item-message {
    font-weight: 600;
}

.item-time {
    font-size: 0.72rem;
    color: var(--texto-secundario);
}

.panel-footer {
    padding: 12px;
    text-align: center;
    background-color: var(--gris-fondo);
    border-top: 1px solid var(--gris-borde);
}

    .panel-footer a {
        font-size: 0.8rem;
        color: var(--texto-principal);
        text-decoration: none;
        font-weight: 600;
    }

        .panel-footer a:hover {
            color: var(--brand-action);
        }
/* ==========================================================================
   8. ESTANDARIZACIÓN DE FORMULARIOS CORPORATIVOS
   ========================================================================== */
.form-card,
.ds-card {
    background-color: var(--blanco-puro);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-tarjeta);
    padding: 32px;
    box-shadow: var(--sombra-elegante);
    max-width: 650px; /* Ancho ideal para lectura y llenado de datos */
    margin: 0 auto;
}

/* Formularios extensos (maestro-detalle, varias columnas) necesitan más ancho. */
.form-card-wide {
    max-width: 1100px;
}

/* En las botoneras, "Cancelar/Volver" es un <a>: se alinea con los <button>. */
a.btn-primary,
a.btn-secondary {
    display: inline-block;
    text-decoration: none;
    text-align: center;
}

.form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label,
.ds-form-label,
.crud-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--texto-principal);
}
/* Control de Entrada Estándar (Inputs, Selects, Textareas) */

.form-control,
.form-control-login,
.form-control-forgot,
.form-control-reset,
.ds-form-control,
.crud-input {
    width: 100%;
    font-family: inherit;
    font-size: 0.92rem;
    padding: 12px 14px;
    color: var(--texto-principal);
    background-color: var(--blanco-puro);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-input);
    transition: var(--transicion-suave);
    outline: none;
}

    .form-control::placeholder,
    .form-control-login::placeholder,
    .form-control-forgot::placeholder,
    .form-control-reset::placeholder,
    .ds-form-control::placeholder,
    .crud-input::placeholder {
        color: var(--texto-placeholder);
    }
    /* Estado de Foco Inteligente */

    .form-control:focus,
    .form-control-login:focus,
    .form-control-forgot:focus,
    .form-control-reset:focus,
    .ds-form-control:focus,
    .crud-input:focus {
        border-color: var(--brand-action);
        box-shadow: var(--sombra-input-focus);
    }
/* Variación para filas combinadas (ej. Nombre y Apellido al lado) */

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
/* Integración Estricta con ASP.NET Identity (Validaciones de DataAnnotations) */

.text-danger {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-peligro);
    margin-top: 2px;
}
/* Cuando ASP.NET Core inyecta la clase de error en el input */

.input-validation-error {
    border-color: var(--color-peligro) !important;
    background-color: var(--color-peligro-fondo);
}

    .input-validation-error:focus {
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15) !important;
    }
/* Resumen de Validación Superior (Validation Summary) */

.validation-summary-errors {
    background-color: var(--color-peligro-fondo);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radio-input);
    padding: 14px 16px;
    margin-bottom: 24px;
}

    .validation-summary-errors ul {
        list-style-type: none;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .validation-summary-errors li {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--color-peligro);
    }
/* Estilo para Checkbox Corporativo */

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-top: 4px;
}

.form-check-input {
    width: 16px;
    height: 16px;
    border: 1px solid var(--gris-borde);
    border-radius: 4px;
    cursor: pointer;
    accent-color: var(--brand-action); /* Pinta el check nativo del color corporativo */
}
/* Botonera de formulario */

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
    border-top: 1px solid var(--gris-borde);
    padding-top: 20px;
}

.btn-secondary:not(.btn),
.ds-btn-accent {
    background-color: transparent;
    color: var(--texto-secundario);
    border: 1px solid var(--gris-borde);
    padding: 10px 20px;
    border-radius: var(--radio-boton);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transicion-suave);
}

    .btn-secondary:not(.btn):hover,
    .ds-btn-accent:hover {
        background-color: var(--gris-fondo);
        color: var(--texto-principal);
    }
/* ==========================================================================9. INTERFAZ ADAPTATIVA (Media Queries Responsivas)========================================================================== */

.sidebar-toggle-mobile {
    display: none;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 1001;
    background-color: var(--brand-primary);
    color: var(--blanco-puro);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: var(--sombra-interactiva);
}

@media (max-width: 992px) {
    .sidebar-toggle-mobile {
        display: block;
    }

    .sidebar {
        left: -280px;
    }

        .sidebar.mobile-open {
            left: 0;
        }

    .main-content {
        margin-left: 0;
        padding: 80px 20px 20px 20px;
    }

    .top-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .notification-panel {
        right: auto;
        left: 0;
        width: calc(100vw - 40px);
    }

    .form-card {
        padding: 20px;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ==========================================================================
   10. LISTADOS CORPORATIVOS  (absorbido de IndexStyle.css)
   IndexStyle.css usaba otros nombres de variable (--primary-color, --bg-card...)
   para los mismos colores; aquí se reescribieron al vocabulario de site.css.
   ========================================================================== */
.page-container {
    padding: 1.5rem;
    background-color: var(--fondo-pagina);
    min-height: 100%;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gris-borde);
}

/* Las vistas usan <h1 class="page-title">, no un h1 anidado dentro de .page-title. */
.page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--brand-primary);
    margin: 0;
}

/* Contenedor de grilla / tarjeta elevada */
.grid-container {
    background: var(--blanco-puro);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-elegante);
    overflow-x: auto;
}

.table-corp {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.95rem;
    color: var(--texto-principal);
}

    .table-corp th {
        background-color: var(--gris-fondo);
        color: var(--brand-primary);
        font-weight: 600;
        padding: 1.1rem 1rem;
        border-bottom: 2px solid var(--gris-borde);
        white-space: nowrap;
    }

    .table-corp td {
        padding: 1rem;
        border-bottom: 1px solid var(--gris-borde);
        vertical-align: middle;
    }

    .table-corp tbody tr:hover {
        background-color: #fcfcfc;
        transition: background-color 0.15s ease;
    }

.btn-corp {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.2rem;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: var(--radio-boton);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: var(--transicion-suave);
}

.btn-create {
    background-color: var(--brand-action);
    color: var(--blanco-puro);
}

    .btn-create:hover {
        background-color: var(--brand-action-hover);
        color: var(--blanco-puro);
        box-shadow: var(--sombra-accion);
    }

.action-cells {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radio-boton);
    border: 1px solid var(--gris-borde);
    background-color: var(--blanco-puro);
    cursor: pointer;
    transition: var(--transicion-suave);
    text-decoration: none;
}

.btn-edit {
    color: var(--color-alerta);
}

    .btn-edit:hover {
        background-color: var(--color-alerta);
        color: var(--blanco-puro);
        border-color: var(--color-alerta);
    }

.btn-delete {
    color: var(--color-peligro);
}

    .btn-delete:hover {
        background-color: var(--color-peligro);
        color: var(--blanco-puro);
        border-color: var(--color-peligro);
    }

/* --- Paginación (componente Paginador) --- */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 0.9rem 1.5rem;
    background-color: var(--gris-fondo);
    border-top: 1px solid var(--gris-borde);
    border-bottom-left-radius: var(--radio-tarjeta);
    border-bottom-right-radius: var(--radio-tarjeta);
}

.pagination-info {
    font-size: 0.875rem;
    color: var(--texto-secundario);
}

    .pagination-info b {
        color: var(--texto-principal);
        font-weight: 600;
    }

.pagination-buttons {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.btn-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--texto-principal);
    text-decoration: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--radio-boton);
    transition: var(--transicion-suave);
    cursor: pointer;
}

    .btn-page:hover:not(.disabled):not(.active) {
        background-color: var(--gris-fondo);
        border-color: var(--gris-borde);
        color: var(--brand-primary);
    }

    .btn-page {
        background-color: var(--blanco-puro);
        border-color: var(--gris-borde);
    }

    .btn-page.active {
        background-color: var(--brand-action);
        border-color: var(--brand-action);
        color: var(--blanco-puro);
        font-weight: 600;
        box-shadow: var(--sombra-accion);
    }

    .btn-page.page-nav {
        border: 1px solid var(--gris-borde);
        padding: 0 0.85rem;
        gap: 0.5rem;
        color: var(--brand-primary);
    }

        .btn-page.page-nav:hover:not(.disabled) {
            background-color: var(--gris-fondo);
            border-color: var(--brand-primary);
        }

    .btn-page.disabled {
        color: #cbd5e1;
        border-color: var(--gris-fondo);
        cursor: not-allowed;
        pointer-events: none;
    }

.page-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    color: var(--texto-secundario);
    font-size: 0.875rem;
}

.notification-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: var(--radio-input);
    font-size: 0.9rem;
    background-color: var(--brand-subtle);
    border: 1px solid var(--brand-light);
    color: var(--brand-primary);
}

.notification-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
}

    .notification-close:hover {
        opacity: 1;
    }

/* ==========================================================================
   11. LISTADOS CRUD
   Estas clases se usaban en las vistas pero no existían en ningún CSS.
   ========================================================================== */
.crud-container {
    padding: 1.5rem;
}

.crud-card {
    background: var(--blanco-puro);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-elegante);
    overflow-x: auto;
}

/* Funciona sola o encima de la .table de Bootstrap: define su propia base porque
   varias vistas la usan sin la clase .table (y quedaban sin ancho). */
.crud-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    color: var(--texto-principal);
    font-size: 0.92rem;
    text-align: left;
}

    /* Zebra/hover propio para cuando no viene .table-hover de Bootstrap. */
    .crud-table > tbody > tr {
        transition: background-color 0.12s ease;
    }

        .crud-table > tbody > tr:hover {
            background-color: var(--gris-fondo);
        }

    .crud-table > thead > tr > th {
        background-color: var(--gris-fondo);
        color: var(--brand-primary);
        font-weight: 600;
        padding: 1rem;
        border-bottom: 2px solid var(--gris-borde);
        white-space: nowrap;
    }

    .crud-table > tbody > tr > td {
        padding: 0.9rem 1rem;
        border-bottom: 1px solid var(--gris-borde);
        vertical-align: middle;
    }

/* Identificadores y códigos dentro de las grillas. */
.crud-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    background-color: var(--brand-subtle);
    color: var(--brand-primary);
    border: 1px solid var(--brand-light);
    font-size: 0.8rem;
    font-weight: 600;
}

/* Acción principal de cada listado (ej. "Registrar"). */
.btn-crud-accent {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.2rem;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: var(--radio-boton);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: var(--transicion-suave);
    background-color: var(--brand-action);
    color: var(--blanco-puro);
}

    .btn-crud-accent:hover {
        background-color: var(--brand-action-hover);
        color: var(--blanco-puro);
        box-shadow: var(--sombra-accion);
    }

.xsmall {
    font-size: 0.75rem;
}

/* ==========================================================================
   12. VOCABULARIOS HEREDADOS  (ds-*, crud-*)
   La app acumuló varios nombres para lo mismo. Los que mapean 1:1 al estándar
   se declararon como alias junto al canónico (.ds-form-control junto a
   .form-control, etc.). Aquí van los que no tenían equivalente directo.
   ========================================================================== */

/* Cabeceras de tarjeta (Parametros usa ds-card + su header) */
.ds-card-header-primary,
.ds-card-header-accent,
.crud-header-main,
.crud-header-accent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    margin: -32px -32px 24px -32px; /* se pega a los bordes de .ds-card/.form-card */
    border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0;
    color: var(--blanco-puro);
}

.ds-card-header-primary,
.crud-header-main {
    background-color: var(--brand-primary);
}

.ds-card-header-accent,
.crud-header-accent {
    background-color: var(--brand-action);
}

    .ds-card-header-primary h5,
    .ds-card-header-accent h5,
    .crud-header-main h5,
    .crud-header-accent h5 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--blanco-puro);
    }

/* Acción destructiva dentro de las grillas: discreta en reposo, explícita al pasar
   el cursor. No debe competir visualmente con la acción principal. */
.btn-crud-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-peligro);
    background-color: transparent;
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-boton);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transicion-suave);
}

    .btn-crud-danger:hover {
        background-color: var(--color-peligro);
        border-color: var(--color-peligro);
        color: var(--blanco-puro);
    }

/* Acción secundaria dentro de las grillas (ej. "Editar") */
.btn-crud-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--brand-action);
    background-color: transparent;
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-boton);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transicion-suave);
}

    .btn-crud-primary:hover {
        background-color: var(--brand-action);
        border-color: var(--brand-action);
        color: var(--blanco-puro);
    }

/* --- Paginador: envoltorio y lista --- */
.pagination-nav {
    display: flex;
    align-items: center;
}

.custom-pagination {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   13. UTILIDADES MENORES
   ========================================================================== */
.text-xs {
    font-size: 0.75rem;
}

.font-weight-bold {
    font-weight: 700;
}

/* Bootstrap 3 lo usaba para etiquetas de formulario. */
.control-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--texto-principal);
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
}

.menu-text {
    flex: 1;
}

.notification-text {
    font-size: 0.85rem;
    color: var(--texto-secundario);
}

.content-body {
    flex: 1;
    min-width: 0;
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Contenedor de las pantallas de inicio del panel. */
.dashboard-home {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Indicador de carga de datos (Ubicaciones carga en cascada). */
.dataset-loader {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--texto-secundario);
    padding: 8px 0;
}

/* Aviso de sincronización (ej. permisos de roles). */
.sync-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: var(--radio-input);
    background-color: var(--brand-subtle);
    border: 1px solid var(--gris-borde);
    color: var(--brand-primary);
    font-size: 0.88rem;
}

/* ==========================================================================
   14. TEMA CORPORATIVO SOBRE BOOTSTRAP
   --------------------------------------------------------------------------
   Bootstrap aporta la estructura (grid, utilidades, comportamiento) pero no su
   apariencia: aquí se reemplaza por completo su capa visual.

   Bootstrap 5.3 expone variables por componente (--bs-btn-*, --bs-table-*...),
   así que se re-tematiza desde su propio sistema en lugar de pelear con
   overrides !important. Resultado: los estados (hover, active, disabled, focus)
   se derivan solos y quedan consistentes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   14.1 Tokens globales de Bootstrap -> paleta corporativa (site.css)
   -------------------------------------------------------------------------- */
:root {
    /* Tipografía */
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
    --bs-body-font-size: 0.92rem;
    --bs-body-font-weight: 400;
    --bs-body-color: var(--texto-principal);
    --bs-body-bg: var(--gris-fondo);
    --bs-secondary-color: var(--texto-secundario);
    /* Marca */
    --bs-primary: var(--brand-action);
    --bs-primary-rgb: 73, 113, 177;
    --bs-link-color: var(--brand-action);
    --bs-link-hover-color: var(--brand-action-hover);
    /* Superficies */
    --bs-border-color: var(--gris-borde);
    --bs-border-radius: var(--radio-boton);
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: var(--radio-tarjeta);
    /* Semánticos */
    --bs-success: var(--color-exito);
    --bs-warning: var(--color-alerta);
    --bs-danger: var(--color-peligro);
    --bs-danger-rgb: 239, 68, 68;
}

/* Anillo de foco de marca, no el azul por defecto de Bootstrap. */
.btn:focus-visible,
.form-select:focus,
.form-check-input:focus {
    outline: none;
    border-color: var(--brand-action);
    box-shadow: var(--sombra-input-focus);
}

/* --------------------------------------------------------------------------
   14.2 Botones
   Planos, con elevación sutil solo al pasar el cursor. Sin gradientes.
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-padding-y: 0.55rem;
    --bs-btn-font-size: 0.88rem;
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--radio-boton);
    --bs-btn-focus-shadow-rgb: 73, 113, 177;
    letter-spacing: 0.01em;
    transition: var(--transicion-suave);
}

.btn-sm {
    --bs-btn-padding-x: 0.7rem;
    --bs-btn-padding-y: 0.32rem;
    --bs-btn-font-size: 0.8rem;
    --bs-btn-border-radius: 6px;
}

/* Acción principal */
.btn-primary {
    --bs-btn-color: var(--blanco-puro);
    --bs-btn-bg: var(--brand-action);
    --bs-btn-border-color: var(--brand-action);
    --bs-btn-hover-color: var(--blanco-puro);
    --bs-btn-hover-bg: var(--brand-action-hover);
    --bs-btn-hover-border-color: var(--brand-action-hover);
    --bs-btn-active-bg: var(--brand-action-hover);
    --bs-btn-active-border-color: var(--brand-action-hover);
    --bs-btn-disabled-bg: #A6BBD8;
    --bs-btn-disabled-border-color: #A6BBD8;
}

    .btn-primary:hover {
        box-shadow: var(--sombra-accion);
        transform: translateY(-1px);
    }

/* Acción secundaria: contorno fino, se rellena al pasar el cursor. */
.btn-secondary,
.btn-outline-secondary {
    --bs-btn-color: var(--texto-secundario);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--gris-borde);
    --bs-btn-hover-color: var(--texto-principal);
    --bs-btn-hover-bg: var(--gris-fondo);
    --bs-btn-hover-border-color: var(--gris-borde-focus);
    --bs-btn-active-bg: var(--gris-fondo);
    --bs-btn-active-color: var(--texto-principal);
    --bs-btn-active-border-color: var(--gris-borde-focus);
}

/* Acción destructiva: discreta en reposo, explícita al confirmar. */
.btn-outline-danger,
.btn-danger {
    --bs-btn-color: var(--color-peligro);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--gris-borde);
    --bs-btn-hover-color: var(--blanco-puro);
    --bs-btn-hover-bg: var(--color-peligro);
    --bs-btn-hover-border-color: var(--color-peligro);
    --bs-btn-active-bg: var(--color-peligro-hover);
    --bs-btn-active-border-color: var(--color-peligro-hover);
    --bs-btn-active-color: var(--blanco-puro);
}

.btn-close {
    --bs-btn-close-focus-shadow: var(--sombra-input-focus);
    opacity: 0.4;
}

    .btn-close:hover {
        opacity: 0.9;
    }

/* --------------------------------------------------------------------------
   14.3 Tablas
   Sin bordes de caja: solo hairlines. Encabezado en micro-mayúsculas.
   -------------------------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--texto-principal);
    --bs-table-border-color: var(--gris-borde);
    --bs-table-hover-bg: var(--gris-fondo);
    --bs-table-hover-color: var(--texto-principal);
    margin-bottom: 0;
    font-size: 0.88rem;
    vertical-align: middle;
}

    .table > thead > tr > th {
        padding: 0.85rem 1rem;
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--texto-secundario);
        background-color: var(--gris-fondo);
        border-bottom: 1px solid var(--gris-borde);
        white-space: nowrap;
    }

    .table > tbody > tr > td {
        padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--gris-borde);
    }

    /* La última fila no necesita separador: el borde de la tarjeta la cierra. */
    .table > tbody > tr:last-child > td {
        border-bottom: 0;
    }

.table-hover > tbody > tr {
    transition: background-color 0.12s ease;
}

/* --------------------------------------------------------------------------
   14.4 Badges
   Píldoras suaves con fondo teñido, no bloques de color saturado.
   -------------------------------------------------------------------------- */
.badge {
    --bs-badge-padding-x: 0.6em;
    --bs-badge-padding-y: 0.4em;
    --bs-badge-font-size: 0.72rem;
    --bs-badge-font-weight: 600;
    --bs-badge-border-radius: 999px;
    letter-spacing: 0.02em;
}

/* Combinación bg-light + text-dark que usan las grillas. */
.badge.bg-light {
    background-color: var(--gris-fondo) !important;
    color: var(--texto-secundario) !important;
    border: 1px solid var(--gris-borde);
}

/* --------------------------------------------------------------------------
   14.5 Alertas
   Barra de acento a la izquierda y fondo teñido suave.
   -------------------------------------------------------------------------- */
.alert {
    --bs-alert-border-radius: var(--radio-input);
    border: 1px solid var(--gris-borde);
    border-left: 3px solid var(--texto-secundario);
    padding: 0.9rem 1.1rem;
    font-size: 0.88rem;
    color: var(--texto-principal);
    background-color: var(--blanco-puro);
    box-shadow: var(--sombra-elegante);
}

.alert-success {
    border-left-color: var(--color-exito);
    background-color: #f0fdf9;
}

.alert-danger {
    border-left-color: var(--color-peligro);
    background-color: var(--color-peligro-fondo);
}

.alert-warning {
    border-left-color: var(--color-alerta);
    background-color: #fffbeb;
}

.alert-info {
    border-left-color: var(--brand-action);
    background-color: var(--brand-subtle);
}

/* --------------------------------------------------------------------------
   14.6 Tarjetas
   -------------------------------------------------------------------------- */
.card {
    --bs-card-bg: var(--blanco-puro);
    --bs-card-border-color: var(--gris-borde);
    --bs-card-border-radius: var(--radio-tarjeta);
    --bs-card-spacer-x: 1.5rem;
    --bs-card-spacer-y: 1.25rem;
    box-shadow: var(--sombra-elegante);
}

/* --------------------------------------------------------------------------
   14.7 Navegación por pestañas (nav-pills)
   -------------------------------------------------------------------------- */
.nav-pills {
    --bs-nav-pills-border-radius: var(--radio-boton);
    --bs-nav-pills-link-active-bg: var(--brand-primary);
    --bs-nav-pills-link-active-color: var(--blanco-puro);
    --bs-nav-link-color: var(--texto-secundario);
    --bs-nav-link-hover-color: var(--brand-primary);
    --bs-nav-link-font-size: 0.85rem;
    --bs-nav-link-padding-y: 0.45rem;
    --bs-nav-link-padding-x: 0.95rem;
    gap: 4px;
    font-weight: 500;
}

    .nav-pills .nav-link {
        border: 1px solid transparent;
        transition: var(--transicion-suave);
    }

        .nav-pills .nav-link:not(.active):hover {
            background-color: var(--gris-fondo);
            border-color: var(--gris-borde);
        }

/* --------------------------------------------------------------------------
   14.8 Selects e inputs pequeños (alineados con .form-control)
   -------------------------------------------------------------------------- */
.form-select {
    font-size: 0.92rem;
    padding: 12px 14px;
    color: var(--texto-principal);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-input);
    transition: var(--transicion-suave);
}

.form-control-sm,
.form-select-sm {
    font-size: 0.82rem;
    padding: 7px 10px;
    border-radius: 6px;
}

/* --------------------------------------------------------------------------
   14.9 Utilidades de texto alineadas a la marca
   -------------------------------------------------------------------------- */
.text-muted {
    color: var(--texto-secundario) !important;
}

.text-danger {
    color: var(--color-peligro) !important;
}

/* Los mensajes de validación deben leerse como ayuda, no como alarma. */
.text-danger.field-validation-error,
span.text-danger {
    font-size: 0.78rem;
    font-weight: 500;
}

/* ==========================================================================
   15. FLUJO DE IDENTITY (login, recuperación, confirmaciones, registro)
   --------------------------------------------------------------------------
   Cada pantalla había inventado su propio vocabulario para el mismo componente
   (form-control-login / -forgot / -reset son todos un input; btn-login /
   -forgot / -reset son todos el botón de envío). Se unifican como alias.
   ========================================================================== */

/* Fondo de marca del layout de Identity. */
.identity-body {
    background: linear-gradient(135deg, var(--brand-primary-hover) 0%, var(--brand-primary) 55%, var(--brand-action-hover) 100%);
    min-height: 100vh;
}

.identity-badge {
    background-color: var(--brand-subtle);
    color: var(--brand-action);
}

.identity-brand {
    color: var(--brand-primary);
    letter-spacing: -0.5px;
}

/* --- Contenedores de página --- */
.login-page,
.forgot-page,
.reset-page,
.confirm-page,
.auth-form-container {
    width: 100%;
}

/* El layout ya aporta la tarjeta (.card); estos son envoltorios internos. */
.login-card,
.forgot-card,
.reset-card,
.confirm-card,
.auth-form-box {
    width: 100%;
}

/* --- Encabezados --- */
.login-header,
.forgot-header,
.reset-header {
    text-align: center;
}

    .login-header img,
    .confirm-logo {
        max-width: 160px;
        height: auto;
        margin-bottom: 16px;
    }

    .login-header h2,
    .forgot-header h2,
    .reset-header h2 {
        font-size: 1.35rem;
        font-weight: 700;
        color: var(--brand-primary);
        letter-spacing: -0.3px;
        margin-bottom: 4px;
    }

    .login-header hr {
        border: 0;
        border-top: 1px solid var(--gris-borde);
        margin: 20px 0;
        opacity: 1;
    }

/* Los formularios de Identity se alinean a la izquierda aunque el header centre. */
.login-header form {
    text-align: left;
}

.auth-subtitle,
.forgot-instructions {
    font-size: 0.88rem;
    color: var(--texto-secundario);
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* --- Opciones bajo el formulario (recordarme / olvidé contraseña) --- */
.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.85rem;
    margin-top: 4px;
}

    .login-options label {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--texto-secundario);
        cursor: pointer;
        margin: 0;
    }

    .login-options input[type="checkbox"] {
        width: 15px;
        height: 15px;
        accent-color: var(--brand-action);
        cursor: pointer;
    }

    .login-options a,
    .auth-redirect a,
    .forgot-footer a {
        color: var(--brand-action);
        text-decoration: none;
        font-weight: 500;
    }

        .login-options a:hover,
        .auth-redirect a:hover,
        .forgot-footer a:hover {
            color: var(--brand-action-hover);
            text-decoration: underline;
        }

.auth-redirect,
.forgot-footer {
    text-align: center;
    font-size: 0.85rem;
    color: var(--texto-secundario);
    margin-top: 20px;
}

/* --- Requisitos de contraseña --- */
.password-requirements {
    background-color: var(--gris-fondo);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-input);
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 0.8rem;
    color: var(--texto-secundario);
}

    .password-requirements ul {
        margin: 6px 0 0 0;
        padding-left: 18px;
    }

    .password-requirements li {
        margin-bottom: 2px;
    }

.text-danger-reset {
    color: var(--color-peligro);
    font-size: 0.78rem;
    font-weight: 500;
}

/* --- Confirmaciones (correo enviado / contraseña restablecida) --- */
.confirm-page {
    text-align: center;
}

.confirm-icon-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--brand-subtle);
    color: var(--color-exito);
    font-size: 1.6rem;
    margin-bottom: 16px;
}

/* Los botones de Identity ocupan todo el ancho de la tarjeta. */
.btn-login,
.btn-forgot,
.btn-reset,
.btn-submit {
    width: 100%;
    padding: 12px 24px;
    font-weight: 600;
}

/* ==========================================================================
   16. SITIO PÚBLICO (landing, navbar y footer)
   ========================================================================== */
.public-layout {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* --- Barra de navegación --- */
.publi-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 40px;
    background-color: var(--blanco-puro);
    border-bottom: 1px solid var(--gris-borde);
    box-shadow: var(--sombra-elegante);
}

    .publi-navbar .navbar-brand img {
        height: 42px;
        width: auto;
        display: block;
    }

.navbar-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-link-standard {
    display: inline-block;
    padding: 8px 14px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--texto-secundario);
    text-decoration: none;
    border-radius: var(--radio-boton);
    transition: var(--transicion-suave);
}

    .nav-link-standard:hover {
        color: var(--brand-primary);
        background-color: var(--gris-fondo);
    }

.btn-nav {
    display: inline-block;
    padding: 8px 18px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radio-boton);
    transition: var(--transicion-suave);
}

.btn-nav-login {
    background-color: var(--brand-action);
    color: var(--blanco-puro);
}

    .btn-nav-login:hover {
        background-color: var(--brand-action-hover);
        color: var(--blanco-puro);
        box-shadow: var(--sombra-accion);
    }

/* --- Hero ---
   El degradado de marca ocupa el alto útil descontando navbar y footer. */
.home-hero-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 71px - 56px);
    padding: 64px 24px;
    background: linear-gradient(135deg, var(--brand-primary-hover) 0%, var(--brand-primary) 55%, var(--brand-action-hover) 100%);
    position: relative;
    overflow: hidden;
}

    /* Halo sutil detrás del contenido: da profundidad sin ruido. */
    .home-hero-container::after {
        content: '';
        position: absolute;
        width: 780px;
        height: 780px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(116, 168, 218, 0.18) 0%, rgba(116, 168, 218, 0) 68%);
        pointer-events: none;
    }

.home-hero-content {
    position: relative;
    z-index: 1;
    max-width: 720px;
    text-align: center;
}

.home-logo-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 28px;
    margin-bottom: 32px;
    background-color: var(--blanco-puro);
    border-radius: var(--radio-tarjeta);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.35);
}

    .home-logo-wrapper img {
        height: 54px;
        width: auto;
        display: block;
    }

.home-title {
    font-size: clamp(2rem, 5vw, 3.1rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -1px;
    color: var(--blanco-puro);
    margin-bottom: 18px;
}

.home-slogan {
    font-size: 1.06rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--brand-light);
    margin-bottom: 40px;
}

.home-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-home-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 38px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--brand-primary);
    background-color: var(--blanco-puro);
    border-radius: var(--radio-boton);
    text-decoration: none;
    transition: var(--transicion-suave);
    box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.45);
}

    .btn-home-cta:hover {
        color: var(--brand-primary);
        transform: translateY(-2px);
        box-shadow: 0 16px 34px -8px rgba(0, 0, 0, 0.5);
    }

/* --- Footer --- */
.publi-footer {
    padding: 18px 40px;
    background-color: var(--brand-primary);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

    .publi-footer p {
        margin: 0;
        font-size: 0.82rem;
        color: rgba(255, 255, 255, 0.6);
    }

/* --- Responsive --- */
@media (max-width: 768px) {
    .publi-navbar {
        padding: 12px 20px;
    }

        .publi-navbar .navbar-brand img {
            height: 34px;
        }

    .home-hero-container {
        padding: 48px 20px;
    }

    .home-logo-wrapper {
        padding: 16px 20px;
        margin-bottom: 24px;
    }

        .home-logo-wrapper img {
            height: 42px;
        }
}

/* ============================================================================
   Acordeón (nativo <details>/<summary>, sin dependencia de JS)
   Para formularios largos como Presupuesto/APU: cada bloque se puede plegar.
   ========================================================================== */
.acordeon {
    border: 1px solid var(--gris-borde);
    border-radius: 10px;
    margin-bottom: 16px;
    background: #fff;
    overflow: hidden;
}

    .acordeon > summary {
        list-style: none;
        cursor: pointer;
        padding: 14px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        font-weight: 600;
        color: var(--brand-primary);
        background: var(--gris-fondo, #f8f9fa);
        user-select: none;
        transition: background 0.15s ease;
    }

        /* Oculta el triángulo por defecto en todos los navegadores. */
        .acordeon > summary::-webkit-details-marker {
            display: none;
        }

        .acordeon > summary:hover {
            background: var(--brand-subtle, #eef3fb);
        }

        .acordeon > summary .acordeon-titulo {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }

        /* Insignia opcional a la derecha del título (p. ej. el total del bloque). */
        .acordeon > summary .acordeon-meta {
            margin-left: auto;
            font-weight: 700;
            color: var(--brand-action);
            text-transform: none;
            letter-spacing: 0;
            font-size: 0.95rem;
        }

        /* Chevron que rota al abrir. */
        .acordeon > summary::after {
            content: "\F282"; /* bi-chevron-down (Bootstrap Icons) */
            font-family: "bootstrap-icons";
            font-size: 0.85rem;
            color: var(--texto-secundario);
            transition: transform 0.2s ease;
        }

    .acordeon[open] > summary::after {
        transform: rotate(180deg);
    }

    .acordeon[open] > summary {
        border-bottom: 1px solid var(--gris-borde);
    }

    .acordeon .acordeon-cuerpo {
        padding: 18px;
    }

/* ============================================================================
   Tablero (Dashboard): tarjetas KPI, barras, gráfico de dona y actividad.
   Compartido por AdminIndex, CustomerIndex y el partial _Donut.
   ========================================================================== */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 16px; margin-bottom: 28px; }
.kpi-card {
    display: flex; align-items: center; gap: 14px; padding: 18px 20px;
    background: #fff; border: 1px solid var(--gris-borde); border-radius: 12px;
    text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,57,108,.10); }
.kpi-icon { width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.35rem; flex-shrink: 0; }
.kpi-valor { font-size: 1.6rem; font-weight: 700; color: var(--brand-primary); line-height: 1.1; }
.kpi-etiqueta { font-size: .82rem; color: var(--texto-secundario); text-transform: uppercase; letter-spacing: .3px; }
.kpi-destacado {
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(120deg, var(--brand-primary), var(--brand-action));
    color: #fff; border: none; padding: 22px 26px; border-radius: 12px;
}
.kpi-destacado .valor { font-size: 2rem; font-weight: 700; }
.barra-fila { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.barra-fila .etq { width: 150px; font-size: .85rem; color: var(--texto-principal); flex-shrink: 0; }
.barra-track { flex: 1; background: var(--gris-fondo, #f1f4f8); border-radius: 6px; height: 22px; overflow: hidden; }
.barra-rell { height: 100%; border-radius: 6px; background: var(--brand-action); display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; color: #fff; font-size: .75rem; font-weight: 600; min-width: 26px; }
.panel-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.acc-badge { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: .72rem; font-weight: 600; }
.acc-CREATE { background: #e6f4ea; color: #1e7e34; }
.acc-UPDATE { background: #e7f0fb; color: #2c5aa0; }
.acc-DELETE { background: #fdecea; color: #b3261e; }
.donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.donut-svg { width: 170px; height: 170px; flex-shrink: 0; }
.donut-total { font-size: 34px; font-weight: 700; fill: var(--brand-primary); }
.donut-sub { font-size: 12px; fill: var(--texto-secundario); text-transform: uppercase; letter-spacing: .5px; }
.donut-legend { flex: 1; min-width: 180px; }
.leg-fila { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: .88rem; }
.leg-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.leg-etq { color: var(--texto-principal); }
.leg-val { margin-left: auto; font-weight: 600; color: var(--brand-primary); }
@media (max-width: 900px) { .panel-doble { grid-template-columns: 1fr; } }

/* ============================================================================
   Icono universal en el botón "Eliminar" de las grillas CRUD.
   Se hace por CSS para que TODOS los módulos lo hereden sin tocar cada vista.
   (Bootstrap Icons 1.11.2: bi-trash = \f5de)
   ========================================================================== */
.btn-crud-danger::before {
    content: "\f5de";
    font-family: "bootstrap-icons";
    font-weight: normal;
    margin-right: 5px;
    font-size: 0.9em;
    line-height: 1;
    vertical-align: -0.05em;
}