/* Colores de la app: cada usuario elige su combinación (Inicio › Colores). Va al final de los estilos.
   Los PDF y la franja tricolor de la marca no cambian. */
html[data-tema="azul"]  { --acento: #1d8fc0; }
html[data-tema="verde"] { --acento: #4f8a1c; }

/* Oscuro */
html[data-tema="oscuro"] {
  --bg: #15181b; --card: #22272c; --ink: #e6e8eb; --mut: #a3aab2; --line: #363d45; --field: #1b1f24;
  --gris: #4b535c; --titulo: #dde1e5; --suave: #a3aab2; color-scheme: dark;
}
html[data-tema="oscuro"] .hero { background: #fff; border-color: #fff; }
html[data-tema="oscuro"] .hero h1 { color: #3a4047; }
html[data-tema="oscuro"] .miga:not(.volver):not(.on) { background: var(--card); color: var(--ink); border-color: var(--line); }
html[data-tema="oscuro"] .aviso.error { background: #43202a; color: #ffb3bf; }
html[data-tema="oscuro"] .aviso.ok { background: #233318; color: #c6e8a4; }
html[data-tema="oscuro"] ::placeholder { color: #6f7780; }
html[data-tema="oscuro"] #s-fin {
  --accent: #4cb3e6; --accent-soft: #1d3442; --warn-soft: #3d2d1e; --crit-soft: #432026;
  --h1: #1d3442; --h2: #22506a; --h3: #2d7aa3; --wkend: #262b31;
}
html[data-tema="oscuro"] .vieja .hmhero.hm-claro { background: linear-gradient(160deg, #22272c 0%, #1b2a33 100%); color: var(--ink); border-color: var(--line); }
html[data-tema="oscuro"] .vieja .hmhero.hm-claro .hmstat { background: var(--card); border-color: var(--line); color: var(--ink); }
html[data-tema="oscuro"] table, html[data-tema="oscuro"] th, html[data-tema="oscuro"] td { border-color: var(--line); }

/* Alto contraste: letra más grande y bordes marcados, para leer rápido en el celular */
html[data-tema="contraste"] {
  --bg: #ffffff; --card: #ffffff; --ink: #000000; --mut: #262b30; --line: #6f7780; --field: #ffffff;
  --titulo: #000000; --suave: #262b30; --acento: #b3122a; --gris: #22272c;
}
html[data-tema="contraste"] body, html[data-tema="contraste"] .vieja { font-size: 17px; }
html[data-tema="contraste"] input, html[data-tema="contraste"] select, html[data-tema="contraste"] textarea { border-width: 2px; }
html[data-tema="contraste"] .tarjeta, html[data-tema="contraste"] .vieja .card { border: 2px solid var(--line); }
html[data-tema="contraste"] label, html[data-tema="contraste"] .mutd, html[data-tema="contraste"] .note { color: #262b30; }

/* Selector de colores */
.temadlg { position: fixed; inset: 0; z-index: 60; background: rgba(20, 24, 28, .45); display: grid; place-items: center; padding: 16px; }
.temadlg > div { background: var(--card); color: var(--ink); border-radius: 14px; padding: 18px; width: 100%; max-width: 420px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.temadlg h3 { margin: 0 0 4px; color: var(--titulo); }
.temadlg p { margin: 0 0 12px; font-size: 13.5px; color: var(--mut); }
.temaop { display: flex; align-items: center; gap: 12px; width: 100%; margin: 6px 0 0; padding: 10px 12px; text-align: left; font-weight: 500;
  background: var(--field); color: var(--ink); border: 2px solid var(--line); border-radius: 10px; }
.temaop.on { border-color: var(--acento); }
.temaop i { flex: none; display: flex; width: 54px; height: 26px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(0,0,0,.15); }
.temaop i span { flex: 1; }
.temaop small { display: block; font-weight: 400; color: var(--mut); font-size: 12.5px; }
.temadlg .cerrar { width: 100%; margin-top: 14px; }
.hmcolores { position: absolute; right: 64px; top: -4px; padding: 4px 12px; font-size: 13px; font-weight: 500;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); border-radius: 99px; }

/* Inicio: el encabezado de bienvenida acompaña los colores elegidos */
html[data-tema="oscuro"] .hmhero { background: linear-gradient(135deg, #1f4f66 0%, #24555c 50%, #36562a 100%); box-shadow: none; }
html[data-tema="azul"] .hmhero { background: linear-gradient(135deg, #1d8fc0 0%, #29a9e0 60%, #4cbdea 100%); }
html[data-tema="verde"] .hmhero { background: linear-gradient(135deg, #4f8a1c 0%, #7dbb34 60%, #97cc55 100%); box-shadow: 0 10px 30px rgba(125,187,52,.3); }
html[data-tema="contraste"] .hmhero { background: #22272c; box-shadow: none; }
html[data-tema="oscuro"] .g-adm i svg, html[data-tema="oscuro"] .g-imp i svg { stroke: #dde1e5; }
html[data-tema="oscuro"] .hmsearch { color: var(--mut); }