/* Predeterminado: verde LUSTOR #31563a, extraído de https://lustorconsultoria.com/styles.css.
   Hover original: #1f3b28. Enlaces y foco claros adaptados para el modo oscuro.
*/
/* COLORES DE LA WEB — editar este archivo y guardarlo como UTF-8.
   Los nombres indican qué cambia cada color. Se admite #RRGGBB.
   Claro: :root. Oscuro: :root[data-theme="dark"].
   Para usar una combinación, descomentar SOLO su bloque al final.
   No es necesario modificar theme.css ni recompilar la aplicación.
*/
:root {
  --color-principal: #31563a; /* Fondo y borde de TODOS los botones */
  --color-boton-hover: #1f3b28; /* Botones al pasar el ratón o pulsar */
  --color-texto-boton: #ffffff; /* Texto e iconos de botones */
  --color-fondo-pagina: #f6f3eb;
  --color-fondo-tarjeta: #ffffff; /* Formularios y ventanas emergentes */
  --color-fondo-suave: #e8f0ea; /* Cabeceras de tablas y campos auxiliares */
  --color-texto: #1f2421;
  --color-texto-secundario: #5d665f;
  --color-borde: #dfe5df;
  --color-menu: #31563a;
  --color-texto-menu: #dce9de;
  --color-texto-menu-activo: #ffffff;
  --color-fondo-menu-activo: #ffffff18;
  --color-enlace: #31563a;
  --color-foco: #31563a; /* Contorno de navegación con teclado */
  --color-exito: #087f69;
  --color-error: #b9323c;
  --color-aviso: #946400;
  --color-sombra: #38414a1a;
  --color-sombra-ventana: #00000055;
  --color-fondo-superpuesto: #121827a6;
}
:root[data-theme="dark"] {
  --color-principal: #31563a;
  --color-boton-hover: #1f3b28;
  --color-texto-boton: #ffffff;
  --color-fondo-pagina: #1a1d21;
  --color-fondo-tarjeta: #212529;
  --color-fondo-suave: #2a2f34;
  --color-texto: #ced4da;
  --color-texto-secundario: #a3acb6;
  --color-borde: #454d55;
  --color-menu: #212529;
  --color-texto-menu: #dce9de;
  --color-enlace: #a7d5b1;
  --color-foco: #a7d5b1;
  --color-exito: #63d8bc;
  --color-error: #ff9ba0;
  --color-aviso: #f4ca7c;
  --color-sombra: #00000033;
}
/* Conexión con los componentes de la aplicación: conservar estos nombres. */
:root, :root[data-theme="dark"] {
  --bg: var(--color-fondo-pagina);
  --card: var(--color-fondo-tarjeta);
  --soft: var(--color-fondo-suave);
  --ink: var(--color-texto);
  --muted: var(--color-texto-secundario);
  --line: var(--color-borde);
  --brand: var(--color-principal);
  --link: var(--color-enlace);
  --nav: var(--color-menu);
  --nav-text: var(--color-texto-menu);
  --ok: var(--color-exito);
  --bad: var(--color-error);
  --warn: var(--color-aviso);
  --focus: var(--color-foco);
  --shadow: 0 1px 2px var(--color-sombra);
}
/* Mismos colores para añadir, editar, guardar, cancelar, anular e iconos. */
.btn, .btn.primary, .btn.danger, .icon-button, input::file-selector-button {
  background: var(--color-principal);
  border-color: var(--color-principal);
  color: var(--color-texto-boton);
  filter: none;
}
.btn:hover, .btn.primary:hover, .btn.danger:hover, .icon-button:hover,
.btn:active, .btn.primary:active, .btn.danger:active, .icon-button:active,
input::file-selector-button:hover {
  background: var(--color-boton-hover);
  border-color: var(--color-boton-hover);
  color: var(--color-texto-boton);
  filter: none;
}
.btn:disabled, .icon-button:disabled { opacity: .6; cursor: not-allowed; }
input::file-selector-button { border: 1px solid var(--color-principal); border-radius: 4px; padding: 8px 12px; margin-right: 12px; cursor: pointer; font: inherit; }
.brand { color: var(--color-texto-menu-activo); }
.brand small, .sidebar-caption, .side h5 { color: var(--color-texto-menu); }
.brand-mark { color: var(--color-texto-menu-activo); border-color: var(--color-texto-menu); background: var(--color-fondo-menu-activo); }
.side a:hover, .side a.on { color: var(--color-texto-menu-activo); background: var(--color-fondo-menu-activo); }
.side a.on:after { background: var(--color-texto-menu); }
.kpi { border-bottom-color: var(--brand); }
.kpi:nth-child(2) { border-color: var(--ok); }
.kpi:nth-child(3) { border-color: var(--warn); }
.kpi:nth-child(4) { border-color: var(--link); }
.guest { background: radial-gradient(ellipse at top left,color-mix(in srgb,var(--brand) 15%,transparent),transparent 65%),var(--bg); }
.login-brand .brand-mark { background: var(--brand); }
.record-dialog { box-shadow: 0 24px 80px var(--color-sombra-ventana); }
.record-dialog::backdrop, .menu-open .menu-backdrop { background: var(--color-fondo-superpuesto); }
@media(max-width:900px) {
  .brand { color: var(--ink); }
  .brand small { color: var(--muted); }
  .brand .brand-mark { background: var(--brand); }
}
/* CINCO COMBINACIONES. Quitar el comentario de UNA combinación completa.
   Cada opción adapta botones, enlaces y menú; conserva fondos y avisos.
   Para volver al original, comentar de nuevo la combinación activada. */

/* 1. Azul corporativo */
:root {
  --color-principal: #0100fe;
  --color-boton-hover: #33416e;
  --color-texto-boton: #ffffff;
  --color-menu: #010080;
  --color-enlace: #0100fe;
}
:root[data-theme="dark"] {
  --color-principal: #4c609e;
  --color-boton-hover: #596eaf;
  --color-texto-boton: #ffffff;
  --color-menu: #212529;
  --color-enlace: #a9baf1;
}


/* 2. Verde bosque
:root {
  --color-principal: #23664b;
  --color-boton-hover: #194e38;
  --color-texto-boton: #ffffff;
  --color-menu: #23664b;
  --color-enlace: #23664b;
}
:root[data-theme="dark"] {
  --color-principal: #337958;
  --color-boton-hover: #347953;
  --color-texto-boton: #ffffff;
  --color-menu: #212529;
  --color-enlace: #8cdbaf;
}
*/

/* 3. Violeta
:root {
  --color-principal: #6941a5;
  --color-boton-hover: #523080;
  --color-texto-boton: #ffffff;
  --color-menu: #6941a5;
  --color-enlace: #6941a5;
}
:root[data-theme="dark"] {
  --color-principal: #865abb;
  --color-boton-hover: #8654b3;
  --color-texto-boton: #ffffff;
  --color-menu: #212529;
  --color-enlace: #d2b4ff;
}
*/

/* 4. Azul petróleo
:root {
  --color-principal: #176579;
  --color-boton-hover: #104e60;
  --color-texto-boton: #ffffff;
  --color-menu: #176579;
  --color-enlace: #176579;
}
:root[data-theme="dark"] {
  --color-principal: #28798c;
  --color-boton-hover: #297c8e;
  --color-texto-boton: #ffffff;
  --color-menu: #212529;
  --color-enlace: #8ed7e8;
}
*/

/* 5. Terracota
:root {
  --color-principal: #a4482e;
  --color-boton-hover: #843722;
  --color-texto-boton: #ffffff;
  --color-menu: #a4482e;
  --color-enlace: #a4482e;
}
:root[data-theme="dark"] {
  --color-principal: #b65337;
  --color-boton-hover: #b65337;
  --color-texto-boton: #ffffff;
  --color-menu: #212529;
  --color-enlace: #ffb59c;
}
*/

/* Logo original de LUSTOR: mantener sus proporciones y colores. */
.app-logo { display:block; width:48px; height:48px; object-fit:contain; border-radius:7px; flex-shrink:0; }
.login-brand .app-logo { width:76px; height:76px; }
@media(max-width:900px) { .brand .app-logo { width:40px; height:40px; } }