/* =====================================================================
   Sistema de diseño de CIDE
   ---------------------------------------------------------------------
   1. Paletas (data-tema en <html>): solo cambian el color principal
      y los neutros.
   2. Tokens funcionales comunes (--g-*): los usan los componentes.
   3. Correspondencia con Radzen (--rz-*) y Bootstrap (páginas de cuenta).
   Para añadir una paleta: copia un bloque [data-tema], cambia los valores
   y regístrala en GTemas.cs.
   ===================================================================== */

/* ---------- 1. Paletas ---------- */

/* A. Azul petróleo (por defecto) */
:root,
:root[data-tema="petroleo"] {
    --g-primary: #244C60;
    --g-primary-hover: #1B3C4C;
    --g-primary-50: #EAF1F4;
    --g-primary-100: #D5E3E9;
    --g-primary-200: #B5CBD5;
    --g-primary-300: #789BAE;
    --g-neutral-50: #F8F9FA;
    --g-neutral-100: #F0F3F5;
    --g-neutral-200: #DEE3E7;
    --g-neutral-400: #ADB5BD;
    --g-input-required: #F5F9FB;
    --g-sidebar: #1E4153;
}

/* B. Verde salvia */
:root[data-tema="salvia"] {
    --g-primary: #496B60;
    --g-primary-hover: #3A574E;
    --g-primary-50: #EDF3F0;
    --g-primary-100: #DCE9E2;
    --g-primary-200: #C2D7CC;
    --g-primary-300: #91B2A2;
    --g-neutral-50: #F8F9F8;
    --g-neutral-100: #F0F2F0;
    --g-neutral-200: #DEE2DF;
    --g-neutral-400: #ADB7B1;
    --g-input-required: #F6FAF8;
    --g-sidebar: #3D5B51;
}

/* C. Azul pizarra */
:root[data-tema="pizarra"] {
    --g-primary: #526A86;
    --g-primary-hover: #425770;
    --g-primary-50: #EDF1F6;
    --g-primary-100: #DCE4EE;
    --g-primary-200: #C3D0E0;
    --g-primary-300: #98ACC3;
    --g-neutral-50: #F8F9FB;
    --g-neutral-100: #F0F2F5;
    --g-neutral-200: #DFE3E8;
    --g-neutral-400: #ADB5BF;
    --g-input-required: #F6F8FC;
    --g-sidebar: #3F536B;
}

/* ---------- 2. Tokens funcionales ---------- */
:root {
    /* Fondos */
    --g-background: var(--g-neutral-50);
    --g-panel: var(--g-neutral-100);
    --g-surface: #FFFFFF;

    /* Bordes */
    --g-border: var(--g-neutral-200);
    --g-input-border: #CED4DA;

    /* Campos */
    --g-input: #FFFFFF;
    --g-input-disabled: #E9ECEF;
    --g-focus: var(--g-primary);
    --g-focus-halo: color-mix(in srgb, var(--g-primary) 18%, transparent);

    /* Textos */
    --g-text: #343A40;
    --g-text-secondary: #6C757D;
    --g-text-disabled: #ADB5BD;
    --g-on-primary: #FFFFFF;

    /* Estados (iguales en todas las paletas) */
    --g-success: #2E7D5B;
    --g-success-bg: #EAF5EF;
    --g-warning: #B7791F;
    --g-warning-bg: #FFF7E6;
    --g-danger: #C14953;
    --g-danger-bg: #FBECEE;
    --g-info: #36749A;
    --g-info-bg: #EAF3F8;

    /* Forma */
    --g-radius: 4px;
    --g-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

    /* ---------- 3a. Radzen ---------- */
    --rz-text-font-family: var(--g-font);
    --rz-primary: var(--g-primary);
    --rz-primary-light: var(--g-primary-300);
    --rz-primary-lighter: var(--g-primary-50);
    --rz-primary-dark: var(--g-primary-hover);
    --rz-primary-darker: var(--g-primary-hover);
    --rz-on-primary: var(--g-on-primary);
    --rz-on-primary-lighter: var(--g-primary);
    --rz-secondary: var(--g-primary-300);
    --rz-secondary-light: var(--g-primary-200);
    --rz-secondary-lighter: var(--g-primary-50);
    --rz-secondary-dark: var(--g-primary);
    --rz-secondary-darker: var(--g-primary-hover);

    --rz-success: var(--g-success);
    --rz-success-lighter: var(--g-success-bg);
    --rz-warning: var(--g-warning);
    --rz-warning-lighter: var(--g-warning-bg);
    --rz-danger: var(--g-danger);
    --rz-danger-lighter: var(--g-danger-bg);
    --rz-info: var(--g-info);
    --rz-info-lighter: var(--g-info-bg);

    --rz-body-background-color: var(--g-background);
    --rz-base-background-color: var(--g-surface);
    --rz-text-color: var(--g-text);
    --rz-text-title-color: var(--g-text);
    --rz-text-secondary-color: var(--g-text-secondary);
    --rz-text-tertiary-color: var(--g-text-secondary);
    --rz-text-disabled-color: var(--g-text-disabled);
    --rz-border-radius: var(--g-radius);

    --rz-input-background-color: var(--g-input);
    --rz-input-border: 1px solid var(--g-input-border);
    --rz-input-hover-border: 1px solid var(--g-primary-300);
    --rz-input-focus-border: 1px solid var(--g-focus);
    --rz-input-focus-shadow: 0 0 0 1px var(--g-focus), 0 0 0 4px var(--g-focus-halo);
    --rz-input-disabled-background-color: var(--g-input-disabled);
    --rz-input-disabled-color: var(--g-text-secondary);
    --rz-outline-color: var(--g-primary-300);

    --rz-card-background-color: var(--g-panel);
    --rz-card-border: 1px solid var(--g-border);
    --rz-card-shadow: none;

    --rz-grid-header-background-color: var(--g-panel);
    --rz-grid-header-color: var(--g-text);
    --rz-grid-stripe-background-color: var(--g-background);
    --rz-grid-hover-background-color: var(--g-primary-50);
    --rz-grid-selected-background-color: var(--g-primary-100);
    --rz-grid-selected-color: var(--g-text);

    /* ---------- 3b. Bootstrap (páginas de cuenta) ---------- */
    --bs-body-font-family: var(--g-font);
    --bs-body-color: var(--g-text);
    --bs-body-bg: var(--g-background);
    --bs-link-color: var(--g-primary);
    --bs-link-hover-color: var(--g-primary-hover);
    --bs-border-color: var(--g-border);
}

body {
    background-color: var(--g-background);
    background-image: none; /* el tema standard de Radzen añade un fondo decorativo */
    color: var(--g-text);
    font-family: var(--g-font);
}

a {
    color: var(--g-primary);
}

a:hover {
    color: var(--g-primary-hover);
}

h1, h2, h3, h4, h5 {
    color: var(--g-text);
    font-weight: 600;
}

h1 {
    font-size: 1.6rem;
}

/* Bootstrap: botones, campos y menú de las páginas de cuenta */
.btn-primary {
    --bs-btn-bg: var(--g-primary);
    --bs-btn-border-color: var(--g-primary);
    --bs-btn-hover-bg: var(--g-primary-hover);
    --bs-btn-hover-border-color: var(--g-primary-hover);
    --bs-btn-active-bg: var(--g-primary-hover);
    --bs-btn-active-border-color: var(--g-primary-hover);
    --bs-btn-disabled-bg: var(--g-primary-300);
    --bs-btn-disabled-border-color: var(--g-primary-300);
}

.form-control,
.form-select {
    border-color: var(--g-input-border);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--g-focus);
    box-shadow: 0 0 0 1px var(--g-focus), 0 0 0 4px var(--g-focus-halo);
}

.form-check-input:checked {
    background-color: var(--g-primary);
    border-color: var(--g-primary);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--g-primary);
}

.nav-pills .nav-link:not(.active) {
    color: var(--g-primary);
}

.alert-success { color: var(--g-success); background-color: var(--g-success-bg); border-color: var(--g-success-bg); }
.alert-warning { color: var(--g-warning); background-color: var(--g-warning-bg); border-color: var(--g-warning-bg); }
.alert-danger  { color: var(--g-danger);  background-color: var(--g-danger-bg);  border-color: var(--g-danger-bg); }
.alert-info    { color: var(--g-info);    background-color: var(--g-info-bg);    border-color: var(--g-info-bg); }
.text-danger { color: var(--g-danger) !important; }