/* ================================================================
   BillWare — Puente de temas de terceros (Radzen + SweetAlert2)
   ----------------------------------------------------------------
   Radzen (material-base.css) define su paleta en :root con un primario
   indigo (#4340D2), secundario rosa (#e91e63) y tipografia Roboto. Como
   ese archivo se carga DESPUES de app.css, sus variables ganan y todo lo
   que sea un componente Radzen (botones Primary, dropdowns, checkboxes,
   pager, dialogos, notificaciones, charts) se sale de la identidad de
   marca.

   Este archivo es una unica capa de traduccion: NO redefine estilos ni
   duplica reglas, solo remapea las variables --rz-* a los design tokens
   --bw-* de app.css. Por eso debe enlazarse DESPUES de material-base.css
   en index.html. Cualquier cambio de marca se sigue haciendo en un unico
   lugar: el bloque :root de app.css.
   ================================================================ */

:root {
    /* ---- Tipografia: Inter, igual que el resto de la app ---- */
    --rz-text-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ---- Primario: verde de marca interactivo (AA sobre blanco) ----
       Se usa --bw-primary (#15803d) y no --bw-primary-bright (#22c55e)
       porque Radzen lo pinta como fondo de botones con texto blanco. */
    --rz-primary:          var(--bw-primary);
    --rz-primary-light:    var(--bw-primary-bright);
    --rz-primary-lighter:  rgba(34, 197, 94, 0.14);
    --rz-primary-dark:     var(--bw-primary-hover);
    --rz-primary-darker:   var(--bw-primary-active);
    --rz-on-primary:         #ffffff;
    --rz-on-primary-light:   #ffffff;
    --rz-on-primary-lighter: var(--bw-primary-active);
    --rz-on-primary-dark:    #ffffff;
    --rz-on-primary-darker:  #ffffff;

    /* ---- Secundario: gris pizarra sobrio, no el rosa de Radzen ----
       Las acciones secundarias deben leerse como acciones tranquilas;
       un segundo color saturado competiria con el verde de marca. */
    --rz-secondary:          var(--bw-text-secondary);
    --rz-secondary-light:    #64748b;
    --rz-secondary-lighter:  rgba(71, 85, 105, 0.12);
    --rz-secondary-dark:     #334155;
    --rz-secondary-darker:   #1e293b;
    --rz-on-secondary:         #ffffff;
    --rz-on-secondary-light:   #ffffff;
    --rz-on-secondary-lighter: var(--bw-text);
    --rz-on-secondary-dark:    #ffffff;
    --rz-on-secondary-darker:  #ffffff;

    /* ---- Estados: mismos colores semanticos que los badges --bw-* ---- */
    --rz-info:          var(--bw-info);
    --rz-info-light:    #3b82f6;
    --rz-info-lighter:  rgba(37, 99, 235, 0.14);
    --rz-info-dark:     var(--bw-info-text);
    --rz-info-darker:   #1e40af;
    --rz-on-info-lighter: var(--bw-info-text);

    --rz-success:         var(--bw-success);
    --rz-success-light:   #10b981;
    --rz-success-lighter: rgba(5, 150, 105, 0.14);
    --rz-success-dark:    #047857;
    --rz-success-darker:  var(--bw-success-text);
    --rz-on-success-lighter: var(--bw-success-text);

    --rz-warning:         var(--bw-warning);
    --rz-warning-light:   #f59e0b;
    --rz-warning-lighter: rgba(217, 119, 6, 0.16);
    --rz-warning-dark:    #b45309;
    --rz-warning-darker:  var(--bw-warning-text);
    --rz-on-warning-lighter: var(--bw-warning-text);

    --rz-danger:         var(--bw-danger);
    --rz-danger-light:   #ef4444;
    --rz-danger-lighter: rgba(220, 38, 38, 0.14);
    --rz-danger-dark:    #b91c1c;
    --rz-danger-darker:  var(--bw-danger-text);
    --rz-on-danger-lighter: var(--bw-danger-text);

    /* ---- Neutrales: escala gris con el mismo matiz verdoso frio
            que usan los bordes y superficies de la app ---- */
    --rz-base-50:  var(--bw-surface-subtle);
    --rz-base-100: var(--bw-surface-alt);
    --rz-base-200: var(--bw-border);
    --rz-base-300: var(--bw-border-strong);
    --rz-base-400: #94a3b8;
    --rz-base-500: var(--bw-text-muted);
    --rz-base-600: #64748b;
    --rz-base-700: var(--bw-text-secondary);
    --rz-base-800: #334155;
    --rz-base-900: var(--bw-text);

    /* ---- Series de graficos: verde de marca primero, luego tonos
            complementarios sobrios (no la paleta morada/rosa default) ---- */
    --rz-series-1: #15803d;
    --rz-series-2: #22c55e;
    --rz-series-3: #0e3d2e;
    --rz-series-4: #2563eb;
    --rz-series-5: #d97706;
    --rz-series-6: #0891b2;
    --rz-series-7: #7c3aed;
    --rz-series-8: #64748b;
}

/* ================================================================
   SweetAlert2 (CurrieTechnologies) — usado para confirmaciones y avisos
   en casi todas las paginas. Su tema por defecto trae botones azules y
   tipografia propia. Se sube la especificidad con `body` porque el
   paquete inyecta su hoja en runtime.
   ================================================================ */
body .swal2-popup {
    font-family: var(--rz-text-font-family);
    border-radius: var(--bw-radius);
    color: var(--bw-text);
}

body .swal2-title { color: var(--bw-text); font-weight: var(--bw-font-semibold); }
body .swal2-html-container { color: var(--bw-text-secondary); }

body .swal2-styled.swal2-confirm {
    background: var(--bw-primary);
    color: #fff;
    border-radius: var(--bw-radius);
    box-shadow: none;
}

body .swal2-styled.swal2-confirm:hover { background: var(--bw-primary-hover); }
body .swal2-styled.swal2-confirm:focus { box-shadow: var(--bw-focus-ring); }

body .swal2-styled.swal2-cancel {
    background: var(--bw-surface-alt);
    color: var(--bw-text-secondary);
    border: 1px solid var(--bw-border);
    border-radius: var(--bw-radius);
    box-shadow: none;
}

body .swal2-styled.swal2-cancel:hover { background: var(--bw-border); }

body .swal2-styled.swal2-deny {
    background: var(--bw-danger);
    color: #fff;
    border-radius: var(--bw-radius);
    box-shadow: none;
}

body .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--bw-success); }
body .swal2-icon.swal2-success .swal2-success-ring { border-color: var(--bw-success-bg); }
body .swal2-icon.swal2-error { border-color: var(--bw-danger); color: var(--bw-danger); }
body .swal2-icon.swal2-warning { border-color: var(--bw-warning); color: var(--bw-warning); }
body .swal2-icon.swal2-info,
body .swal2-icon.swal2-question { border-color: var(--bw-info); color: var(--bw-info); }

/* Foco: el anillo de Radzen tambien debe ser verde de marca.
   Se declara aqui (y no en app.css) porque la sombra de foco de los
   inputs Radzen se define en material-base.css con su propio primario. */
.rz-state-focused,
.rz-textbox:focus,
.rz-textarea:focus,
.rz-spinner-input:focus,
.rz-dropdown:not(.rz-state-disabled).rz-state-focused {
    box-shadow: var(--bw-focus-ring) !important;
    border-color: var(--bw-primary) !important;
}