@import url('./main-layout.css');
@import url('./views/demo-view.css');
@import url('./views/login.css');

/* CAMBIO respecto al intento anterior: esta vez el import apunta a la ruta LOCAL
   dentro del propio tema ("./line-awesome/...", con ./ adelante), no a una ruta
   "pelada" tipo node_modules. El bloque "assets" de theme.json es el que le dice
   a Vite que copie los archivos reales desde node_modules/line-awesome hacia
   esta ubicación dentro del tema en tiempo de build. Sin ese bloque en
   theme.json, este import fallaría exactamente igual que la vez pasada. */
@import url('./line-awesome/dist/line-awesome/css/line-awesome.min.css');
:host, html {
    --vaadin-app-layout-drawer-offset-size: 300px; /* Cambia 300px por el ancho que desees */
}
html {
    --lumo-font-size: 1rem;
    --lumo-font-size-xxxl: 1.375rem;
    --lumo-font-size-xxl: 1.125rem;
    --lumo-font-size-xl: 1rem;
    --lumo-font-size-l: 0.875rem;
    --lumo-font-size-m: 0.75rem;
    --lumo-font-size-s: 0.6875rem;
    --lumo-font-size-xs: 0.625rem;
    --lumo-font-size-xxs: 0.625rem;
    --lumo-border-radius: 0.125em;
    --lumo-size-xl: 2.5rem;
    --lumo-size-l: 2rem;
    --lumo-size-m: 1.75rem;
    --lumo-size-s: 1.5rem;
    --lumo-size-xs: 1.25rem;
    --lumo-space-xl: 1.75rem;
    --lumo-space-l: 1.125rem;
    --lumo-space-m: 0.5rem;
    --lumo-space-s: 0.25rem;
    --lumo-space-xs: 0.125rem;

    /* Paleta de verdes - Modo claro (default) */
    --lumo-primary-text-color: rgb(16, 124, 80);
    --lumo-primary-color-50pct: rgba(16, 124, 80, 0.5);
    --lumo-primary-color-10pct: rgba(16, 124, 80, 0.1);
    --lumo-error-text-color: rgb(214, 45, 32);
    --lumo-error-color-50pct: rgba(214, 45, 32, 0.5);
    --lumo-error-color-10pct: rgba(214, 45, 32, 0.1);
    --lumo-success-text-color: rgb(20, 184, 143);
    --lumo-success-color-50pct: rgba(20, 184, 143, 0.5);
    --lumo-success-color-10pct: rgba(20, 184, 143, 0.1);

    --lumo-primary-color: hsl(152, 77%, 27%);
    --lumo-error-color: hsl(5, 74%, 48%);
    --lumo-success-color: hsl(165, 80%, 40%);
    --lumo-header-text-color: hsl(120, 25%, 15%);
    --lumo-body-text-color: hsla(120, 30%, 16%, 0.94);
    --lumo-secondary-text-color: hsla(120, 32%, 18%, 0.72);
    --lumo-tertiary-text-color: hsla(120, 35%, 20%, 0.5);
    --lumo-disabled-text-color: hsla(120, 40%, 22%, 0.26);
}

/* ── Paleta Naranja - Modo claro ── */
[theme~="orange"] {
    --lumo-primary-text-color: rgb(194, 109, 0);
    --lumo-primary-color-50pct: rgba(194, 109, 0, 0.5);
    --lumo-primary-color-10pct: rgba(194, 109, 0, 0.1);
    --lumo-error-text-color: rgb(214, 45, 32);
    --lumo-error-color-50pct: rgba(214, 45, 32, 0.5);
    --lumo-error-color-10pct: rgba(214, 45, 32, 0.1);
    --lumo-success-text-color: rgb(20, 184, 143);
    --lumo-success-color-50pct: rgba(20, 184, 143, 0.5);
    --lumo-success-color-10pct: rgba(20, 184, 143, 0.1);

    --lumo-primary-color: hsl(34, 100%, 38%);
    --lumo-error-color: hsl(5, 74%, 48%);
    --lumo-success-color: hsl(165, 80%, 40%);
    --lumo-header-text-color: hsl(30, 25%, 15%);
    --lumo-body-text-color: hsla(30, 30%, 16%, 0.94);
    --lumo-secondary-text-color: hsla(30, 32%, 18%, 0.72);
    --lumo-tertiary-text-color: hsla(30, 35%, 20%, 0.5);
    --lumo-disabled-text-color: hsla(30, 40%, 22%, 0.26);
}

/* ── Paleta Violeta - Modo claro ── */
[theme~="violet"] {
    --lumo-primary-text-color: rgb(126, 47, 175);
    --lumo-primary-color-50pct: rgba(126, 47, 175, 0.5);
    --lumo-primary-color-10pct: rgba(126, 47, 175, 0.1);
    --lumo-error-text-color: rgb(214, 45, 32);
    --lumo-error-color-50pct: rgba(214, 45, 32, 0.5);
    --lumo-error-color-10pct: rgba(214, 45, 32, 0.1);
    --lumo-success-text-color: rgb(20, 184, 143);
    --lumo-success-color-50pct: rgba(20, 184, 143, 0.5);
    --lumo-success-color-10pct: rgba(20, 184, 143, 0.1);

    --lumo-primary-color: hsl(275, 55%, 44%);
    --lumo-error-color: hsl(5, 74%, 48%);
    --lumo-success-color: hsl(165, 80%, 40%);
    --lumo-header-text-color: hsl(275, 25%, 15%);
    --lumo-body-text-color: hsla(275, 30%, 16%, 0.94);
    --lumo-secondary-text-color: hsla(275, 32%, 18%, 0.72);
    --lumo-tertiary-text-color: hsla(275, 35%, 20%, 0.5);
    --lumo-disabled-text-color: hsla(275, 40%, 22%, 0.26);
}

[theme~="dark"] {
    --lumo-shade-5pct: rgba(26, 26, 26, 0.05);
    --lumo-shade-10pct: rgba(26, 26, 26, 0.1);
    --lumo-shade-20pct: rgba(26, 26, 26, 0.2);
    --lumo-shade-30pct: rgba(26, 26, 26, 0.3);
    --lumo-shade-40pct: rgba(26, 26, 26, 0.4);
    --lumo-shade-50pct: rgba(26, 26, 26, 0.5);
    --lumo-shade-60pct: rgba(26, 26, 26, 0.6);
    --lumo-shade-70pct: rgba(26, 26, 26, 0.7);
    --lumo-shade-80pct: rgba(26, 26, 26, 0.8);
    --lumo-shade-90pct: rgba(26, 26, 26, 0.9);

    /* Paleta de verdes - Modo oscuro */
    --lumo-primary-text-color: rgb(94, 234, 157);
    --lumo-primary-color-50pct: rgba(94, 234, 157, 0.5);
    --lumo-primary-color-10pct: rgba(94, 234, 157, 0.1);
    --lumo-error-text-color: rgb(255, 97, 97);
    --lumo-error-color-50pct: rgba(255, 97, 97, 0.5);
    --lumo-error-color-10pct: rgba(255, 97, 97, 0.1);
    --lumo-success-text-color: rgb(62, 229, 170);
    --lumo-success-color-50pct: rgba(62, 229, 170, 0.5);
    --lumo-success-color-10pct: rgba(62, 229, 170, 0.1);

    --lumo-shade: hsl(0, 0%, 10%);
    --lumo-primary-color: hsl(146, 80%, 64%);
    --lumo-error-color: hsl(0, 100%, 69%);
    --lumo-success-color: hsl(159, 76%, 57%);
    --lumo-success-contrast-color: hsl(159, 29%, 10%);
}

/* ── Paleta Naranja - Modo oscuro ── */
[theme~="dark"][theme~="orange"] {
    --lumo-primary-text-color: rgb(255, 183, 77);
    --lumo-primary-color-50pct: rgba(255, 183, 77, 0.5);
    --lumo-primary-color-10pct: rgba(255, 183, 77, 0.1);
    --lumo-error-text-color: rgb(255, 97, 97);
    --lumo-error-color-50pct: rgba(255, 97, 97, 0.5);
    --lumo-error-color-10pct: rgba(255, 97, 97, 0.1);
    --lumo-success-text-color: rgb(62, 229, 170);
    --lumo-success-color-50pct: rgba(62, 229, 170, 0.5);
    --lumo-success-color-10pct: rgba(62, 229, 170, 0.1);

    --lumo-primary-color: hsl(34, 100%, 62%);
    --lumo-error-color: hsl(0, 100%, 69%);
    --lumo-success-color: hsl(159, 76%, 57%);
    --lumo-success-contrast-color: hsl(159, 29%, 10%);
}

/* ── Paleta Violeta - Modo oscuro ── */
[theme~="dark"][theme~="violet"] {
    --lumo-primary-text-color: rgb(206, 147, 255);
    --lumo-primary-color-50pct: rgba(206, 147, 255, 0.5);
    --lumo-primary-color-10pct: rgba(206, 147, 255, 0.1);
    --lumo-error-text-color: rgb(255, 97, 97);
    --lumo-error-color-50pct: rgba(255, 97, 97, 0.5);
    --lumo-error-color-10pct: rgba(255, 97, 97, 0.1);
    --lumo-success-text-color: rgb(62, 229, 170);
    --lumo-success-color-50pct: rgba(62, 229, 170, 0.5);
    --lumo-success-color-10pct: rgba(62, 229, 170, 0.1);

    --lumo-primary-color: hsl(275, 80%, 75%);
    --lumo-error-color: hsl(0, 100%, 69%);
    --lumo-success-color: hsl(159, 76%, 57%);
    --lumo-success-contrast-color: hsl(159, 29%, 10%);
}