/* ========================================
   CosmoFE - Tema Gris Claro
   Base: #efefee
   ======================================== */

:root {
    /* --- Fondos --- */
    --rz-base-background-color: #efefee;
    --rz-base-100: #e8e8e7;
    --rz-base-200: #e0e0df;
    --rz-base-300: #d6d6d5;
    --rz-base-400: #cbcbca;
    --rz-base-500: #bfbfbe;
    --rz-base-600: #b3b3b2;
    --rz-base-700: #a6a6a5;
    --rz-base-800: #999998;
    --rz-base-900: #8c8c8b;

    /* --- Superficies elevadas (cards, dialogs, dropdowns) --- */
    --rz-surface: #f7f7f6;
    --rz-surface-card: #ffffff;

    /* --- Texto --- */
    --rz-text-color: #2d2d2d;
    --rz-text-title-color: #1a1a1a;
    --rz-text-secondary-color: #6b6b6b;
    --rz-text-disabled-color: #a0a0a0;
    --rz-text-contrast-color: #ffffff;

    /* --- Bordes --- */
    --rz-border-color: #d0d0cf;

    /* --- Sombras --- */
    --rz-shadow-1: none;
    --rz-shadow-2: none;
    --rz-shadow-3: none;

    /* --- Inputs / Forms --- */
    --rz-input-background-color: #ffffff;
    --rz-input-border: 1px solid #d0d0cf;
    --rz-input-color: #2d2d2d;
    --rz-input-placeholder-color: #a0a0a0;
    --rz-input-focus-border: 1px solid var(--rz-primary);
    --rz-input-disabled-background-color: #e8e8e7;
    --rz-input-disabled-color: #a0a0a0;
    --rz-input-readonly-background-color: #f0f0ef;

    /* --- DataGrid --- */
    --rz-grid-header-background-color: #e4e4e3;
    --rz-grid-header-color: #3a3a3a;
    --rz-grid-row-background-color: #ffffff;
    --rz-grid-alt-row-background-color: #f7f7f6;
    --rz-grid-row-hover-background-color: #eaeae9;
    --rz-grid-row-selected-background-color: #dce8f5;
    --rz-grid-footer-background-color: #e4e4e3;
    --rz-grid-border: 1px solid #d0d0cf;
    --rz-grid-cell-border: 1px solid #e0e0df;

    /* --- Pager --- */
    --rz-pager-background-color: #f7f7f6;
    --rz-pager-color: #6b6b6b;
    --rz-pager-active-background-color: var(--rz-primary);

    /* --- Card --- */
    --rz-card-background-color: #ffffff;

    /* --- Dialog --- */
    --rz-dialog-background-color: #ffffff;
    --rz-dialog-titlebar-background-color: #f2f2f1;

    /* --- Sidebar / Panel --- */
    --rz-panel-background-color: #f2f2f1;
    --rz-panel-header-background-color: #ebebea;

    /* --- Dropdown / Popup --- */
    --rz-dropdown-background-color: #ffffff;
    --rz-dropdown-item-hover-background-color: #eaeae9;

    /* --- Tooltip --- */
    --rz-tooltip-background-color: #3a3a3a;
    --rz-tooltip-color: #ffffff;

    /* --- Badge --- */
    --rz-badge-background-color: #d6d6d5;

    /* --- Button secondary --- */
    --rz-button-secondary-background-color: #e4e4e3;

    /* --- Scrollbar --- */
    --rz-scrollbar-track: #e8e8e7;
    --rz-scrollbar-thumb: #c0c0bf;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #e8e8e7;
}

::-webkit-scrollbar-thumb {
    background: #c0c0bf;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a7;
}

/* Header */
.rz-header {
    background: linear-gradient(135deg, #1a5fa0 0%, #2881c5 60%, #3d9de0 100%) !important;
    border-bottom: 1px solid #1a5fa0 !important;
}

/* Sidebar */
.sidebar {
    background: linear-gradient(180deg, #1a5fa0 0%, #2881c5 50%, #3d9de0 100%) !important;
    border-right: 1px solid #1a5fa0 !important;
}

/* Forzar fondo en layout */
.rz-layout {
    background-color: #1a5fa0 !important;
}

.rz-body {
    background-color: #efefee !important;
}

.rz-footer {
    background-color: #efefee !important;
    border-top: 1px solid #d0d0cf !important;
}

/* Notificaciones - override color info del humanistic theme (teal → azul app) */
:root {
    --rz-info:          #2881c5;
    --rz-info-light:    #d0e8f7;
    --rz-info-lighter:  #e8f4fc;
    --rz-info-dark:     #1a5fa0;
    --rz-info-darker:   #0f3d6e;
    --rz-on-info:       #ffffff;
}

.rz-notification {
    background-color: #ffffff;
    border: 1px solid #d0d0cf;
}

/* Profile menu popup */
.rz-profile-menu-popup {
    background-color: #ffffff !important;
    border: 1px solid #d0d0cf !important;
}

/* SplitButton popup */
.rz-popup {
    background-color: #ffffff !important;
    border: 1px solid #d0d0cf !important;
}

/* Login page override */
.login-bg {
    background: linear-gradient(135deg, #1a5fa0 0%, #2881c5 50%, #3d9de0 100%) !important;
}