/* Colores, tamaños y fuentes en un solo lugar.
   Para cambiar la identidad visual, edita SOLO este archivo.
   Temas: claro (por defecto), mixto (menú oscuro), oscuro y sistema (sigue al teléfono/PC).
   El tema lo pone js/tema.js en <html data-tema="..."> antes de dibujar, para que no "parpadee". */
:root {
  color-scheme: light;
  --azul: #0F2A43;                  /* tarjeta de resumen, avisos, marca */
  --verde: #1F7A5C;                 /* acento y texto de ingresos */
  --primario: #1F7A5C;              /* fondo de botones principales (texto blanco encima) */
  --primario-hover: #186A4F;
  --sobre-primario: #FFFFFF;
  --verde-suave: #E3F3EC;
  --terracota: #B3472E;             /* texto de gastos */
  --peligro: #B3472E;               /* fondo de botones de peligro (texto blanco encima) */
  --fondo: #F6F8FA;
  --tarjeta: #FFFFFF;
  --control: #FFFFFF;               /* fondo de campos y botones secundarios */
  --hundido: #E9EEF3;               /* fondo de selectores tipo "pastilla" */
  --texto: #0F2A43;
  --texto-2: #4A5D70;
  --borde: #E3E9EF;
  --borde-fuerte: #C9D6E3;          /* solo decorativo */
  --borde-control: #7A8CA0;         /* bordes de campos y botones: 3,4 a 1 sobre blanco (mínimo exigido: 3 a 1) */
  --info: #2F5D9E;                  /* movimientos PREVISTOS (6,6 a 1 sobre blanco) */
  --info-suave: #E6EEF8;
  --aviso-fondo: #FFF1CC;
  --aviso-texto: #6B4B00;
  --encabezado: rgba(255,255,255,.92);
  --sombra: 0 1px 2px rgba(15,42,67,.04), 0 4px 14px rgba(15,42,67,.05);
  --sombra-alta: 0 12px 32px rgba(15,42,67,.12);
  /* Menú lateral / inferior */
  --nav-fondo: #FFFFFF;
  --nav-texto: #4A5D70;
  --nav-activo-fondo: var(--acento-suave);
  --nav-activo-texto: #0F2A43;
  --nav-borde: #E3E9EF;
  /* Logo y panel de marca del login (PC). Son iguales en todos los temas:
     el panel siempre es azul oscuro, por eso su texto siempre es claro. */
  --logo-fondo: #1F7A5C;
  --logo-i: #1F7A5C;                 /* punto de la «i» del logotipo: sobre fondos claros (en los oscuros cambia a menta) */
  --logo-punto-claro: #BFF2DC;
  --marca-fondo-1: #1D4A75;
  --marca-fondo-2: #0F2A43;
  --marca-fondo-3: #0B2035;
  --marca-brillo: rgba(47,181,134,.35);
  --marca-velo: rgba(255,255,255,.1);
  --marca-texto: #E7EEF5;            /* 12,5 a 1 sobre #0F2A43 */
  --marca-texto-2: #C9D6E3;          /* 9,9 a 1 sobre #0F2A43 (6,2 a 1 en la parte más clara del degradado) */
  --marca-titulo: #FFFFFF;
  --marca-acento: #7FE0B8;
  --fuerza-media: #C98A1A;
  /* ACENTO: enlaces, foco, elementos elegidos. Por defecto es el verde de la marca; los «temas de color»
     (data-acento) lo cambian. El VERDE de ingresos (--verde) NO cambia: tiene significado. */
  --acento: var(--verde);
  --acento-suave: var(--verde-suave);
  /* Tarjeta de resumen y avisos (siempre sobre azul oscuro) */
  --sobre-azul: #FFFFFF;
  --sobre-azul-2: #C9D6E3;
  --ingreso-claro: #8FE3BD;
  --gasto-claro: #FFC2B0;
  --gasto-oscuro: #7A2412;
  --velo-claro: rgba(255,255,255,.1);
  --resumen-brillo: #1D4A75;
  --fondo-modal: rgba(15,42,67,.5);
  --sombra-flotante: 0 6px 16px rgba(15,42,67,.25);
  --sombra-encabezado: 0 2px 10px rgba(15,42,67,.04);
  --sombra-pastilla: 0 1px 3px rgba(15,42,67,.14);           /* barra «aceptable» del medidor de contraseña (decorativa: el texto la acompaña) */
  --radio: 16px;
  --radio-chico: 12px;
  --fuente: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Mixto: contenido claro y menú oscuro (como el panel de un banco) */
:root[data-tema="mixto"] {
  --nav-fondo: #0F2A43;
  --nav-texto: #C9D6E3;
  --nav-activo-fondo: rgba(255,255,255,.12);
  --nav-activo-texto: #FFFFFF;
  --nav-borde: #0F2A43;
  --logo-i: #BFF2DC;
}

/* Oscuro. Los textos de color se aclaran para mantener el contraste (mínimo 4,5 a 1). */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --azul: #1D4A75;
  --verde: #4CC79A;
  --primario: #1E7F5F;
  --primario-hover: #1B7456;
  --verde-suave: #143B30;
  --terracota: #F2907A;
  --peligro: #B8462D;
  --fondo: #0B1724;
  --tarjeta: #122233;
  --control: #172B3F;
  --hundido: #0E1C2B;
  --texto: #E7EEF5;
  --texto-2: #A9B8C8;
  --borde: #22374C;
  --borde-fuerte: #2E4760;
  --borde-control: #6B84A0;
  --info: #8DB4EE;
  --info-suave: #17293F;
  --aviso-fondo: #3A2E0A;
  --aviso-texto: #F6D57E;
  --encabezado: rgba(18,34,51,.92);
  --logo-i: #BFF2DC;
  --sombra: 0 1px 2px rgba(0,0,0,.25), 0 4px 14px rgba(0,0,0,.2);
  --sombra-alta: 0 12px 32px rgba(0,0,0,.45);
  --nav-fondo: #0E1C2B;
  --nav-texto: #A9B8C8;
  --nav-activo-fondo: var(--acento-suave);
  --nav-activo-texto: #E7EEF5;
  --nav-borde: #22374C;
  --resumen-brillo: #285E92;
  --fondo-modal: rgba(0,0,0,.6);
  --sombra-flotante: 0 6px 16px rgba(0,0,0,.45);
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="sistema"] {
    color-scheme: dark;
    --azul: #1D4A75; --verde: #4CC79A; --primario: #1E7F5F; --primario-hover: #1B7456; --verde-suave: #143B30;
    --terracota: #F2907A; --peligro: #B8462D; --fondo: #0B1724; --tarjeta: #122233; --control: #172B3F; --hundido: #0E1C2B;
    --texto: #E7EEF5; --texto-2: #A9B8C8; --borde: #22374C; --borde-fuerte: #2E4760; --borde-control: #6B84A0;
    --info: #8DB4EE; --info-suave: #17293F; --aviso-fondo: #3A2E0A; --aviso-texto: #F6D57E; --encabezado: rgba(18,34,51,.92);
    --sombra: 0 1px 2px rgba(0,0,0,.25), 0 4px 14px rgba(0,0,0,.2); --sombra-alta: 0 12px 32px rgba(0,0,0,.45);
    --nav-fondo: #0E1C2B; --nav-texto: #A9B8C8; --nav-activo-fondo: var(--acento-suave); --nav-activo-texto: #E7EEF5; --nav-borde: #22374C;
    --logo-i: #BFF2DC; --resumen-brillo: #285E92; --fondo-modal: rgba(0,0,0,.6); --sombra-flotante: 0 6px 16px rgba(0,0,0,.45);
  }
}

/* TEMAS DE COLOR (Perfil → Apariencia): cambian el color de acento y de los botones principales.
   Se combinan con Claro, Mixto, Oscuro y Automático. Contraste comprobado (mínimo 4,5 a 1):
   violeta 6,4 / grafito 8,8 / océano 5,8 en claro; 6,9 / 10,1 / 7,9 en oscuro (texto sobre tarjeta). */
:root[data-acento="violeta"] { --acento: #6B46C1; --acento-suave: #EFE9FB; --primario: #6B46C1; --primario-hover: #5A38A8; }
:root[data-acento="grafito"] { --acento: #3E4C5C; --acento-suave: #E4E9EF; --primario: #3E4C5C; --primario-hover: #2F3A47; }
:root[data-acento="oceano"]  { --acento: #0E6E8C; --acento-suave: #E0F1F6; --primario: #0E6E8C; --primario-hover: #0B5A73; }
:root[data-acento="violeta"][data-tema="oscuro"] { --acento: #B49CF0; --acento-suave: #2A2148; --primario: #6B4BC9; --primario-hover: #7A5AD6; }
:root[data-acento="grafito"][data-tema="oscuro"] { --acento: #C3CEDA; --acento-suave: #22303F; --primario: #4A5A6C; --primario-hover: #56687C; }
:root[data-acento="oceano"][data-tema="oscuro"]  { --acento: #5CC3E0; --acento-suave: #10303D; --primario: #13708C; --primario-hover: #16809F; }
@media (prefers-color-scheme: dark) {
  :root[data-acento="violeta"][data-tema="sistema"] { --acento: #B49CF0; --acento-suave: #2A2148; --primario: #6B4BC9; --primario-hover: #7A5AD6; }
  :root[data-acento="grafito"][data-tema="sistema"] { --acento: #C3CEDA; --acento-suave: #22303F; --primario: #4A5A6C; --primario-hover: #56687C; }
  :root[data-acento="oceano"][data-tema="sistema"]  { --acento: #5CC3E0; --acento-suave: #10303D; --primario: #13708C; --primario-hover: #16809F; }
}
/* Muestras de los temas de color (el círculo que se ve en Apariencia) */
:root { --muestra-verde: #1F7A5C; --muestra-violeta: #6B46C1; --muestra-grafito: #3E4C5C; --muestra-oceano: #0E6E8C; }

/* ESTILOS COMPLETOS (Perfil → Apariencia → Estilo): cambian fondos, tarjetas, menú y acento.
   Cuando hay un estilo elegido, tema.js pone data-tema = su base (claro u oscuro) y desactiva el color principal.
   Contraste comprobado con un script: texto 4,5 a 1 o más; bordes de controles 3 a 1 o más. */
/* Grafito y naranja (oscuro) */
:root[data-estilo="grafito-naranja"][data-estilo] {
  color-scheme: dark;
  --fondo: #121417; --tarjeta: #1B1E23; --control: #23272D; --hundido: #16191D;
  --texto: #EEF0F3; --texto-2: #A9B0BA; --borde: #2C3138; --borde-fuerte: #3A4048;
  --borde-control: #77808C; --azul: #262A31; --resumen-brillo: #3A3F48; --verde: #5CCB9A;
  --verde-suave: #17352A; --terracota: #FF8FA3; --peligro: #C2334D; --acento: #FF9A4D;
  --acento-suave: #3A2617; --primario: #B8470B; --primario-hover: #A33F09; --sobre-primario: #FFFFFF;
  --info: #8DB4EE; --info-suave: #1A2638; --aviso-fondo: #3A2E0A; --aviso-texto: #F6D57E;
  --nav-fondo: #16191D; --nav-texto: #A9B0BA; --nav-activo-fondo: #3A2617; --nav-activo-texto: #FFB27A;
  --nav-borde: #2C3138; --logo-i: #BFF2DC; --encabezado: rgba(27,30,35,.92);
  --sombra: 0 1px 2px rgba(0,0,0,.25), 0 4px 14px rgba(0,0,0,.2); --sombra-alta: 0 12px 32px rgba(0,0,0,.45);
  --fondo-modal: rgba(0,0,0,.6); --sombra-flotante: 0 6px 16px rgba(0,0,0,.45);
}
/* Cálido (claro) */
:root[data-estilo="calido"][data-estilo] {
  color-scheme: light;
  --fondo: #F6F0E7; --tarjeta: #FFFCF7; --control: #FFFFFF; --hundido: #EEE5D7;
  --texto: #2D2219; --texto-2: #66574A; --borde: #E7DCCD; --borde-fuerte: #D6C7B4;
  --borde-control: #8F7E6C; --azul: #3D2B20; --resumen-brillo: #5A4030; --verde: #276B44;
  --verde-suave: #E6F2EA; --terracota: #B42318; --peligro: #B42318; --acento: #8A5A2C;
  --acento-suave: #F3E7D6; --primario: #8A5A2C; --primario-hover: #74491F; --sobre-primario: #FFFFFF;
  --info: #2F5D9E; --info-suave: #E6EEF8; --aviso-fondo: #FFF1CC; --aviso-texto: #6B4B00;
  --nav-fondo: #FFFCF7; --nav-texto: #66574A; --nav-activo-fondo: #F3E7D6; --nav-activo-texto: #2D2219;
  --nav-borde: #E7DCCD; --encabezado: rgba(255,252,247,.92);
  --sombra: 0 1px 2px rgba(40,30,20,.05), 0 4px 14px rgba(40,30,20,.06); --sombra-alta: 0 12px 32px rgba(40,30,20,.14);
  --fondo-modal: rgba(30,22,16,.5); --sombra-flotante: 0 6px 16px rgba(30,22,16,.25);
}
/* Lavanda (claro) */
:root[data-estilo="lavanda"][data-estilo] {
  color-scheme: light;
  --fondo: #F5F3FA; --tarjeta: #FFFFFF; --control: #FFFFFF; --hundido: #ECE8F5;
  --texto: #231D3A; --texto-2: #5A5470; --borde: #E4DFF0; --borde-fuerte: #CFC7E3;
  --borde-control: #857DA0; --azul: #2E2552; --resumen-brillo: #463A7A; --verde: #1F7A5C;
  --verde-suave: #E3F3EC; --terracota: #B3472E; --peligro: #B3472E; --acento: #5B3FA8;
  --acento-suave: #ECE6FA; --primario: #5B3FA8; --primario-hover: #4A3290; --sobre-primario: #FFFFFF;
  --info: #2F5D9E; --info-suave: #E6EEF8; --aviso-fondo: #FFF1CC; --aviso-texto: #6B4B00;
  --nav-fondo: #FFFFFF; --nav-texto: #5A5470; --nav-activo-fondo: #ECE6FA; --nav-activo-texto: #231D3A;
  --nav-borde: #E4DFF0; --encabezado: rgba(255,255,255,.92);
  --sombra: 0 1px 2px rgba(40,30,20,.05), 0 4px 14px rgba(40,30,20,.06); --sombra-alta: 0 12px 32px rgba(40,30,20,.14);
  --fondo-modal: rgba(30,22,16,.5); --sombra-flotante: 0 6px 16px rgba(30,22,16,.25);
}
/* Medianoche (oscuro) */
:root[data-estilo="medianoche"][data-estilo] {
  color-scheme: dark;
  --fondo: #0B1020; --tarjeta: #131A2E; --control: #1A2238; --hundido: #0F1527;
  --texto: #E8ECF6; --texto-2: #A3ADC4; --borde: #232D47; --borde-fuerte: #2F3B5A;
  --borde-control: #6E7C9E; --azul: #1E2A4A; --resumen-brillo: #2C3D6B; --verde: #4CC79A;
  --verde-suave: #133229; --terracota: #F48FB1; --peligro: #B8462D; --acento: #F2C14E;
  --acento-suave: #33290F; --primario: #F2C14E; --primario-hover: #F6CF6E; --sobre-primario: #1B1400;
  --info: #8DB4EE; --info-suave: #17293F; --aviso-fondo: #3A2E0A; --aviso-texto: #F6D57E;
  --nav-fondo: #0F1527; --nav-texto: #A3ADC4; --nav-activo-fondo: #33290F; --nav-activo-texto: #F6D57E;
  --nav-borde: #232D47; --logo-i: #BFF2DC; --encabezado: rgba(19,26,46,.92);
  --sombra: 0 1px 2px rgba(0,0,0,.25), 0 4px 14px rgba(0,0,0,.2); --sombra-alta: 0 12px 32px rgba(0,0,0,.45);
  --fondo-modal: rgba(0,0,0,.6); --sombra-flotante: 0 6px 16px rgba(0,0,0,.45);
}

:root[data-acento="ciruela"] { --acento: #8E3B6E; --acento-suave: #F7E8F1; --primario: #8E3B6E; --primario-hover: #77305C; }
:root[data-acento="ciruela"][data-tema="oscuro"] { --acento: #E59ACB; --acento-suave: #3A1F33; --primario: #8E3B6E; --primario-hover: #9E4A7E; }
@media (prefers-color-scheme: dark) { :root[data-acento="ciruela"][data-tema="sistema"] { --acento: #E59ACB; --acento-suave: #3A1F33; --primario: #8E3B6E; --primario-hover: #9E4A7E; } }
:root { --muestra-ciruela: #8E3B6E; }
/* Muestras de los estilos completos: fondo, menú/tarjeta y acento */
:root { --me-gn-1: #121417; --me-gn-2: #262A31; --me-gn-3: #FF9A4D; --me-ca-1: #F6F0E7; --me-ca-2: #3D2B20; --me-ca-3: #8A5A2C;
  --me-la-1: #F5F3FA; --me-la-2: #2E2552; --me-la-3: #5B3FA8; --me-me-1: #0B1020; --me-me-2: #1E2A4A; --me-me-3: #F2C14E; }
:root { --me-pr-1: #F6F8FA; --me-pr-2: #0F2A43; --me-pr-3: #1F7A5C; }

/* Dona del informe general: 5 categorías + «Otros». Colores validados para daltonismo (protan/deutan)
   y separados en visión normal; el tema oscuro usa los mismos tonos ajustados a su fondo.
   Nunca van solos: cada tajada tiene su nombre y su % al lado. */
:root { --dona-1: #2A78D6; --dona-2: #EB6834; --dona-3: #1BAF7A; --dona-4: #EDA100; --dona-5: #E87BA4; --dona-otros: #9AA3AE; }
:root[data-tema="oscuro"], :root[data-estilo="medianoche"][data-estilo], :root[data-estilo="grafito-naranja"][data-estilo] {
  --dona-1: #3987E5; --dona-2: #D95926; --dona-3: #199E70; --dona-4: #C98500; --dona-5: #D55181; --dona-otros: #5E6E80; }
@media (prefers-color-scheme: dark) { :root[data-tema="sistema"] {
  --dona-1: #3987E5; --dona-2: #D95926; --dona-3: #199E70; --dona-4: #C98500; --dona-5: #D55181; --dona-otros: #5E6E80; } }