/* Paletas de la plataforma: grafito, océano y bosque, cada una en claro y oscuro.
   Se cargan después de styles.css y solo cambian los colores (los tamaños y la forma de la app quedan iguales).
   --grafito = tinta y barras · --naranja = acción principal · --azul = enlaces y foco · --placa = superficies · --niebla = fondo */
:root[data-paleta="oceano"] { --grafito: #0f2233; --naranja: #0b8f9c; --azul: #1f5fbf; --barra-borde: #2a4258; --barra-boton: #183049; }
:root[data-paleta="bosque"] { --grafito: #17251c; --naranja: #c46d12; --azul: #2c6e49; --barra-borde: #34483b; --barra-boton: #203228; }
:root[data-paleta="grafito"], :root:not([data-paleta]) { --barra-borde: #3a3f46; --barra-boton: #23262b; }
:root { --barra: var(--grafito); --barra-texto: #ffffff; }

/* Oscuro: superficies oscuras y texto claro. Las barras conservan su color de marca. */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --barra: var(--grafito);
  --placa: #1b1e22; --niebla: #0f1114; --aluminio: #353a41; --acero: #a4abb5;
  --exito: #3fb37a; --alerta: #f2c14e; --error: #ff6b63;
}
:root[data-tema="oscuro"][data-paleta="grafito"], :root[data-tema="oscuro"]:not([data-paleta]) { --barra: #000000; --grafito: #eceef1; --naranja: #ff6a33; --azul: #7c9cff; }
:root[data-tema="oscuro"][data-paleta="oceano"] { --barra: #0a1826; --grafito: #e6eef5; --naranja: #19b3c2; --azul: #7fb0ff; }
:root[data-tema="oscuro"][data-paleta="bosque"] { --barra: #0e1812; --grafito: #e8efe9; --naranja: #e08a2e; --azul: #6fc296; }

/* Piezas que en styles.css usan la tinta como fondo: en oscuro pasan a la barra de marca */
.barra, .doc-barra { background: var(--barra); color: var(--barra-texto); }
.barra .volver, .doc-barra .volver { color: var(--barra-texto); }
.sync { border-color: var(--barra-borde); background: var(--barra-boton); color: var(--barra-texto); }
:root[data-tema="oscuro"] .totales .total, :root[data-tema="oscuro"] .toast { background: var(--barra); color: var(--barra-texto); }
:root[data-tema="oscuro"] .btn.oscuro, :root[data-tema="oscuro"] .pill.oscura, :root[data-tema="oscuro"] .col-t .n,
:root[data-tema="oscuro"] .segmentos button[aria-pressed="true"], :root[data-tema="oscuro"] .chip[aria-pressed="true"] { color: #111316; }
:root[data-tema="oscuro"] input, :root[data-tema="oscuro"] select, :root[data-tema="oscuro"] textarea { background-color: #111316; }
:root[data-tema="oscuro"] .pill.ok { background: #12301f; border-color: #1f5a39; }
:root[data-tema="oscuro"] .pill.mal { background: #3a1513; border-color: #6e2622; }
:root[data-tema="oscuro"] .aviso-caja.atento { background: #2e2510; }
:root[data-tema="oscuro"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23eceef1' stroke-width='2'/%3E%3C/svg%3E"); }
@media (min-width: 900px) { .nav::before { content: none; } }

/* Los documentos (cotización, nota de entrega) siempre se imprimen en claro */
#doc { --placa: #ffffff; --niebla: #f3f4f6; --aluminio: #d5d9df; --acero: #5b626c; --grafito: #15171a; color-scheme: light; background: #ffffff; color: #15171a; }
#doc .doc-barra { background: var(--barra); }

/* Marca del taller en la barra (iniciales cuando no hay logo) */
.marca-ini { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--naranja); color: #fff; font: 800 14px/1 var(--f-titulo); letter-spacing: .02em; }
.plat-logo { color: var(--naranja); }
.plat-qr { display: block; width: 200px; height: 200px; margin: 8px auto; background: #fff; padding: 8px; border-radius: 8px; }