/* APOLO - SOLO CONTROLES MOVILES - REGLA FINAL */
@media screen and (max-width:900px), screen and (max-device-width:900px), (pointer:coarse){
  .controles, .controles-flotantes, .header-vendedor-controles, .admin-header-controles, .tienda-public-controls, #apolo-controles-moviles{
    position:fixed !important;
    top:auto !important; bottom:14px !important;
    right:10px !important; left:auto !important;
    transform:none !important;
    z-index:2147483647 !important;
    display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important;
    align-items:center !important; justify-content:center !important;
    gap:5px !important;
    width:54px !important; min-width:54px !important; max-width:54px !important;
    height:auto !important; min-height:0 !important; max-height:none !important;
    margin:0 !important; padding:7px 6px !important; box-sizing:border-box !important;
    overflow:visible !important;
    background:#fff !important; border:2px solid #b99a45 !important;
    border-radius:30px !important; box-shadow:0 4px 18px rgba(0,0,0,.22) !important;
  }
  .controles button, .controles .letra-indicador, .controles-flotantes button, .controles-flotantes .letra-indicador,
  .header-vendedor-controles button, .header-vendedor-controles .letra-indicador,
  .admin-header-controles button, .admin-header-controles .letra,
  .tienda-public-controls button, .tienda-public-controls .tienda-a,
  #apolo-controles-moviles > button, #apolo-controles-moviles > .letra-indicador, #apolo-controles-moviles > .letra{
    width:40px !important; height:40px !important; min-width:40px !important; min-height:40px !important;
    max-width:40px !important; max-height:40px !important; flex:0 0 40px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    margin:0 !important; padding:0 !important; box-sizing:border-box !important;
    border:2px solid #b99a45 !important; border-radius:50% !important;
    background:#fff !important; color:#5b2a78 !important;
    font-size:16px !important; font-weight:800 !important; line-height:1 !important;
  }
  body{padding-right:0 !important;}
  body.modo-oscuro .controles, body.modo-oscuro .controles-flotantes, body.modo-oscuro .header-vendedor-controles,
  body.modo-oscuro .admin-header-controles, body.modo-oscuro .tienda-public-controls, body.modo-oscuro #apolo-controles-moviles{
    background:#202020 !important; border-color:#b99a45 !important; box-shadow:0 4px 18px rgba(0,0,0,.5) !important;
  }
  body.modo-oscuro .controles button, body.modo-oscuro .controles .letra-indicador, body.modo-oscuro .controles-flotantes button,
  body.modo-oscuro .controles-flotantes .letra-indicador, body.modo-oscuro .header-vendedor-controles button,
  body.modo-oscuro .header-vendedor-controles .letra-indicador, body.modo-oscuro .admin-header-controles button,
  body.modo-oscuro .admin-header-controles .letra, body.modo-oscuro .tienda-public-controls button,
  body.modo-oscuro .tienda-public-controls .tienda-a, body.modo-oscuro #apolo-controles-moviles > button,
  body.modo-oscuro #apolo-controles-moviles > .letra-indicador, body.modo-oscuro #apolo-controles-moviles > .letra{
    background:#202020 !important; color:#eeeeee !important; border-color:#b99a45 !important;
  }
}
@media screen and (max-width:390px){
  .controles,.controles-flotantes,.header-vendedor-controles,.admin-header-controles,.tienda-public-controls,#apolo-controles-moviles{right:7px !important; bottom:10px !important; width:50px !important; min-width:50px !important; max-width:50px !important; padding:5px !important; gap:4px !important;}
  .controles button,.controles .letra-indicador,.controles-flotantes button,.controles-flotantes .letra-indicador,.header-vendedor-controles button,.header-vendedor-controles .letra-indicador,.admin-header-controles button,.admin-header-controles .letra,.tienda-public-controls button,.tienda-public-controls .tienda-a,#apolo-controles-moviles > button,#apolo-controles-moviles > .letra-indicador,#apolo-controles-moviles > .letra{width:36px !important;height:36px !important;min-width:36px !important;min-height:36px !important;max-width:36px !important;max-height:36px !important;flex-basis:36px !important;}
}
/* APolo: paleta unificada de modo oscuro para Main, Admin y Vendedor */
body.modo-oscuro {
  --apolo-fondo-general: #202020;
  --apolo-fondo-contenido: #292929;
  --apolo-morado: #6f2c91;
  --apolo-amarillo: #ffc629;
  background-color: var(--apolo-fondo-general) !important;
  color: #f4f1f6 !important;
}
body.modo-oscuro html,
html:has(body.modo-oscuro) {
  background-color: #202020 !important;
}
/* Header uniforme: se elimina el bloque gris/morado detrás de títulos y menús. */
body.modo-oscuro header,
body.modo-oscuro .header,
body.modo-oscuro .admin-header,
body.modo-oscuro .header-admin,
body.modo-oscuro .header-vendedor,
body.modo-oscuro .header-rol,
body.modo-oscuro .header-contenedor,
body.modo-oscuro .header-principal,
body.modo-oscuro .encabezado-principal,
body.modo-oscuro .navegacion,
body.modo-oscuro .nav-admin,
body.modo-oscuro .admin-nav,
body.modo-oscuro .navegacion-admin,
body.modo-oscuro .vendedor-nav {
  background-color: #202020 !important;
  background-image: none !important;
}
/* Contenedores estructurales mantienen el fondo general, sin franjas de otros tonos. */
body.modo-oscuro main,
body.modo-oscuro .main-content,
body.modo-oscuro .contenido-principal,
body.modo-oscuro .admin-main,
body.modo-oscuro .admin-contenido,
body.modo-oscuro .vendedor-main,
body.modo-oscuro .pagina-informes,
body.modo-oscuro .pagina-admin,
body.modo-oscuro .contenido-pagina,
body.modo-oscuro .contenedor-principal {
  background-color: #202020 !important;
  background-image: none !important;
}
/* Banners, encabezados de página y secciones con contenido usan el mismo gris oscuro. */
body.modo-oscuro .hero,
body.modo-oscuro .page-header,
body.modo-oscuro .admin-page-header,
body.modo-oscuro .informes-encabezado,
body.modo-oscuro .encabezado-pagina,
body.modo-oscuro .encabezado-seccion,
body.modo-oscuro .titulo-pagina,
body.modo-oscuro .titulo-seccion,
body.modo-oscuro .seccion-informe,
body.modo-oscuro .gestion-seccion,
body.modo-oscuro .seccion-contenido,
body.modo-oscuro .panel-contenido,
body.modo-oscuro .contenido-seccion,
body.modo-oscuro .resumen-principal,
body.modo-oscuro .estadisticas-seccion {
  background-color: #292929 !important;
  background-image: none !important;
}
/* Evita fondos heredados distintos en las superficies principales y tarjetas. */
body.modo-oscuro .card,
body.modo-oscuro .tarjeta,
body.modo-oscuro .tarjeta-principal,
body.modo-oscuro .tarjeta-estadistica,
body.modo-oscuro .stat-card,
body.modo-oscuro .estadistica-card,
body.modo-oscuro .producto-card,
body.modo-oscuro .producto,
body.modo-oscuro .formulario-contenedor,
body.modo-oscuro .formulario-seccion,
body.modo-oscuro .tabla-contenedor,
body.modo-oscuro .empty-state,
body.modo-oscuro .estado-vacio,
body.modo-oscuro .sin-productos,
body.modo-oscuro .sin-pedidos {
  background-color: #292929 !important;
  background-image: none !important;
}
/* Solo botones/estados activos conservan el morado y el amarillo de identidad. */
body.modo-oscuro .nav-link.active,
body.modo-oscuro .navegacion a.activo,
body.modo-oscuro .admin-nav a.activo,
body.modo-oscuro .vendedor-nav a.activo,
body.modo-oscuro .enlace-activo,
body.modo-oscuro .boton-principal,
body.modo-oscuro .btn-primary {
  background-color: #6f2c91 !important;
}
body.modo-oscuro .nav-link.active,
body.modo-oscuro .navegacion a.activo,
body.modo-oscuro .admin-nav a.activo,
body.modo-oscuro .vendedor-nav a.activo,
body.modo-oscuro .enlace-activo {
  color: #ffc629 !important;
}