/* =====================================================================
   tema-romi360.css — Estilo fijo del panel: blanco y negro (identidad de Romi360)
   + modo noche (fondo negro, letras blancas) que cada persona prende o apaga
   + menú lateral que se encoge a solo íconos y se abre al pasar el mouse.
   La vitrina, la caja y las páginas del cliente siguen con los colores de cada negocio.
   ===================================================================== */

/* ---------- Colores: modo claro (blanco y negro) ---------- */
html[data-tema] {
  --corteza: #111111;          /* botones principales */
  --corteza-oscura: #0a0a0a;   /* menú lateral */
  --miga: #f4f4f4;             /* fondo de la página */
  --trigo: #ffffff;            /* opción activa del menú */
  --texto: #111111;
  --suave: #6b6b6b;
  --borde: #e4e4e4;
  --menu-texto: #d6d6d6;
  --sobre-activo: #0a0a0a;
  --fondo-tarjeta: #ffffff;
  --fondo-suave: #f7f7f7;
  --fondo-campo: #ffffff;
  --borde-campo: #d4d4d4;
  --secundario: #ececec;
  --secundario-texto: #111111;
  --fondo-cabecera: #f0f0f0;
  --titulos: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --dlg-accion: #111111;
  --dlg-accion-texto: #ffffff;
  color-scheme: light;
}

/* ---------- Colores: modo noche ---------- */
html[data-tema="noche"] {
  --corteza: #f2f2f2;
  --corteza-oscura: #000000;
  --miga: #0d0d0d;
  --trigo: #f2f2f2;
  --texto: #f2f2f2;
  --suave: #a3a3a3;
  --borde: #2a2a2a;
  --menu-texto: #bdbdbd;
  --sobre-activo: #0a0a0a;
  --fondo-tarjeta: #161616;
  --fondo-suave: #1c1c1c;
  --fondo-campo: #0f0f0f;
  --borde-campo: #333333;
  --secundario: #262626;
  --secundario-texto: #f2f2f2;
  --fondo-cabecera: #1f1f1f;
  --fila-alterna: rgba(255,255,255,.03);
  --fila-encima: rgba(255,255,255,.06);
  color-scheme: dark;
}

/* ---------- Base ---------- */
html[data-tema] body { background: var(--miga); color: var(--texto); }
html[data-tema] .titulo-seccion { color: var(--texto); font-weight: 800; letter-spacing: -.02em; }
html[data-tema] .marca { font-family: var(--titulos); font-weight: 800; letter-spacing: -.01em; }
html[data-tema] .marca small { color: #8a8a8a; }
html[data-tema] button { background: var(--corteza); color: var(--miga); }
html[data-tema] button.secundario,
html[data-tema] .plantillas button,
html[data-tema] .chips button,
html[data-tema] .rec-tabs button,
html[data-tema] .chips-emp button { background: var(--secundario); color: var(--secundario-texto); }
html[data-tema] .plantillas button.elegida,
html[data-tema] .chips button.elegida,
html[data-tema] .rec-tabs button.elegida,
html[data-tema] .chips-emp button.elegida,
html[data-tema] .horas-libres button.elegida { background: var(--corteza); color: var(--miga); }
html[data-tema] button.peligro { background: #b3261e; color: #fff; }
html[data-tema] label { color: var(--texto); }
html[data-tema] h2, html[data-tema] h3 { color: var(--texto); }
html[data-tema] .subtitulo, html[data-tema] .ayuda { color: var(--suave); }
html[data-tema] input[type="text"], html[data-tema] input[type="number"], html[data-tema] input[type="email"],
html[data-tema] input[type="password"], html[data-tema] input[type="tel"], html[data-tema] input[type="date"],
html[data-tema] input[type="time"], html[data-tema] input[type="search"], html[data-tema] select, html[data-tema] textarea {
  background: var(--fondo-campo); color: var(--texto); border-color: var(--borde-campo);
}
html[data-tema] input:disabled { background: var(--fondo-suave); color: var(--suave); }
html[data-tema] a { color: inherit; }

/* Superficies */
html[data-tema] .caja, html[data-tema] .tarjeta, html[data-tema] .estimado, html[data-tema] .cabecera-factura,
html[data-tema] .linea-compra, html[data-tema] .banco-card, html[data-tema] .grupo-casillas, html[data-tema] .cita,
html[data-tema] .rec-tarjeta, html[data-tema] .ruta-card, html[data-tema] .producto, html[data-tema] .pedido {
  background: var(--fondo-tarjeta); border-color: var(--borde); color: var(--texto);
}
html[data-tema] .caja { box-shadow: 0 1px 2px rgba(0,0,0,.04); }
html[data-tema] .formulario, html[data-tema] .bloque, html[data-tema] .historial, html[data-tema] .editor-accesos {
  background: var(--fondo-suave); border-color: var(--borde);
}
html[data-tema] .lista li, html[data-tema] .ranking li { border-color: var(--borde); }
html[data-tema] .ultimo:hover { background: var(--fondo-suave); }
html[data-tema] .tarjeta::after { background: var(--texto); }
html[data-tema] .barra-dia .columna { background: var(--texto); }
html[data-tema] .barra-dia.hoy .columna { background: var(--texto); box-shadow: 0 0 0 2px var(--suave); }
html[data-tema] .ranking li:first-child .puesto { background: var(--texto); color: var(--miga); }
html[data-tema] .ranking .puesto { color: var(--texto); }
html[data-tema] .barra { background: color-mix(in srgb, var(--miga) 92%, transparent); border-color: var(--borde); }
html[data-tema] .producto .foto-mini { background: var(--fondo-suave); }
html[data-tema] .etiqueta.admin { background: var(--texto); color: var(--miga); }
html[data-tema] .tabla-simple td, html[data-tema] .tabla-horario td, html[data-tema] .rec-tabla td { border-color: var(--borde); }
html[data-tema="noche"] .alerta { background: #2a2414; border-color: #4a3d16; color: #f0d99a; }
html[data-tema="noche"] .mensaje.ok { background: #13281a; color: #9fe0b0; }
html[data-tema="noche"] .mensaje.error { background: #2e1513; color: #f2b8b2; }
html[data-tema="noche"] img { filter: brightness(.92); }

/* ---------- Menú lateral ---------- */
html[data-tema] .menu { background: var(--corteza-oscura); color: var(--menu-texto); border-right: 1px solid #1f1f1f; }
html[data-tema] .nav button { color: var(--menu-texto); background: none; }
html[data-tema] .nav button:hover { background: rgba(255,255,255,.08); }
html[data-tema] .nav button.activo { background: var(--trigo); color: var(--sobre-activo); }
html[data-tema] .menu-pie button { background: rgba(255,255,255,.08); color: var(--menu-texto); }

/* En computadora el menú queda angosto (solo íconos) y se abre al pasar el mouse.
   Con "📌" se deja abierto siempre (se recuerda en ese aparato). */
@media (min-width: 901px) {
  html[data-tema] .menu { width: 68px; transition: width .18s ease, box-shadow .18s ease; overflow: hidden; }
  html[data-tema] .principal { margin-left: 68px; transition: margin-left .18s ease; }
  html[data-tema] .menu .marca, html[data-tema] .nav button, html[data-tema] .menu-pie { white-space: nowrap; }
  html[data-tema] .nav { overflow-x: hidden; }
  html[data-tema] .nav button { padding: 11px 12px 11px 13px; position: relative; }
  html[data-tema] .nav .icono { flex: 0 0 22px; font-size: 18px; }
  html[data-tema] .menu:not(:hover):not(:focus-within) .nav button > span:not(.icono):not(.contador-nav),
  html[data-tema] .menu:not(:hover):not(:focus-within) .flecha-ir { opacity: 0; }
  html[data-tema] .menu:not(:hover):not(:focus-within) .contador-nav {
    position: absolute; top: 4px; left: 30px; font-size: 10px; padding: 0 5px; min-width: 16px; text-align: center;
  }
  html[data-tema] .menu:not(:hover):not(:focus-within) .marca { font-size: 0; padding-left: 18px; }
  html[data-tema] .menu:not(:hover):not(:focus-within) .marca::first-letter { font-size: 24px; }
  html[data-tema] .menu:not(:hover):not(:focus-within) .marca small { visibility: hidden; }
  html[data-tema] .menu:not(:hover):not(:focus-within) .menu-pie > *:not(button) { visibility: hidden; }
  html[data-tema] .menu:not(:hover):not(:focus-within) .menu-pie button { font-size: 0; padding: 10px 0; }
  html[data-tema] .menu:not(:hover):not(:focus-within) .menu-pie button::before { content: '⏻'; font-size: 17px; }
  html[data-tema] .menu:hover, html[data-tema] .menu:focus-within { width: 240px; box-shadow: 8px 0 30px rgba(0,0,0,.25); }
  html[data-tema] .nav button > span { transition: opacity .12s ease; }
  /* Menú fijado abierto */
  html[data-tema][data-menu="abierto"] .menu { width: 240px; box-shadow: none; }
  html[data-tema][data-menu="abierto"] .principal { margin-left: 240px; }
  html[data-tema][data-menu="abierto"] .menu .nav button > span, html[data-tema][data-menu="abierto"] .flecha-ir { opacity: 1 !important; }
  html[data-tema][data-menu="abierto"] .menu .contador-nav { position: static !important; font-size: 12px !important; }
  html[data-tema][data-menu="abierto"] .menu .marca { font-size: 24px !important; padding-left: 20px !important; }
  html[data-tema][data-menu="abierto"] .menu .marca small { visibility: visible !important; }
  html[data-tema][data-menu="abierto"] .menu .menu-pie > * { visibility: visible !important; }
  html[data-tema][data-menu="abierto"] .menu .menu-pie button { font-size: 15px !important; padding: 10px 14px !important; }
  html[data-tema][data-menu="abierto"] .menu .menu-pie button::before { content: none !important; }
}

/* Botones de la barra superior: modo noche y fijar menú */
.botones-tema { display: flex; gap: 6px; }
.botones-tema button { width: 38px; height: 38px; padding: 0; border-radius: 10px; font-size: 17px; line-height: 38px; }
@media (max-width: 900px) { .btn-fijar-menu { display: none; } }

/* Botón "Cambiar mi clave" del menú encogido: muestra la llave en vez del ícono de apagar */
@media (min-width: 901px) {
  html[data-tema] .menu:not(:hover):not(:focus-within) .menu-pie #miClave::before { content: '🔑'; }
}
/* Los botones del pie del menú (Cambiar mi clave y Cerrar sesión) van uno debajo del otro */
html[data-tema] .menu-pie button { display: block; }