/* ============ Comandix — modo claro ============ */
/* Se activa con <html data-tema="claro"> (botón ☀️/🌙 de la barra lateral; se recuerda en este equipo).
   Cambia las variables de colores y los pocos fondos oscuros que estaban escritos directo. */
:root[data-tema="claro"] {
  --bg: #f3f4fb;
  --panel: rgba(255, 255, 255, 0.85);
  --panel-solido: #ffffff;
  --panel-2: rgba(40, 46, 110, 0.045);
  --panel-3: rgba(40, 46, 110, 0.09);
  --borde: rgba(70, 80, 160, 0.17);
  --borde-fuerte: rgba(70, 80, 160, 0.34);
  --texto: #161a33;
  --suave: #4b5375;
  --tenue: #757d9e;
  --acento: #6352f0;
  --acento-2: #0e7490;
  --ok: #059669;
  --error: #dc2626;
  --aviso: #b45309;
  --info: #2563eb;
  --sombra: 0 18px 50px rgba(30, 35, 80, 0.14);
  color-scheme: light;
}

[data-tema="claro"] body {
  background: radial-gradient(1200px 800px at 15% -10%, #e4e1ff 0%, transparent 60%),
              radial-gradient(900px 700px at 110% 110%, #d9f3fa 0%, transparent 55%),
              var(--bg);
}
[data-tema="claro"] .mancha { mix-blend-mode: normal; opacity: 0.12; }
[data-tema="claro"] body.modo-app .mancha { opacity: 0.07; }
[data-tema="claro"] #fondo { opacity: 0.45; }

/* Marca y distintivos con texto en degradado (el original termina en blanco) */
[data-tema="claro"] .marca span { background-image: linear-gradient(90deg, #1e1b4b, #6d28d9 55%, #0891b2); }
[data-tema="claro"] .insignia-dueno .texto { background-image: linear-gradient(90deg, #92400e, #d97706, #7c3aed, #92400e); }
[data-tema="claro"] .plan-chip { color: #3b2fc9; }

/* Formularios y pestañas */
[data-tema="claro"] input, [data-tema="claro"] select, [data-tema="claro"] textarea { background: #fff; }
[data-tema="claro"] .pestanas { background: var(--panel-3); }

/* Estructura */
[data-tema="claro"] .lateral { background: rgba(255, 255, 255, 0.72); }
[data-tema="claro"] .nav a.activa { color: #2e2499; background: linear-gradient(90deg, rgba(99, 82, 240, 0.16), rgba(99, 82, 240, 0.03)); }
[data-tema="claro"] .barra-movil { background: rgba(255, 255, 255, 0.94); }
[data-tema="claro"] .barra-movil a.activa { color: #2e2499; background: rgba(99, 82, 240, 0.14); }
[data-tema="claro"] .panel { box-shadow: 0 8px 30px rgba(30, 35, 80, 0.08); }

/* Salón y pedido */
[data-tema="claro"] .chip .n { background: rgba(0, 0, 0, 0.08); }
[data-tema="claro"] .chip.activo .n { background: rgba(255, 255, 255, 0.25); }
[data-tema="claro"] .mesa:hover { box-shadow: 0 12px 30px rgba(30, 35, 80, 0.14); }
[data-tema="claro"] .mesa.ocupada { background: linear-gradient(160deg, rgba(99, 82, 240, 0.16), rgba(255, 255, 255, 0.9)); }
[data-tema="claro"] .mesa.cuenta { background: linear-gradient(160deg, rgba(245, 158, 11, 0.18), rgba(255, 255, 255, 0.9)); }
[data-tema="claro"] .prod .est { background: var(--panel-3); }
[data-tema="claro"] .comanda.abierta { box-shadow: 0 -20px 60px rgba(30, 35, 80, 0.25); }
[data-tema="claro"] #div-total { color: var(--texto) !important; }

/* Caja, cobro y números */
[data-tema="claro"] .cifra.destacada { background: linear-gradient(150deg, rgba(99, 82, 240, 0.2), rgba(255, 255, 255, 0.9)); }
[data-tema="claro"] .total-cobro { background: linear-gradient(150deg, rgba(99, 82, 240, 0.16), rgba(255, 255, 255, 0.6)); }
[data-tema="claro"] .vuelto span { color: #047857; }
[data-tema="claro"] .vuelto b { color: #059669; }
[data-tema="claro"] .calc-pantalla { background: linear-gradient(160deg, rgba(99, 102, 241, 0.14), rgba(255, 255, 255, 0.7)); }

/* Etiquetas, código y estados */
[data-tema="claro"] .etiqueta { background: var(--panel-3); }
[data-tema="claro"] .codigo { background: var(--panel-3); }
[data-tema="claro"] .chip-estado.rojo { color: #b91c1c; }
[data-tema="claro"] .chip-estado.amarillo { color: #92400e; }
[data-tema="claro"] .chip-estado.verde { color: #047857; }
[data-tema="claro"] .barra .riel { background: rgba(0, 0, 0, 0.07); }
[data-tema="claro"] .ticket-kds li em { color: #b45309; }
[data-tema="claro"] #sin-conexion { color: #92400e; }

/* Ventanas y avisos */
[data-tema="claro"] .velo { background: rgba(20, 24, 50, 0.35); }
[data-tema="claro"] .barra-actualizacion { background: rgba(255, 255, 255, 0.96); box-shadow: 0 12px 40px rgba(30, 35, 80, 0.2); }

/* ============ Botón ☀️/🌙 (en los dos modos) ============ */
/* Pantalla de entrada: arriba a la derecha */
.tema-flotante { position: fixed; top: 16px; right: 16px; z-index: 60; backdrop-filter: blur(10px); }
/* Dentro del sistema (computadora): barra fina arriba a la derecha; en el celular ya está en la barra de arriba */
.barra-superior { display: flex; justify-content: flex-end; margin: -10px 0 6px; }
@media (max-width: 860px) { .barra-superior { display: none; } }