/* CONTROLES APOLO: SOLO MOVIL. Escritorio conserva sus estilos existentes. */
@media screen and (max-width: 767px) {
    .controles,
    .controles-flotantes,
    .header-vendedor-controles,
    .admin-header-controles,
    .tienda-public-controls,
    #apolo-controles-moviles {
        position: fixed !important;
        top: auto !important;
        right: 10px !important;
        bottom: 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;
        padding: 7px 6px !important;
        margin: 0 !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,
    #apolo-controles-moviles > .letra-indicador {
        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;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        border: 2px solid #b99a45 !important;
        border-radius: 50% !important;
        background: #fff !important;
        color: #5b2a78 !important;
        font-family: "Nunito",Arial,sans-serif !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-align: center !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,.50) !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,
    body.modo-oscuro #apolo-controles-moviles > .letra-indicador {
        background: #202020 !important;
        color: #eee !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: 8px !important;
        bottom: 8px !important;
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        padding: 6px 5px !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,
    #apolo-controles-moviles > .letra-indicador {
        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;
}