/* ============================================================================================
   Archivo: theme-styles.css
   Propósito: Variables de tema y estilos globales para Radzen y elementos comunes.
   Se aplica a toda la aplicación mediante referencia en index.html.
   ============================================================================================ */

/* Tema por defecto (rose-gold) */
:root {
    --theme-primary: #f7c6c6;
    --theme-secondary: #fdf2f2;
    --theme-bg-start: #fce4e4;
    --theme-bg-end: #f8d7d7;
    --theme-card-bg: #ffffff;
    --theme-card-hover: #fff5f5;
    --theme-text: #5a3d3d;
    --theme-border: #e6c9c9;
    --theme-shadow: rgba(90, 61, 61, 0.1);
}

/* Rose Gold */
.theme-rose-gold {
    --theme-primary: #f7c6c6;
    --theme-secondary: #fdf2f2;
    --theme-bg-start: #fce4e4;
    --theme-bg-end: #f8d7d7;
    --theme-card-bg: #ffffff;
    --theme-card-hover: #fff5f5;
    --theme-text: #5a3d3d;
    --theme-border: #e6c9c9;
    --theme-shadow: rgba(90, 61, 61, 0.1);
}

/* Verde Agua */
.theme-verde-agua {
    --theme-primary: #b2d8d8;
    --theme-secondary: #e6f4f4;
    --theme-bg-start: #d4ecec;
    --theme-bg-end: #c2e0e0;
    --theme-card-bg: #ffffff;
    --theme-card-hover: #f0fafa;
    --theme-text: #2d4a4a;
    --theme-border: #b3d4d4;
    --theme-shadow: rgba(45, 74, 74, 0.1);
}

/* Azul Agua */
.theme-azul-agua {
    --theme-primary: #b0c4de;
    --theme-secondary: #e6edf5;
    --theme-bg-start: #d4dff0;
    --theme-bg-end: #c2d2e8;
    --theme-card-bg: #ffffff;
    --theme-card-hover: #f0f5fc;
    --theme-text: #2a3b4f;
    --theme-border: #b0c4de;
    --theme-shadow: rgba(42, 59, 79, 0.1);
}

/* Oscuro */
.theme-oscuro {
    --theme-primary: #4a4a4a;
    --theme-secondary: #2c2c2c;
    --theme-bg-start: #3a3a3a;
    --theme-bg-end: #2a2a2a;
    --theme-card-bg: #3d3d3d;
    --theme-card-hover: #4a4a4a;
    --theme-text: #ffffff;
    --theme-border: #555555;
    --theme-shadow: rgba(0, 0, 0, 0.5);
}

    /* ---- Estilos para componentes Radzen en tema oscuro ---- */
    .theme-oscuro .rz-data-grid .rz-cell,
    .theme-oscuro .rz-data-grid .rz-data-row td,
    .theme-oscuro .rz-data-grid .rz-row td,
    .theme-oscuro .rz-data-grid .rz-cell .rz-cell-data,
    .theme-oscuro .rz-data-grid .rz-cell .rz-cell-text,
    .theme-oscuro .rz-data-grid .rz-cell .rz-cell-value,
    .theme-oscuro .grid-cell,
    .theme-oscuro .grid-cell-text,
    .theme-oscuro .grid-cell-number,
    .theme-oscuro .contract-grid .rz-data-grid-data td,
    .theme-oscuro .contract-grid .rz-data-grid-data .rz-cell,
    .theme-oscuro .contract-grid .rz-data-grid-data .rz-cell-data,
    .theme-oscuro .contract-grid .rz-data-grid-data span,
    .theme-oscuro .contract-grid .rz-data-grid-data .text-truncate,
    .theme-oscuro .contract-grid .rz-data-grid-data .metric-cell span,
    .theme-oscuro .contract-grid .rz-data-grid-data .metric-cell i {
        color: var(--theme-text) !important;
    }

    .theme-oscuro .text-success,
    .theme-oscuro .text-danger,
    .theme-oscuro .text-success span,
    .theme-oscuro .text-danger span,
    .theme-oscuro .text-success .rz-cell-data,
    .theme-oscuro .text-danger .rz-cell-data,
    .theme-oscuro .text-success .rz-cell-data span,
    .theme-oscuro .text-danger .rz-cell-data span {
        color: var(--theme-text) !important;
    }

    .theme-oscuro .rz-data-grid .rz-data-row:nth-child(even) td,
    .theme-oscuro .grid-scroll-host .contract-grid .rz-data-grid-data .grid-row:nth-child(even) .grid-cell {
        background-color: var(--theme-secondary) !important;
    }

    .theme-oscuro .rz-data-grid .rz-data-row:hover td,
    .theme-oscuro .rz-data-grid .rz-row:hover td,
    .theme-oscuro .grid-scroll-host .contract-grid .rz-data-grid-data .grid-row:hover .grid-cell,
    .theme-oscuro .grid-scroll-host .contract-grid .rz-data-grid-data .grid-row:hover .grid-cell .rz-cell-data,
    .theme-oscuro .grid-scroll-host .contract-grid .rz-data-grid-data .grid-row:hover .grid-cell span,
    .theme-oscuro .grid-scroll-host .contract-grid .rz-data-grid-data .grid-row:hover .grid-cell .text-success,
    .theme-oscuro .grid-scroll-host .contract-grid .rz-data-grid-data .grid-row:hover .grid-cell .text-danger {
        background: var(--theme-card-hover) !important;
        color: var(--theme-text) !important;
        box-shadow: inset 0 0 0 1px var(--theme-border);
    }

    .theme-oscuro .rz-data-grid .rz-frozen-cell,
    .theme-oscuro .grid-cell.rz-frozen-cell {
        background: var(--theme-card-bg) !important;
        color: var(--theme-text) !important;
    }

    .theme-oscuro .rz-data-grid .rz-data-row:nth-child(even) .rz-frozen-cell,
    .theme-oscuro .grid-scroll-host .contract-grid .rz-data-grid-data .grid-row:nth-child(even) .grid-cell.rz-frozen-cell {
        background: var(--theme-secondary) !important;
    }

    .theme-oscuro .rz-data-grid .rz-data-row:hover .rz-frozen-cell,
    .theme-oscuro .grid-scroll-host .contract-grid .rz-data-grid-data .grid-row:hover .grid-cell.rz-frozen-cell {
        background: var(--theme-card-hover) !important;
        color: var(--theme-text) !important;
    }

    .theme-oscuro .rz-data-grid thead th,
    .theme-oscuro .grid-header {
        background: linear-gradient(135deg, var(--theme-bg-start) 0%, var(--theme-bg-end) 100%) !important;
        color: var(--theme-text) !important;
        border-bottom: 2px solid var(--theme-border) !important;
    }

    .theme-oscuro .rz-data-grid tfoot td,
    .theme-oscuro .rz-data-grid .rz-footer,
    .theme-oscuro .rz-pager,
    .theme-oscuro .grid-scroll-host .contract-grid .rz-pager,
    .theme-oscuro .grid-scroll-host .contract-cards .rz-pager {
        background: var(--theme-secondary) !important;
        color: var(--theme-text) !important;
        border-color: var(--theme-border) !important;
    }

        .theme-oscuro .rz-pager-summary,
        .theme-oscuro .rz-pager .rz-pager-summary {
            color: var(--theme-text) !important;
        }

        .theme-oscuro .rz-pager .rz-pager-page.rz-state-active {
            background: var(--theme-primary) !important;
            color: var(--theme-text) !important;
        }

    .theme-oscuro .text-muted {
        color: #ced4da !important;
    }

    .theme-oscuro .badge.bg-light {
        background-color: var(--theme-secondary) !important;
        color: var(--theme-text) !important;
        border-color: var(--theme-border) !important;
    }

    .theme-oscuro .metric-footer {
        color: var(--theme-text) !important;
    }

    .theme-oscuro .metric-cell span,
    .theme-oscuro .metric-cell i {
        color: inherit !important;
    }