/* ============================================================
   Hoja de estilos general del sistema "Ventas Melendez".
   Por ahora solo contiene los estilos de la pantalla de login
   y del panel de bienvenida posterior al inicio de sesión; el
   resto de los módulos irá sumando sus propios estilos aquí.
   ============================================================ */

:root {
    --color-fondo: #efece4;
    --color-tarjeta: #ffffff;
    --color-texto-principal: #1f2430;
    --color-texto-secundario: #6b7280;
    --color-acento: #1067f2;
    --color-borde: #e2e0d8;
    --color-error: #d1373f;
    --color-error-fondo: #fdecee;
}

* {
    box-sizing: border-box;
}

/* CORRECCIÓN IMPORTANTE: el atributo nativo "hidden" (usado en todo el
   proyecto, ej. botones/insignias con "hidden" desde comprobante.js) tiene la
   misma especificidad CSS que clases como ".boton"/".insignia" (ambas son
   selectores de "1 clase"), que sí definen su propio "display". Como las
   reglas del autor (este archivo) pisan a las del navegador cuando la
   especificidad es igual, un botón con class="boton ..." y el atributo
   "hidden" NO se ocultaba: ".boton { display: inline-flex }" ganaba sobre el
   "[hidden] { display: none }" por defecto del navegador (ej. el botón
   "Créditos" de Venta directa seguía visible aunque el JS le pusiera
   hidden=true). Esta regla, con mayor especificidad, asegura que "hidden"
   siempre oculte el elemento sin importar qué otras clases tenga. */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    min-height: 100vh;
    /* Tipografía de todo el proyecto: Lexend Deca, 12px (ver _Layout.cshtml para el <link> de Google Fonts). */
    font-family: "Lexend Deca", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 12px;
    color: var(--color-texto-principal);
    background-color: var(--color-fondo);
}

/* ---------- Pantalla de inicio de sesión ---------- */

.pagina-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    background-color: var(--color-fondo);
}

.login-tarjeta {
    display: flex;
    width: 100%;
    max-width: 960px;
    min-height: 560px;
    background-color: var(--color-tarjeta);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    text-align: left;
}

.login-panel-formulario {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 56px;
}

.login-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

.login-marca__texto {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.login-marca__nombre {
    font-family: "Lexend Deca", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-texto-principal);
}

.login-marca__nombre-acento {
    color: var(--color-acento);
}

.login-marca__etiqueta {
    font-size: 0.72rem;
    color: var(--color-texto-secundario);
}

.subtexto {
    margin: 0 0 28px;
    font-size: 0.9rem;
    color: var(--color-texto-secundario);
}

.campo-formulario {
    text-align: left;
    margin-bottom: 18px;
}

.campo-formulario label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.campo-formulario__ayuda {
    display: block;
    font-size: 0.78rem;
    color: var(--color-texto-secundario);
    margin-top: 4px;
}

/* Spinner inline sobre un campo de texto mientras se resuelve una consulta
   asíncrona propia del campo (ej. N.° de documento de Cliente/Proveedor
   consultando DNI/RUC en MIGO, ver cliente.js). Genérico a propósito para
   poder reutilizarse en otros campos con el mismo patrón. */
.campo-con-spinner {
    position: relative;
}

.campo-con-spinner .spinner-inline {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: var(--color-acento);
    font-size: 0.95rem;
    pointer-events: none;
}

/* Los campos de Usuario/Contraseña ahora son un input-group real de
   Bootstrap (".input-group"/".input-group-text"/".form-control", cargado
   solo en esta pantalla vía CDN, ver el <head> de IniciarSesion.cshtml).
   Aquí solo se ajusta el color de foco para que combine con el azul de
   marca del sistema, y se corrige el autocompletado del navegador para que
   no pinte el campo de otro color por encima del fondo blanco. */
.login-panel-formulario .form-control:focus {
    border-color: var(--color-acento);
    box-shadow: 0 0 0 0.2rem rgba(16, 103, 242, 0.15);
}

.login-panel-formulario .form-control:-webkit-autofill,
.login-panel-formulario .form-control:-webkit-autofill:hover,
.login-panel-formulario .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    -webkit-text-fill-color: var(--color-texto-principal);
    transition: background-color 5000s ease-in-out 0s;
}

.olvido-contrasena {
    text-align: right;
    margin: -8px 0 20px;
}

.enlace-deshabilitado {
    font-size: 0.8rem;
    color: var(--color-acento);
    text-decoration: none;
    opacity: 0.7;
    cursor: default;
}

.boton-ingresar {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background-color: var(--color-acento);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease-in-out;
}

.boton-ingresar:hover:not(:disabled) {
    filter: brightness(0.95);
}

.boton-ingresar:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.pie-formulario {
    margin-top: 22px;
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
}

.login-copyright {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--color-borde);
}

.login-copyright__logo {
    height: 18px;
    width: auto;
    object-fit: contain;
    opacity: 0.7;
}

.login-copyright__texto {
    font-size: 0.72rem;
    color: var(--color-texto-secundario);
}

.enlace-contacto {
    color: var(--color-acento);
    font-weight: 600;
    text-decoration: none;
}

.mensaje-error {
    background-color: var(--color-error-fondo);
    color: var(--color-error);
    font-size: 0.85rem;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
    text-align: left;
}

.login-panel-ilustracion {
    flex: 1 1 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px;
    background: linear-gradient(160deg, #1067f2 0%, #2f4bd6 55%, #1c2f8f 100%);
    color: #fff;
    overflow: hidden;
}

.login-ilustracion__forma {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
}

.login-ilustracion__forma--uno {
    width: 220px;
    height: 220px;
    top: -60px;
    right: -60px;
}

.login-ilustracion__forma--dos {
    width: 160px;
    height: 160px;
    bottom: -50px;
    left: -40px;
    background-color: rgba(255, 255, 255, 0.06);
}

.login-ilustracion__texto {
    position: relative;
    z-index: 1;
    margin-bottom: 32px;
}

.login-ilustracion__eyebrow {
    margin: 0 0 8px;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

.login-ilustracion__titulo {
    margin: 0 0 10px;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
}

.login-ilustracion__subtitulo {
    margin: 0;
    max-width: 320px;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}

.login-ilustracion__grafico {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.login-ilustracion__imagen {
    width: 100%;
    max-width: 420px;
    height: auto;
}

@media (max-width: 860px) {
    .login-tarjeta {
        max-width: 420px;
        min-height: 0;
    }

    .login-panel-ilustracion {
        display: none;
    }

    .login-panel-formulario {
        padding: 40px 32px;
    }
}

/* ---------- Panel posterior al inicio de sesión ---------- */

.contenedor-principal {
    max-width: 720px;
    margin: 60px auto;
    padding: 0 24px;
}

.panel-bienvenida {
    background-color: var(--color-tarjeta);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.boton-cerrar-sesion {
    margin-top: 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background-color: var(--color-acento);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

/* ============================================================
   Estructura general de la aplicación autenticada
   (barra lateral + barra superior + contenido).
   Diseño responsive: PC, tablet y celular.
   ============================================================ */

:root {
    --ancho-barra-lateral: 250px;
    --alto-barra-superior: 60px;
    --color-lateral-fondo: #1c2333;
    --color-lateral-texto: #cbd3e6;
    --color-lateral-texto-activo: #ffffff;
    --color-lateral-hover: #2a3348;
}

.estructura-app {
    display: flex;
    min-height: 100vh;
}

/* ---------- Barra lateral (menú acordeón) ---------- */

.barra-lateral {
    width: var(--ancho-barra-lateral);
    flex-shrink: 0;
    background-color: var(--color-lateral-fondo);
    color: var(--color-lateral-texto);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    transition: transform 0.2s ease-in-out;
}

.barra-lateral__marca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.menu-lateral {
    padding: 10px 0;
    overflow-y: auto;
    /* flex + min-height:0 para que el menú se achique y haga scroll interno
       en vez de empujar el pie (.info-sesion) fuera de la pantalla cuando
       hay muchos grupos abiertos. */
    flex: 1 1 auto;
    min-height: 0;
}

/* ---------- Pie de la barra lateral: Almacén/Caja del usuario logueado ---------- */

.info-sesion {
    margin-top: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.info-sesion__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.info-sesion__item i {
    width: 16px;
    text-align: center;
    opacity: 0.85;
}

.info-sesion__texto {
    min-width: 0;
}

.info-sesion__etiqueta {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.7;
}

.info-sesion__valor {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-lateral-texto-activo);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grupo-menu__titulo {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    color: var(--color-lateral-texto);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 12px 20px;
    cursor: pointer;
}

.grupo-menu__flecha {
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform 0.15s ease-in-out;
}

.grupo-menu--abierto .grupo-menu__flecha {
    transform: rotate(180deg);
}

.grupo-menu__contenido {
    display: none;
    flex-direction: column;
    padding: 4px 0 8px;
}

.grupo-menu--abierto .grupo-menu__contenido {
    display: flex;
}

.enlace-menu {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px 10px 34px;
    color: var(--color-lateral-texto);
    text-decoration: none;
    font-size: 0.9rem;
}

.enlace-menu i {
    width: 16px;
    text-align: center;
    opacity: 0.85;
}

.enlace-menu:hover {
    background-color: var(--color-lateral-hover);
    color: #fff;
}

.enlace-menu--activo {
    background-color: var(--color-acento);
    color: #fff;
}

/* ---------- Área de contenido (barra superior + página) ---------- */

.area-contenido {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: var(--ancho-barra-lateral);
    min-width: 0;
}

.barra-superior {
    height: var(--alto-barra-superior);
    flex-shrink: 0;
    background-color: var(--color-tarjeta);
    border-bottom: 1px solid var(--color-borde);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.barra-superior__titulo {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    flex: 1;
}

.boton-alternar-menu {
    display: none;
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--color-texto-principal);
    cursor: pointer;
    padding: 6px;
}

/* Colapsar/mostrar el menú lateral en PC y tablet ancha (ver el botón en
   _Layout.cshtml y la lógica en sitio.js). Oculto por defecto: solo se
   muestra a partir de 993px (ver media query más abajo) - por debajo de
   ese ancho el menú sigue siendo 100% el modo deslizante de siempre
   (".boton-alternar-menu" / ".barra-lateral--visible"), sin tocar nada. */
.boton-colapsar-menu-pc {
    display: none;
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--color-texto-principal);
    cursor: pointer;
    padding: 6px;
}

.contenido-principal {
    padding: 24px;
    flex: 1;
    min-width: 0;
}

/* ---------- Menú de usuario (esquina superior derecha) ---------- */

.usuario-sesion {
    position: relative;
}

.usuario-sesion__boton {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--color-texto-principal);
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 8px;
}

.usuario-sesion__boton:hover {
    background-color: var(--color-fondo);
}

.usuario-sesion__boton .fa-circle-user {
    font-size: 1.3rem;
    color: var(--color-acento);
}

.usuario-sesion__nombre {
    font-weight: 600;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-usuario {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background-color: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    min-width: 170px;
    overflow: hidden;
    z-index: 30;
}

.menu-usuario--abierto {
    display: block;
}

.menu-usuario__opcion {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.9rem;
    text-align: left;
    padding: 10px 14px;
    cursor: pointer;
    color: var(--color-error);
}

.menu-usuario__opcion:hover {
    background-color: var(--color-error-fondo);
}

/* ---------- Fondo oscurecido del menú lateral en modo celular/tablet ---------- */

.fondo-menu-movil {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 30;
}

.fondo-menu-movil--visible {
    display: block;
}

/* ---------- Panel de bienvenida (Inicio) ---------- */

.panel-bienvenida {
    background-color: var(--color-tarjeta);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* Título de página suelto (Inicio/Index y Error), antes sin clase (heredaba
   el <h1> por defecto del navegador). Se le puso una clase propia para que
   no dependa de ese estilo por defecto, que Bootstrap redefine distinto
   (ver la carga global de Bootstrap en _Layout.cshtml, más abajo en este
   archivo). */
.panel-bienvenida__titulo {
    margin: 0 0 12px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-texto-principal);
}

.accesos-rapidos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.acceso-rapido {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 12px;
    border-radius: 12px;
    background-color: var(--color-fondo);
    color: var(--color-texto-principal);
    text-decoration: none;
    font-weight: 600;
    text-align: center;
}

.acceso-rapido i {
    font-size: 1.6rem;
    color: var(--color-acento);
}

.acceso-rapido:hover {
    filter: brightness(0.97);
}

.boton-cerrar-sesion {
    margin-top: 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background-color: var(--color-acento);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

/* ============================================================
   Responsive: tablet y celular.
   En pantallas angostas la barra lateral se convierte en un
   panel deslizante (off-canvas) que se abre con el botón
   "hamburguesa" de la barra superior.
   ============================================================ */

@media (max-width: 992px) {
    .barra-lateral {
        transform: translateX(-100%);
    }

    .barra-lateral--visible {
        transform: translateX(0);
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
    }

    .area-contenido {
        margin-left: 0;
    }

    .boton-alternar-menu {
        display: inline-flex;
    }
}

/* ---------- PC y tablet ancha (993px en adelante): colapsar/mostrar el menú ----------
   A diferencia del modo celular/tablet angosto de arriba (menú deslizante encima del
   contenido, con fondo oscurecido), acá el menú simplemente se quita del todo y el
   contenido recupera ese espacio - no hay overlay porque no se superpone a nada. */
@media (min-width: 993px) {
    .boton-colapsar-menu-pc {
        display: inline-flex;
    }

    body.menu-lateral-colapsado .barra-lateral {
        transform: translateX(-100%);
    }

    body.menu-lateral-colapsado .area-contenido {
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    .contenido-principal {
        padding: 16px;
    }

    .barra-superior {
        padding: 0 12px;
        gap: 10px;
    }

    .usuario-sesion__nombre {
        display: none;
    }

    .login-panel-formulario {
        padding: 28px 20px;
    }
}

/* ============================================================
   Patrón visual de los mantenedores (Unidad de medida, Marca,
   Categoria, Producto): barra de herramientas (buscador + botón
   "Nuevo"), tabla con columna de acciones, y modal compartido
   para alta/edición.
   ============================================================ */

.tarjeta-modulo {
    background-color: var(--color-tarjeta);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.texto-ayuda-modulo {
    font-size: 0.88rem;
    color: var(--color-texto-secundario);
    margin: -6px 0 18px;
    line-height: 1.5;
}

.barra-herramientas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.campo-busqueda {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 9px 12px;
    background-color: #fff;
}

.campo-busqueda i {
    opacity: 0.5;
}

.campo-busqueda input {
    border: none;
    outline: none;
    flex: 1;
    font-family: inherit;
    font-size: 0.95rem;
    background: transparent;
    color: var(--color-texto-principal);
}

.boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.boton:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.boton-primario {
    background-color: var(--color-acento);
    color: #fff;
}

.boton-primario:hover:not(:disabled) {
    filter: brightness(0.95);
}

.boton-secundario {
    background-color: var(--color-fondo);
    color: var(--color-texto-principal);
}

.boton-secundario:hover:not(:disabled) {
    filter: brightness(0.96);
}

.boton-peligro {
    background-color: var(--color-error-fondo);
    color: var(--color-error);
}

.boton-peligro:hover:not(:disabled) {
    filter: brightness(0.96);
}

.boton-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background-color: var(--color-fondo);
    color: var(--color-texto-principal);
}

.boton-icono:hover {
    filter: brightness(0.95);
}

.boton-icono--editar {
    color: var(--color-acento);
}

.boton-icono--eliminar {
    color: var(--color-error);
}

.boton-icono--credito {
    color: #0d9488;
}

.boton-icono--direcciones {
    color: #b45309;
}

.boton-icono:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: none;
}

/* ---------- Tabla ---------- */

.contenedor-tabla {
    overflow-x: auto;
    border: 1px solid var(--color-borde);
    border-radius: 12px;
}

.tabla-datos {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

.tabla-datos th,
.tabla-datos td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--color-borde);
    font-size: 0.9rem;
}

.tabla-datos th {
    background-color: var(--color-fondo);
    font-weight: 700;
    white-space: nowrap;
}

.tabla-datos tbody tr:hover {
    background-color: #fafaf8;
}

.tabla-datos td.columna-acciones {
    display: flex;
    gap: 8px;
    white-space: nowrap;
}

/* ---------- Menú de acciones ("Acciones ▾" con lista desplegable) ----------
   Para filas con muchas acciones (ej. Comercio › Pedidos: ver, cambiar
   estado, reprogramar, historial, WhatsApp, convertir a venta, replicar),
   en vez de una fila de íconos que no entra bien en tablet/celular, un solo
   botón que despliega la lista completa. Genérico: cualquier pantalla con
   el mismo problema puede reutilizar estas mismas clases. */

.menu-acciones {
    position: relative;
    display: inline-block;
}

.menu-acciones__boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background-color: var(--color-tarjeta);
    color: var(--color-texto-principal);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.menu-acciones__boton:hover {
    filter: brightness(0.96);
}

.menu-acciones__boton i.fa-chevron-down {
    font-size: 0.7rem;
    color: var(--color-texto-secundario);
    transition: transform 0.15s ease;
}

.menu-acciones--abierto .menu-acciones__boton i.fa-chevron-down {
    transform: rotate(180deg);
}

.menu-acciones__lista {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 30;
    min-width: 215px;
    background-color: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(31, 36, 48, 0.16);
    padding: 6px;
    display: none;
}

.menu-acciones--abierto .menu-acciones__lista {
    display: block;
}

.menu-acciones__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    background: none;
    text-align: left;
    font-size: 0.87rem;
    font-family: inherit;
    color: var(--color-texto-principal);
    border-radius: 6px;
    cursor: pointer;
}

.menu-acciones__item:hover {
    background-color: var(--color-fondo);
}

.menu-acciones__item i {
    width: 16px;
    text-align: center;
    color: var(--color-texto-secundario);
}

/* Columna de checkboxes (ej. Pedidos: seleccionar varios para "Generar compra"). */
.tabla-datos th.columna-check,
.tabla-datos td.columna-check {
    width: 40px;
    text-align: center;
}

.tabla-datos .fila-vacia td {
    text-align: center;
    color: var(--color-texto-secundario);
    padding: 24px;
}

/* Modificador para tablas chicas dentro de un modal angosto (ej. el
   desglose de "Cierre caja" por medio de pago): la tabla genérica de arriba
   fuerza min-width: 560px, lo cual en un modal de ~400px empuja a un
   scroll horizontal que corta la columna de montos -- este modificador lo
   anula para esos casos de 2-3 columnas cortas. */
.tabla-datos--compacta {
    min-width: 0;
}

/* Fila de totales al pie de una tabla (ej. "Cierre caja" › Resumen por
   medio de pago, y el total del modal de desglose por origen). */
.tabla-datos tfoot td {
    background-color: var(--color-fondo);
    font-weight: 700;
    border-top: 2px solid var(--color-borde);
}

.insignia {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background-color: var(--color-fondo);
    color: var(--color-texto-secundario);
}

.insignia--activo {
    background-color: #e6f4ea;
    color: #1e7b34;
}

/* Contador numérico junto a un botón (igual que lblPendienteEntrega/
   lblCreditosPendientes en FComprobante.cs: solo se muestra si hay más de 0). */
.insignia--contador {
    background-color: #dc2626;
    color: #fff;
    min-width: 20px;
    justify-content: center;
    padding: 2px 7px;
}

/* ---------- Etiquetas de Catálogo (Catálogo › Etiquetas, Pedido › Nuevo,
   Tablero Pedidos) ---------- */
/* Insignia de una etiqueta: mismo aspecto de píldora que ".insignia", pero el
   color de fondo lo pone cada instancia por su cuenta (estilo inline, con el
   Color guardado en la propia Etiqueta) - ver etiqueta.js/pedidoTablero.js/
   pedidoNuevo.js. El color de texto queda fijo en blanco: los colores que se
   eligen desde un <input type="color"> suelen ser lo bastante saturados/
   oscuros como para que el texto blanco se lea bien encima. */
.insignia-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    background-color: #6b7280;
    white-space: nowrap;
}

/* Círculo de color junto al nombre en la tabla del mantenedor de Etiquetas. */
.muestra-color {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    vertical-align: middle;
}

/* <input type="color"> del formulario de Etiqueta: el navegador ya le pone su
   propio aspecto, solo se ajusta tamaño/borde para que combine con el resto
   de campos ".campo-formulario". */
.campo-color {
    width: 46px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--color-borde, #dee2e6);
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    flex-shrink: 0;
}

/* Fila de un mantenedor con baja lógica (ej. Etiqueta dada de baja): mismo
   criterio visual en toda la tabla, atenuada pero legible, no oculta. */
.fila-inactiva {
    opacity: 0.55;
}

/* Filas seleccionables de una tabla tipo reporte (Pendientes de entrega /
   Créditos): igual que elegir la fila actual (CurrentRow) en un
   DataGridView de escritorio antes de una acción (Confirmar entrega,
   Agregar pago). */
.tabla-datos tbody tr.fila-tabla--seleccionable {
    cursor: pointer;
}

.tabla-datos tbody tr.fila-tabla--seleccionada {
    background-color: #eef2ff;
}

/* ============================================================
   Modal compartido de alta/edición (mismo componente para
   "Nuevo" y para "Editar", como en el sistema de escritorio).
   ============================================================ */

.fondo-modal {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(15, 18, 26, 0.5);
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 50;
}

.fondo-modal--visible {
    display: flex;
}

.ventana-modal {
    background-color: var(--color-tarjeta);
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.ventana-modal--ancha {
    max-width: 860px;
}

.ventana-modal__cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--color-borde);
}

.ventana-modal__titulo {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    flex: 1;
}

.ventana-modal__cerrar {
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--color-texto-secundario);
    cursor: pointer;
    padding: 6px;
}

.ventana-modal__cuerpo {
    padding: 20px 22px;
    overflow-y: auto;
}

.ventana-modal__pie {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid var(--color-borde);
}

/* ---------- Formularios dentro del modal ---------- */

.cuadricula-formulario {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.cuadricula-formulario .campo-formulario--ancho-completo {
    grid-column: 1 / -1;
}

/* Fila de Totales (Afecto / IGV / Total) en Venta directa: 3 columnas en
   vez de las 2 columnas por defecto, para que las tres queden en una sola
   fila. Se define antes de la regla responsive de abajo para que el
   apilado en celular siga ganando ahí. */
.cuadricula-formulario--totales {
    grid-template-columns: repeat(3, 1fr);
}

/* Fila "Fecha de entrega" + "Observación" en Nuevo pedido (ver
   Views/Pedido/Nuevo.cshtml): a diferencia de las demás filas de
   ".cuadricula-formulario", acá las dos columnas NO reparten el espacio a
   la mitad - "Fecha de entrega" se angosta a un ancho fijo y "Observación"
   ocupa todo el resto de la línea. */
.fila-fecha-observacion {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.fila-fecha-observacion .campo-formulario--fecha-entrega {
    flex: 0 0 170px;
}

.fila-fecha-observacion .campo-formulario--observacion {
    flex: 1 1 240px;
}

@media (max-width: 560px) {
    .cuadricula-formulario {
        grid-template-columns: 1fr;
    }

    .fila-fecha-observacion .campo-formulario--fecha-entrega,
    .fila-fecha-observacion .campo-formulario--observacion {
        flex: 1 1 100%;
    }
}

/* Fila final de Venta directa: "Paga con"/"Vuelto" junto con los botones
   "Limpiar"/"Registrar venta", todo en una sola fila (antes los campos
   iban arriba y los botones en un pie aparte). No se tocó ".ventana-modal__pie"
   (se usa en otros modales del sistema) — esta es una fila propia. */
.fila-pago-acciones {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-borde);
}

.fila-pago-acciones .cuadricula-formulario {
    flex: 1 1 260px;
    margin: 0;
}

.fila-pago-acciones__botones {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

@media (max-width: 560px) {
    .fila-pago-acciones {
        flex-direction: column;
        align-items: stretch;
    }

    .fila-pago-acciones__botones {
        justify-content: flex-end;
    }
}

/* Venta directa, fila inferior en DOS grupos ("Importes" = Total/Paga con/Vuelto y
   "Acciones" = botones). Modificador ".fila-pago-acciones--grupos": no afecta a
   "Nuevo pedido", que sigue usando ".fila-pago-acciones" tal cual.
   - Escritorio (>= 992px): dos columnas; cada grupo es un panel y su contenido va
     pegado abajo, asi los botones quedan a la misma altura que los campos
     Total/Paga con/Vuelto (todos con 44px de alto, sin el margen inferior de
     ".campo-formulario").
   - Tablet (< 992px): los grupos se apilan, uno debajo del otro.
   - Celular (<= 575px): Total/Paga con/Vuelto en una sola columna y los botones
     ocupan todo el ancho. */
.fila-pago-acciones--grupos {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 16px;
}

.grupo-pago {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    background-color: #fafafa;
}

.grupo-pago__titulo {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-texto-secundario);
}

.grupo-pago__campos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.grupo-pago__campos .campo-formulario {
    margin-bottom: 0;
}

.grupo-pago__campos .campo-formulario input[type="number"],
.grupo-pago__campos .vista-previa-color--texto {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
}

.grupo-pago__campos .campo-formulario input[type="number"] {
    display: block;
}

.grupo-pago__botones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    align-items: flex-end;
}

.grupo-pago__botones .boton {
    box-sizing: border-box;
    height: 44px;
    justify-content: center;
}

@media (max-width: 991.98px) {
    .fila-pago-acciones--grupos {
        grid-template-columns: minmax(0, 1fr);
    }

    .grupo-pago__botones .boton {
        flex: 1 1 auto;
    }
}

@media (max-width: 575.98px) {
    .grupo-pago__campos {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Botones a todo el ancho de la tarjeta, sin salirse: ".boton" lleva
       "white-space: nowrap" y un min-width automatico igual al texto, asi que
       "Guardar pendiente entrega" desbordaba la tarjeta en pantallas angostas.
       Se permite que el texto baje de linea y que el boton se encoja. */
    .grupo-pago__botones .boton {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        min-height: 44px;
        white-space: normal;
        text-align: center;
        line-height: 1.2;
    }
}

/* ============================================================
   "Nuevo pedido" (Views/Pedido/Nuevo.cshtml) - ajustes responsive.
   Todo va acotado a ".tarjeta-modulo--pedido-nuevo" o a las clases propias
   ".tabla-detalle--min"/".tabla-detalle--apilable", para no cambiar el
   comportamiento de Venta directa, Compra ni los demas modulos.
   - Grillas de formulario: se apilan en una columna hasta 767px (antes solo
     hasta 560px, y en tablet angosta Cliente/Direccion quedaban muy estrechos).
   - Tabla de productos: en celular (<= 575px) cada linea pasa a ser una
     tarjeta (etiqueta a la izquierda, valor a la derecha); en pantallas mas
     anchas es la tabla normal.
   - Tabla del modal de busqueda: ancho minimo + scroll horizontal dentro de
     su contenedor, en vez de aplastar las columnas.
   ============================================================ */
.tarjeta-modulo--pedido-nuevo .cuadricula-formulario > * {
    min-width: 0;
}

.tarjeta-modulo--pedido-nuevo .campo-formulario--linea .boton-icono {
    flex-shrink: 0;
}

.tabla-detalle--min {
    min-width: 600px;
}

.grupo-pago__campos--uno {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 767.98px) {
    .tarjeta-modulo--pedido-nuevo .cuadricula-formulario {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .tarjeta-modulo--pedido-nuevo {
        padding: 16px;
    }

    .tarjeta-modulo--pedido-nuevo .barra-herramientas .boton {
        width: 100%;
        justify-content: center;
    }

    .tarjeta-modulo--pedido-nuevo .seccion-modal__titulo-info {
        margin-left: 0;
        width: 100%;
        white-space: normal;
    }

    .tarjeta-modulo--pedido-nuevo .seccion-modal__titulo-acciones {
        margin-left: 0;
        width: 100%;
    }

    .tarjeta-modulo--pedido-nuevo .seccion-modal__titulo-acciones .boton {
        width: 100%;
        justify-content: center;
    }

    /* Tabla de productos como tarjetas (sin tocar el JS: las etiquetas salen del orden de columnas). */
    .tabla-detalle--apilable,
    .tabla-detalle--apilable tbody,
    .tabla-detalle--apilable tr,
    .tabla-detalle--apilable td {
        display: block;
        width: 100%;
    }

    .tabla-detalle--apilable thead {
        display: none;
    }

    .tabla-detalle--apilable tr {
        padding: 6px 0;
        border-bottom: 1px solid var(--color-borde);
    }

    .tabla-detalle--apilable tbody tr:last-child {
        border-bottom: none;
    }

    .tabla-detalle--apilable td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 6px 12px;
        border-bottom: none;
        text-align: right;
    }

    .tabla-detalle--apilable td::before {
        flex: 0 0 auto;
        font-weight: 600;
        color: var(--color-texto-secundario);
        text-align: left;
    }

    .tabla-detalle--apilable td:nth-child(1)::before { content: "Producto"; }
    .tabla-detalle--apilable td:nth-child(2)::before { content: "Presentación"; }
    .tabla-detalle--apilable td:nth-child(3)::before { content: "Cantidad"; }
    .tabla-detalle--apilable td:nth-child(4)::before { content: "Precio unit."; }
    .tabla-detalle--apilable td:nth-child(5)::before { content: "Importe"; }
    .tabla-detalle--apilable td:nth-child(6)::before { content: none; }

    .tabla-detalle--apilable td input[type="number"] {
        width: 120px;
        flex: 0 0 120px;
    }

    .tabla-detalle--apilable td.columna-acciones {
        justify-content: flex-end;
    }

    /* Fila de "Aún no ha agregado productos": un solo texto centrado, sin etiqueta. */
    .tabla-detalle--apilable .fila-vacia td {
        justify-content: center;
        text-align: center;
    }

    .tabla-detalle--apilable .fila-vacia td::before {
        content: none !important;
    }
}

/* "Venta directa" (Views/Comprobante/Index.cshtml) - ajustes responsive propios,
   ademas de los de ".tarjeta-modulo--pedido-nuevo" que tambien lleva
   (grillas con minmax(0,1fr), tabla de productos como tarjetas). */
@media (max-width: 575.98px) {
    /* Cliente: el combo ocupa toda la fila y "Nuevo"/"Varios" van lado a lado debajo. */
    .tarjeta-modulo--venta-directa .campo-formulario--linea-cliente {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .tarjeta-modulo--venta-directa .campo-formulario--linea-cliente .select2-container {
        flex: 1 1 100%;
        width: 100% !important;
    }

    .tarjeta-modulo--venta-directa .campo-formulario--linea-cliente .boton {
        flex: 1 1 0;
        justify-content: center;
    }

    /* Documento: el resumen (tipo de documento / moneda) baja a su propia linea en vez de cortarse con "...". */
    .tarjeta-modulo--venta-directa .acordeon-seccion__resumen {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .tarjeta-modulo--venta-directa .acordeon-seccion__resumen-info {
        flex: 1 1 100%;
        margin-left: 0;
        padding-left: 0;
        white-space: normal;
    }

    .tarjeta-modulo--venta-directa .acordeon-seccion__contenido {
        padding: 4px 12px 12px;
    }

    /* Etiqueta larga del combo de Cliente: que baje de linea en vez de ensanchar la pagina. */
    .tarjeta-modulo--venta-directa .campo-formulario label {
        overflow-wrap: anywhere;
    }
}

/* Venta directa › modal "Agregar producto": en celular cada producto del
   buscador pasa a ser una tarjeta (nombre arriba, datos con etiqueta, y la
   cantidad + boton "Agregar" abajo) en vez de una tabla de 6 columnas con
   scroll horizontal. En pantallas mas anchas sigue la tabla normal. */
@media (max-width: 575.98px) {
    #fondo-modal-productos {
        padding: 10px;
    }

    .tabla-picker-productos {
        min-width: 0;
    }

    .tabla-picker-productos,
    .tabla-picker-productos tbody,
    .tabla-picker-productos tr,
    .tabla-picker-productos td {
        display: block;
        width: 100%;
    }

    .tabla-picker-productos thead {
        display: none;
    }

    .tabla-picker-productos tbody tr {
        padding: 8px 0;
        border-bottom: 1px solid var(--color-borde);
    }

    .tabla-picker-productos tbody tr:last-child {
        border-bottom: none;
    }

    .tabla-picker-productos td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 4px 12px;
        border-bottom: none;
        text-align: right;
    }

    .tabla-picker-productos td::before {
        flex: 0 0 auto;
        font-weight: 600;
        color: var(--color-texto-secundario);
        text-align: left;
    }

    /* Nombre del producto: destacado, sin etiqueta, ocupa toda la linea. */
    .tabla-picker-productos td:nth-child(1) {
        font-weight: 700;
        font-size: 0.95rem;
        text-align: left;
        justify-content: flex-start;
        overflow-wrap: anywhere;
    }

    .tabla-picker-productos td:nth-child(2)::before { content: "Presentación"; }
    .tabla-picker-productos td:nth-child(3)::before { content: "Precio"; }
    .tabla-picker-productos td:nth-child(4)::before { content: "Stock"; }
    .tabla-picker-productos td:nth-child(5)::before { content: "Cantidad"; }

    .tabla-picker-productos td input[type="number"] {
        width: 110px;
        flex: 0 0 110px;
    }

    /* Boton "Agregar" a todo el ancho (el de la fila lleva solo el icono "+"; se le suma el texto). */
    .tabla-picker-productos td:nth-child(6) {
        padding-top: 8px;
    }

    .tabla-picker-productos td:nth-child(6) .boton-icono {
        width: 100%;
        height: auto;
        padding: 8px 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-family: inherit;
        font-size: 0.9rem;
        font-weight: 600;
    }

    .tabla-picker-productos td:nth-child(6) .boton-icono::after {
        content: "Agregar";
    }

    /* Mensajes "Escriba para buscar..." / "No se encontraron": un solo texto centrado. */
    .tabla-picker-productos .fila-vacia td {
        justify-content: center;
        text-align: center;
        font-weight: 400;
        font-size: 0.85rem;
    }

    .tabla-picker-productos .fila-vacia td::before {
        content: none;
    }
}

/* Venta directa › modal "Enviar comprobante por WhatsApp": el pie tiene 3
   botones (Cerrar / Descargar PDF / Enviar) que en celular no caben en una
   sola fila y se salian por la izquierda. Ahora el pie puede bajar de linea:
   "Enviar" (accion principal) a todo el ancho arriba, y "Cerrar" y
   "Descargar PDF" repartidos 50/50 debajo. */
@media (max-width: 575.98px) {
    #fondo-modal-whatsapp .ventana-modal__pie {
        flex-wrap: wrap;
        padding: 14px 16px;
    }

    #fondo-modal-whatsapp .ventana-modal__pie .boton {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
        max-width: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }

    #fondo-modal-whatsapp #boton-enviar-whatsapp {
        order: -1;
        flex: 1 1 100%;
    }
}

/* Cierre de caja (Views/CajaCierre/Index.cshtml) en celular: los dos botones
   de arriba van lado a lado a mitad de ancho, y la tabla "Resumen por medio
   de pago" pasa a tarjetas (una por medio de pago: nombre arriba, y debajo
   Ingresos / Salidas / Neto con su etiqueta, tomada de data-label) mas una
   tarjeta de Total, en vez de una tabla de 4 columnas cortada a la derecha. */
@media (max-width: 575.98px) {
    .tarjeta-modulo--cierre-caja .barra-herramientas {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .tarjeta-modulo--cierre-caja .barra-herramientas .boton {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }

    .tabla-cierre-resumen {
        min-width: 0;
    }

    .tabla-cierre-resumen,
    .tabla-cierre-resumen tbody,
    .tabla-cierre-resumen tfoot,
    .tabla-cierre-resumen tr,
    .tabla-cierre-resumen td {
        display: block;
        width: 100%;
    }

    .tabla-cierre-resumen thead {
        display: none;
    }

    .tabla-cierre-resumen tbody tr,
    .tabla-cierre-resumen tfoot tr {
        padding: 6px 0;
        border-bottom: 1px solid var(--color-borde);
    }

    .tabla-cierre-resumen tfoot tr {
        background-color: var(--color-fondo);
        border-bottom: none;
    }

    .tabla-cierre-resumen td,
    .tabla-cierre-resumen tfoot td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 5px 14px;
        border: none;
        text-align: right;
    }

    .tabla-cierre-resumen td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-weight: 600;
        color: var(--color-texto-secundario);
        text-align: left;
    }

    /* Primera celda (nombre del medio / "Total"): titulo de la tarjeta, sin etiqueta. */
    .tabla-cierre-resumen td:first-child {
        justify-content: flex-start;
        text-align: left;
        font-weight: 700;
        font-size: 0.95rem;
    }

    .tabla-cierre-resumen td:first-child::before {
        content: none;
    }

    .tabla-cierre-resumen .fila-vacia td {
        justify-content: center;
        text-align: center;
    }
}

/* Mis ventas (Views/MisVentas/Index.cshtml) en celular: la tabla "Detalle" tiene
   muchas columnas (vienen del procedimiento almacenado), asi que en <= 767px
   cada documento pasa a ser una tarjeta (etiqueta a la izquierda, valor a la
   derecha, tomadas de data-label que pone misVentas.js) con los botones de
   accion al final a todo el ancho. Mantiene el color por estado de la fila y
   el clic en la tarjeta para seleccionarla. */
@media (max-width: 767.98px) {
    #ContenedorTablaDetalle {
        max-height: none !important;
        overflow-x: visible;
    }

    .tabla-ventas-apilable,
    .tabla-ventas-apilable tbody,
    .tabla-ventas-apilable tr,
    .tabla-ventas-apilable td {
        display: block;
        width: 100%;
    }

    .tabla-ventas-apilable thead {
        display: none;
    }

    .tabla-ventas-apilable tbody tr {
        border: 1px solid var(--color-borde);
        border-radius: 12px;
        padding: 6px 0;
        margin-bottom: 12px;
        overflow: hidden;
    }

    .tabla-ventas-apilable td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 5px 14px;
        border: none;
        text-align: right;
        font-size: 0.82rem;
        overflow-wrap: anywhere;
    }

    .tabla-ventas-apilable td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 45%;
        font-weight: 600;
        color: var(--color-texto-secundario);
        text-align: left;
    }

    .tabla-ventas-apilable td.celda-acciones-venta {
        display: block;
        padding-top: 8px;
    }

    .tabla-ventas-apilable td.celda-acciones-venta::before {
        content: none;
    }

    .tabla-ventas-apilable td.celda-acciones-venta .btn-group {
        display: flex;
        width: 100%;
    }

    .tabla-ventas-apilable td.celda-acciones-venta .btn {
        flex: 1 1 0;
        padding: 8px 0;
    }

    /* Mensajes "Presione Buscar..." / "No hay documentos": un solo texto centrado. */
    .tabla-ventas-apilable td:not([data-label]) {
        justify-content: center;
        text-align: center;
    }
}

/* :not(.form-control) evita que este estilo genérico (usado en 23 archivos
   de mantenedores del sistema) choque con Bootstrap ".form-control" en
   pantallas que sí lo usan explícitamente (por ahora, solo el login) —
   Bootstrap ya trae su propio borde/radio/padding para esos campos. */
.campo-formulario input[type="text"]:not(.form-control),
.campo-formulario input[type="number"]:not(.form-control),
.campo-formulario input[type="date"]:not(.form-control),
.campo-formulario select:not(.form-select),
.campo-formulario textarea:not(.form-control) {
    width: 100%;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--color-texto-principal);
    background-color: #fff;
}

.campo-formulario textarea {
    resize: vertical;
    min-height: 80px;
}

.campo-formulario input:focus,
.campo-formulario select:focus,
.campo-formulario textarea:focus {
    outline: none;
    border-color: var(--color-acento);
}

.campo-formulario input[readonly] {
    background-color: #f3f4f6;
    color: var(--color-texto-secundario, #555);
}

/* ---------- Selector de bandera/prefijo de país (intl-tel-input) en el
   campo Teléfono de Cliente y Proveedor (ver cliente.js/proveedor.js,
   itiTelefono). El input usa "form-control" de Bootstrap (cargado
   globalmente en _Layout.cshtml) en vez del estilo "campo-formulario"
   genérico de arriba -- a pedido del cliente, para que se vea con el
   aspecto redondeado/con foco de Bootstrap en vez del look por defecto,
   más plano, de la librería. Hacen falta dos ajustes:
   1) el ancho del contenedor que arma la librería (".iti", inline-block
      por defecto) para que ocupe todo el campo, igual que los demás
      inputs del formulario.
   2) en itiTelefono se configuró "dropdownContainer: document.body" para
      que la lista de países (".iti__country-list") se pegue directo al
      <body> en vez de quedar anidada dentro de ".iti" -- este campo vive
      dentro de un modal del sistema propio (".ventana-modal__cuerpo",
      que tiene "overflow-y: auto") y sin esto la lista quedaría
      recortada por ese scroll, sin importar el z-index. Al vivir en el
      <body>, el z-index de abajo compite contra ".fondo-modal"
      (z-index: 50 más abajo), por eso se sube a 60. */
.campo-formulario .iti {
    display: block;
    width: 100%;
}

.iti__country-list {
    z-index: 60;
}

/* "Venta directa" › modal de envío por WhatsApp: nota sobre el adjunto. */
#textoAdjuntoWhatsapp {
    display: block;
    font-size: 0.85rem;
    color: var(--color-texto-secundario, #555);
    font-style: italic;
}

.campo-formulario--linea {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- Select2 (Venta directa › combo buscable de Cliente) ---------- */
/* La caja de Select2 crece para ocupar el espacio disponible; los botones
   "Nuevo"/"Varios" mantienen su ancho. */
.campo-formulario--linea-cliente .select2-container {
    flex: 1 1 auto;
    min-width: 0;
}

.campo-formulario--linea-cliente .boton {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 560px) {
    /* En celular, el combo y los botones se apilan en vez de amontonarse en una sola fila. */
    .campo-formulario--linea-cliente {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Ajustes para que Select2 se vea IGUAL que los <select> normales del
   sistema (mismo border/radio/padding/tipografía que ".campo-formulario
   select", ver arriba — ej. el combo de Moneda de Venta directa). Select2
   reemplaza visualmente al <select> original por este span, así que la
   regla ".campo-formulario select" ya no le aplica: hay que repetir aquí
   los mismos valores en vez de heredarlos. */
.campo-formulario .select2-container--default .select2-selection--single {
    height: auto;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    background-color: #fff;
    padding: 9px 34px 9px 12px;
}

.campo-formulario .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.3;
    color: var(--color-texto-principal);
}

.campo-formulario .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #8a90a2;
}

.campo-formulario .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 6px;
    height: 100%;
}

.campo-formulario .select2-container--default.select2-container--focus .select2-selection--single,
.campo-formulario .select2-container--default.select2-container--open .select2-selection--single {
    outline: none;
    border-color: var(--color-acento);
}

.select2-dropdown {
    border-color: var(--color-borde);
    border-radius: 10px;
    overflow: hidden;
    font-family: inherit;
    font-size: 0.95rem;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 6px 10px;
    font-family: inherit;
    font-size: 0.95rem;
}

.select2-search--dropdown .select2-search__field:focus {
    outline: none;
    border-color: var(--color-acento);
}

.select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-acento) !important;
}

/* Acordeón (ej. sección "Documento" en Venta directa, cerrado por defecto) */
.acordeon-seccion {
    margin-bottom: 20px;
    padding-bottom: 4px;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
}

/* Cerrado: quitar el espacio extra de abajo y achicar un poco el
   encabezado para que el grupo ocupe menos alto cuando no se necesita ver
   su contenido. */
.acordeon-seccion:not([open]) {
    padding-bottom: 0;
}

.acordeon-seccion:not([open]) .acordeon-seccion__resumen {
    padding: 8px 16px;
}

.acordeon-seccion__resumen {
    margin: 0;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.acordeon-seccion__resumen::-webkit-details-marker {
    display: none;
}

.acordeon-seccion__flecha {
    font-size: 0.8rem;
    transition: transform 0.15s ease-in-out;
    color: var(--color-texto-secundario);
}

/* Resumen (tipo de documento / moneda elegidos) al costado del título,
   visible aunque el acordeón esté cerrado. */
.acordeon-seccion__resumen-info {
    margin-left: auto;
    padding-left: 8px;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acordeon-seccion[open] .acordeon-seccion__flecha {
    transform: rotate(90deg);
}

.acordeon-seccion__contenido {
    padding: 4px 16px 16px;
}

.grupo-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.opcion-radio,
.opcion-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
}

/* Checkbox "Marcar pedido como urgente" (Pedido › Nuevo): resaltado en rojo
   para que no pase desapercibido entre el resto de campos del formulario,
   mismo tono ya usado para "urgente/atención" en el resto del sistema
   (".insignia--contador", "#dc2626"). */
.opcion-check--urgente {
    color: #dc2626;
    font-weight: 600;
}

/* Variante en columna (una opción por línea), usada en formularios donde las
   etiquetas son largas y no caben cómodamente en fila (ej. forma de crédito
   del cliente) o en pantallas angostas. */
.grupo-opciones--columna {
    flex-direction: column;
    gap: 10px;
}

/* Opción de radio que trae, a la derecha, un campo adicional que solo aplica
   a esa opción (ej. "Cantidad de días" + input numérico de días). */
.opcion-radio--con-campo {
    flex-wrap: wrap;
}

.campo-formulario .opcion-radio--con-campo .campo-en-linea {
    width: 90px;
    margin-left: 4px;
}

.campo-formulario .opcion-radio--con-campo .campo-en-linea:disabled {
    background-color: var(--color-fondo-deshabilitado, #f1f2f6);
    cursor: not-allowed;
}

/* ---------- Lista de permisos (Configuración › Usuario) ---------- */
.lista-permisos__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.lista-permisos {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 4px 12px;
}

.lista-permisos__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--color-borde);
}

.lista-permisos__item:last-child {
    border-bottom: none;
}

.lista-permisos__vacio {
    padding: 12px 0;
    font-size: 0.88rem;
    color: var(--color-texto-secundario);
}

/* ---------- Ícono de usuario (Configuración › Usuario) ---------- */
.selector-icono {
    display: flex;
    align-items: center;
    gap: 14px;
}

.selector-icono__vista-previa {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-borde);
    background-color: var(--color-fondo);
}

/* ---------- Logo de la empresa (Configuración › Empresa) ---------- */
.selector-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.selector-logo__vista-previa {
    width: 140px;
    height: 90px;
    border-radius: 10px;
    object-fit: contain;
    border: 1px solid var(--color-borde);
    background-color: var(--color-fondo);
    padding: 6px;
}

.selector-logo__sin-imagen {
    width: 140px;
    height: 90px;
    border-radius: 10px;
    border: 1px dashed var(--color-borde);
    background-color: var(--color-lateral-fondo);
    color: var(--color-texto-secundario);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    text-align: center;
    padding: 8px;
}

/* ---------- Secciones internas del modal de Producto (unidades y fraccionamiento) ---------- */

.seccion-modal {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed var(--color-borde);
}

.seccion-modal__titulo {
    margin: 0 0 12px;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Título de sección con botones de acción al costado (ej. "Cliente" en
   Venta directa: Nuevo / Varios). El modificador permite que, si no hay
   espacio, los botones bajen a una segunda línea en vez de desbordar. */
.seccion-modal__titulo--con-acciones {
    flex-wrap: wrap;
    row-gap: 8px;
}

.seccion-modal__titulo-acciones {
    margin-left: auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Info corta al costado del título (ej. "3 productos agregados" en
   Productos). Si no hay botones de acción después, este mismo elemento
   empuja el texto hacia la derecha. */
.seccion-modal__titulo-info {
    margin-left: auto;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
    white-space: nowrap;
}

.fila-agregar-detalle {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 14px;
}

.fila-agregar-detalle .campo-formulario {
    margin-bottom: 0;
    flex: 1;
    min-width: 120px;
}

.tabla-detalle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.tabla-detalle th,
.tabla-detalle td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-borde);
    text-align: left;
}

.tabla-detalle th {
    background-color: var(--color-fondo);
}

.mensaje-modulo {
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.88rem;
}

.mensaje-modulo--error {
    background-color: var(--color-error-fondo);
    color: var(--color-error);
}

.mensaje-modulo--exito {
    background-color: #e6f4ea;
    color: #1e7b34;
}

/* ============================================================
   Paginación para las tablas de tipo mantenedor (Unidad de
   medida, Marca, Categoria, Subcategorias, Producto, Cliente,
   Recibos...). Los procedimientos almacenados de listado no
   soportan OFFSET/FETCH, así que la paginación se hace en el
   navegador sobre la lista ya cargada por AJAX.
   ============================================================ */

.paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
}

.paginacion__info {
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
}

.paginacion__botones {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.paginacion__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background-color: #fff;
    color: var(--color-texto-principal);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.paginacion__numero:hover {
    background-color: var(--color-fondo);
}

.paginacion__numero--activo {
    background-color: var(--color-acento);
    border-color: var(--color-acento);
    color: #fff;
}

@media (max-width: 560px) {
    .paginacion {
        justify-content: center;
        text-align: center;
    }
}

/* ============================================================
   Pantalla "Configuración › Color del sistema".
   ============================================================ */

.tarjeta-modulo--angosta {
    max-width: 640px;
}

.subtexto-modulo {
    color: var(--color-texto-secundario);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0 0 20px;
}

.fila-color {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 18px;
    margin-bottom: 4px;
}

.fila-color .campo-formulario {
    margin-bottom: 0;
}

.fila-color input[type="color"] {
    width: 64px;
    height: 40px;
    padding: 2px;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    background-color: #fff;
    cursor: pointer;
}

.fila-color input[type="text"] {
    width: 140px;
}

.vista-previa-color {
    width: 64px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--color-borde);
    background-color: var(--color-lateral-fondo);
}

.ventana-modal__pie--sin-borde {
    padding: 20px 0 0;
    border-top: none;
}

@media (max-width: 560px) {
    .fila-color {
        gap: 12px;
    }
}

/* ============================================================
   Pantalla "Configuración › Formato de impresión".
   ============================================================ */

.opciones-formato {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.opcion-formato {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
}

.opcion-formato input[type="radio"] {
    margin: 0;
}

.opcion-formato--activa {
    border-color: var(--color-acento);
}

.vista-previa-formato {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 12px;
    background-color: var(--color-fondo);
    border: 1px dashed var(--color-borde);
    border-radius: 12px;
}

.vista-previa-formato__etiqueta {
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
    text-align: center;
}

.documento-simulado {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    font-family: Arial, Helvetica, sans-serif;
    color: #222;
    overflow: hidden;
    flex-shrink: 0;
}

.documento-simulado--ticket {
    width: 96px;
    min-height: 216px;
    padding: 6px 5px;
    font-size: 4.6px;
    line-height: 1.35;
}

.documento-simulado--a4 {
    width: 252px;
    height: 357px;
    padding: 12px;
    font-size: 5px;
    line-height: 1.4;
}

.documento-simulado--a5 {
    width: 178px;
    height: 252px;
    padding: 9px;
    font-size: 4.6px;
    line-height: 1.4;
}

.documento-simulado__centro {
    text-align: center;
}

.documento-simulado__negrita {
    font-weight: 700;
}

.documento-simulado__linea {
    border-top: 1px dashed #999;
    margin: 3px 0;
}

.documento-simulado__linea-solida {
    border-top: 1px solid #999;
    margin: 3px 0;
}

.documento-simulado__fila {
    display: flex;
    justify-content: space-between;
    gap: 4px;
}

.documento-simulado__tabla {
    width: 100%;
    border-collapse: collapse;
    margin: 3px 0;
}

.documento-simulado__tabla th,
.documento-simulado__tabla td {
    border: 1px solid #ccc;
    padding: 1px 2px;
    text-align: left;
}

.documento-simulado__cabecera-a4 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}

.documento-simulado__caja-tipo {
    border: 1px solid #999;
    border-radius: 3px;
    padding: 3px 5px;
    text-align: center;
}

.documento-simulado__totales {
    margin-left: auto;
    width: 60%;
}

/* ============================================================
   Pantalla "Configuración › Whatsapp QR".
   ============================================================ */

.cuadricula-plantilla {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
}

@media (max-width: 720px) {
    .cuadricula-plantilla {
        grid-template-columns: 1fr;
    }
}

.columna-plantilla-formulario textarea {
    width: 100%;
    resize: vertical;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.9rem;
}

.fila-herramientas-texto {
    display: flex;
    gap: 8px;
    margin: 2px 0 8px;
}

.panel-emojis {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px;
    margin-bottom: 12px;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    background-color: var(--color-fondo);
    max-height: 140px;
    overflow-y: auto;
}

.boton-emoji {
    border: none;
    background: none;
    font-size: 1.25rem;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
}

.boton-emoji:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

.chips-variables {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 20px;
}

.chip-variable {
    border: 1px solid var(--color-borde);
    background-color: var(--color-fondo);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.75rem;
    cursor: pointer;
    font-family: monospace;
    color: var(--color-texto-principal);
}

.chip-variable:hover {
    border-color: var(--color-acento);
    color: var(--color-acento);
}

.opcion-formato--casilla {
    font-weight: 500;
    gap: 10px;
}

.columna-plantilla-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.documento-simulado--whatsapp {
    width: 100%;
    max-width: 320px;
    min-height: 220px;
    background-color: #e5ddd5;
    border-radius: 12px;
    padding: 14px;
    font-size: 0.78rem;
    line-height: 1.45;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.documento-simulado--whatsapp .burbuja {
    background-color: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    white-space: pre-wrap;
}

.documento-simulado--whatsapp .burbuja__detalle {
    margin-top: 8px;
    font-family: monospace;
    font-size: 0.7rem;
    white-space: pre-wrap;
    border-top: 1px dashed #ccc;
    padding-top: 6px;
}

.documento-simulado--whatsapp .burbuja__adjunto {
    margin-top: 8px;
    padding: 6px 8px;
    border: 1px dashed #999;
    border-radius: 6px;
    font-size: 0.72rem;
    color: #555;
}

.estado-proveedor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.estado-proveedor--configurado {
    background-color: rgba(34, 160, 90, 0.14);
    color: #1f8a4d;
}

.estado-proveedor--pendiente {
    background-color: rgba(200, 60, 60, 0.12);
    color: #b23a3a;
}

/* ============================================================
   Pantalla "Venta directa" (Comprobante).
   ============================================================ */

.vista-previa-color--texto {
    width: auto;
    height: auto;
    padding: 9px 12px;
    background-color: var(--color-fondo);
    color: var(--color-texto-principal);
    font-weight: 600;
    font-size: 0.95rem;
}

.vista-previa-color--total {
    background-color: var(--color-acento);
    color: #fff;
}

.campo-formulario--linea input[type="text"],
.campo-formulario--linea input[type="number"] {
    flex: 1;
}

.tabla-detalle input[type="number"],
.tabla-detalle input[type="text"],
.tabla-detalle select {
    width: 100%;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 0.85rem;
}

.tabla-detalle td.columna-acciones {
    text-align: center;
}
/* ---------- Pedidos (Proceso comercial > Pedidos) ---------- */
/* Filtros de fecha/estado directamente dentro de ".barra-herramientas"
   (no van dentro de un ".campo-formulario", que es el que normalmente le
   da estilo a inputs/selects dentro de formularios/modales), así que se
   repite aquí el mismo estilo de campo para que se vean igual. */
.barra-herramientas input[type="date"].campo-filtro-fecha,
.barra-herramientas select.campo-filtro-estado {
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--color-texto-principal);
    background-color: #fff;
}

.barra-herramientas input[type="date"].campo-filtro-fecha {
    width: 160px;
}

.barra-herramientas select.campo-filtro-estado {
    width: 180px;
}

/* Rango de fecha de entrega (control compartido daterangepicker). */
.barra-herramientas .campo-filtro-rango {
    width: 230px;
    flex: 0 0 auto;
}

@media (max-width: 600px) {
    .barra-herramientas input[type="date"].campo-filtro-fecha,
    .barra-herramientas select.campo-filtro-estado,
    .barra-herramientas .campo-filtro-rango {
        width: 100%;
    }
}

/* Lista de Pedidos en vista móvil/tablet angosta: la tabla pasa a "tarjetas"
   (una por pedido, etiqueta a la izquierda y valor a la derecha; las
   etiquetas salen del atributo data-label que pone pedidoLista.js), letra
   más chica en celular, y el botón "Acciones" ocupa todo el ancho (en móvil
   abre un modal de botones en vez del menú desplegable). */
@media (max-width: 767.98px) {
    .tarjeta-modulo--pedidos .tabla-datos--apilable {
        min-width: 0;
    }

    .tarjeta-modulo--pedidos .tabla-datos--apilable,
    .tarjeta-modulo--pedidos .tabla-datos--apilable tbody,
    .tarjeta-modulo--pedidos .tabla-datos--apilable tr,
    .tarjeta-modulo--pedidos .tabla-datos--apilable td {
        display: block;
        width: 100%;
    }

    .tarjeta-modulo--pedidos .tabla-datos--apilable thead {
        display: none;
    }

    .tarjeta-modulo--pedidos .tabla-datos--apilable tbody tr {
        border: 1px solid var(--color-borde);
        border-radius: 12px;
        padding: 6px 0;
        margin-bottom: 12px;
    }

    .tarjeta-modulo--pedidos .tabla-datos--apilable td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 6px 12px;
        border-bottom: none;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .tarjeta-modulo--pedidos .tabla-datos--apilable td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-weight: 600;
        color: var(--color-texto-secundario);
        text-align: left;
    }

    /* Celdas sin etiqueta (check y acciones): sin "::before", ocupan todo el ancho. */
    .tarjeta-modulo--pedidos .tabla-datos--apilable td.columna-check {
        display: none;
    }

    .tarjeta-modulo--pedidos .tabla-datos--apilable td.columna-acciones {
        display: block;
        padding-top: 8px;
    }

    .tarjeta-modulo--pedidos .tabla-datos--apilable td.columna-acciones::before {
        content: none;
    }

    .tarjeta-modulo--pedidos .menu-acciones {
        display: block;
        width: 100%;
    }

    .tarjeta-modulo--pedidos .menu-acciones__boton {
        width: 100%;
        justify-content: center;
    }

    /* En móvil las acciones salen en el modal, nunca en el desplegable. */
    .tarjeta-modulo--pedidos .menu-acciones__lista {
        display: none !important;
    }

    .tarjeta-modulo--pedidos .tabla-datos--apilable .fila-vacia td {
        justify-content: center;
        text-align: center;
    }

    .tarjeta-modulo--pedidos .tabla-datos--apilable .fila-vacia td::before {
        content: none;
    }
}

/* Letra más chica en celular (solo la lista de Pedidos). */
@media (max-width: 575.98px) {
    .tarjeta-modulo--pedidos .tabla-datos--apilable td {
        font-size: 0.78rem;
    }

    .tarjeta-modulo--pedidos .tabla-datos--apilable td::before {
        font-size: 0.72rem;
    }

    .tarjeta-modulo--pedidos .barra-herramientas input,
    .tarjeta-modulo--pedidos .barra-herramientas select,
    .tarjeta-modulo--pedidos .barra-herramientas .boton {
        font-size: 0.82rem;
    }

    .tarjeta-modulo--pedidos .insignia {
        font-size: 0.7rem;
    }

    .tarjeta-modulo--pedidos .menu-acciones__boton {
        font-size: 0.78rem;
    }
}

/* Insignia de Estado del pedido (SOLICITADO / EN PROCESO / ATENDIDO /
   VENTA GENERADA): reutiliza el componente ".insignia" (píldora) ya usado
   para "Activo"/contadores en el resto del sistema, con un color por estado. */
.insignia--solicitado {
    background-color: #e8eefc;
    color: #1067f2;
}

.insignia--en-proceso {
    background-color: #fff4e0;
    color: #b45309;
}

.insignia--atendido {
    background-color: #e6f7f3;
    color: #0d9488;
}

.insignia--venta-generada {
    background-color: #f1e9fb;
    color: #7c3aed;
}

/* ---------- Selector de coordenadas (modal reutilizable, ver
   Views/Shared/_ModalSelectorCoordenadas.cshtml y
   wwwroot/js/selectorCoordenadas.js) ---------- */
.selector-coordenadas__mapa {
    height: 320px;
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--color-borde);
}

.selector-coordenadas__ayuda {
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
}

@media (max-width: 576px) {
    .selector-coordenadas__mapa {
        height: 260px;
    }
}

/* Lista de sugerencias del buscador de direcciones (autocompletado
   mientras se escribe, con Nominatim o Google Places - ver
   selectorCoordenadas.js) - flota debajo del campo de texto y el botón
   "Buscar", por encima del mapa. */
.selector-coordenadas__sugerencias {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Por encima de las capas internas de Leaflet (tilePane/markerPane/
       popupPane llegan hasta z-index 700 dentro de este mismo modal, ver
       .fondo-modal) y de los controles de Google Maps, para que la lista
       de sugerencias no quede tapada por el mapa. */
    z-index: 1000;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    max-height: 220px;
    overflow-y: auto;
}

.selector-coordenadas__sugerencia {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--color-borde);
}

.selector-coordenadas__sugerencia:last-child {
    border-bottom: none;
}

.selector-coordenadas__sugerencia:hover {
    background-color: #f1f5fb;
}

/* Modal "maximizado" (botón junto a cerrar, ver selectorCoordenadas.js):
   ocupa casi toda la pantalla y el mapa crece para llenar el espacio
   sobrante, para buscar/ajustar el punto con más comodidad. */
.ventana-modal--maximizada {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    height: calc(100vh - 32px);
    max-height: calc(100vh - 32px);
}

.ventana-modal--maximizada .ventana-modal__cuerpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ventana-modal--maximizada .selector-coordenadas__mapa {
    flex: 1;
    height: auto;
    min-height: 200px;
}

/* ============================================================
   Sección "Automatización (API para N8N)" dentro del modal de editar
   plantilla de Whatsapp QR (Configuración › Whatsapp QR) -- ver
   scripts-bd/2026-09-25_recordatorio_pago_vencido.sql.
   ============================================================ */
.seccion-automatizacion {
    margin-top: 6px;
}

.fila-token-automatizacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.fila-token-automatizacion input {
    flex: 1;
    min-width: 180px;
    font-family: monospace;
}

/* ============================================================
   Control único de rango de fechas (bootstrap-daterangepicker), compartido
   por Tablero de Pedidos, Reportes > Mensajería pagos vencidos, Mis ventas
   y Mis compras (ver inicializarRangoFechas en sitio.js). Se sube el
   z-index por encima de los modales de Bootstrap porque el popup del
   calendario puede abrirse dentro de un ".card" que está detrás de un
   modal (mismo caso ya resuelto para el mapa compartido, ver
   .ventana-modal--maximizada arriba); centralizado acá en vez de repetir
   este <style> en cada pantalla que usa el control.
   ============================================================ */
.daterangepicker {
    z-index: 1090;
}

/* Cloudflare Turnstile en el login (verificación anti-robots) */
.contenedor-turnstile {
    display: flex;
    justify-content: center;
    min-height: 65px;
    margin: 0.75rem 0 1rem;
}