/*
 * Valores de diseño: único lugar donde se escriben esquinas, colores,
 * tamaños de letra, espacios e iconos. El resto del archivo solo usa variables.
 */
:root {
    /* Esquinas: siempre rectas */
    --radio: 0;

    /* Colores */
    --color-primario: #2563eb;
    --color-primario-oscuro: #1d4ed8;
    --color-marca: #1e3a5f;
    --color-texto: #1f2937;
    --color-texto-suave: #6b7280;
    --color-texto-invertido: #fff;
    --color-fondo: #f3f4f6;
    --color-superficie: #fff;
    --color-superficie-suave: #f9fafb;
    --color-neutro: #e5e7eb;
    --color-neutro-oscuro: #d1d5db;
    --color-borde: #e5e7eb;
    --color-borde-campo: #d1d5db;
    --color-menu: #dbeafe;
    --color-menu-borde: #93c5fd;
    --color-exito: #166534;
    --color-exito-fondo: #dcfce7;
    --color-exito-borde: #bbf7d0;
    --color-error: #991b1b;
    --color-error-fondo: #fee2e2;
    --color-error-borde: #fecaca;
    --color-advertencia: #92400e;
    --color-advertencia-fondo: #fef3c7;
    --color-advertencia-borde: #fde68a;
    --color-info: #1e40af;
    --color-info-fondo: #eff6ff;
    --color-info-borde: #bfdbfe;
    --color-precargado: #eff6ff;
    --color-fondo-modal: rgb(17 24 39 / 0.5);

    /* Tamaños de letra */
    --texto-base: 1rem;
    --texto-pequeno: 0.875rem;
    --texto-mini: 0.8rem;
    --texto-subtitulo: 1.1rem;
    --texto-titulo: 1.4rem;
    --fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Espacios */
    --espacio-1: 0.25rem;
    --espacio-2: 0.5rem;
    --espacio-3: 0.75rem;
    --espacio-4: 1rem;
    --espacio-5: 1.5rem;
    --espacio-6: 2rem;

    /* Iconos */
    --icono-tamano: 1em;
    --icono-separacion: 0.4em;

    /* Tablas */
    --ancho-celda-truncada: 16rem;
    --alto-sugerencias: 16rem;
    --ancho-columna-importe: 8rem;
    --ancho-columna-precio: 9.5rem;
    --ancho-columna-acciones: 6.5rem;
    --lado-boton-fila: 2.25rem;
    --lado-boton-fila-chico: 1.75rem;

    /* Imágenes de artículos */
    --ancho-ficha: 52rem;
    --ancho-dialogo-documento: 72rem;
    --sombra-dialogo: 0 24px 64px rgb(15 23 42 / 0.28), 0 4px 12px rgb(15 23 42 / 0.12);
    --lado-foto-ficha: 22rem;
    --lado-imagen-formulario: 12rem;

    /* Bandeja de correo del dashboard */
    --ancho-bandeja-carpetas: 14rem;
    --ancho-bandeja-riel: 2.75rem;
    --ancho-bandeja-lista: 22rem;
    --alto-minimo-bandeja: 24rem;
    --lado-avatar: 2.5rem;
    --ancho-hoja: 52rem;
    --color-etiqueta-clientes: #2563eb;
    --color-etiqueta-proveedores: #d97706;
    --color-etiqueta-facturas: #16a34a;
    --color-etiqueta-cotizaciones: #9333ea;
    --color-avatar-1: #2563eb;
    --color-avatar-2: #0d9488;
    --color-avatar-3: #c2410c;
    --color-avatar-4: #7c3aed;
    --color-avatar-5: #be123c;
    --color-avatar-6: #4d7c0f;
    --color-estrella: #f59e0b;

    /* Menú de aplicaciones (barra fija a la izquierda) */
    --ancho-menu-apps: 5rem;
    --alto-menu-apps-movil: 4.25rem;
    --lado-menu-apps-opcion: 4rem;
    --color-menu-apps: #16263d;
    --color-menu-apps-texto: #cbd5e1;
    --color-menu-apps-hover: rgb(255 255 255 / 0.08);
    --color-menu-apps-activo: rgb(255 255 255 / 0.14);
    --color-menu-apps-acento: #60a5fa;
    --color-insignia: #dc2626;

    /* Menús desplegables de la barra */
    --ancho-menu-panel: 19rem;
    --lado-menu-panel-icono: 2.25rem;
    --sombra-menu-panel: 0 12px 32px rgb(15 23 42 / 0.18), 0 2px 6px rgb(15 23 42 / 0.08);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    border-radius: var(--radio);
}

/* Los componentes con display propio (p. ej. .alerta) deben respetar el atributo hidden */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: var(--texto-base);
    color: var(--color-texto);
    background: var(--color-fondo);
}

.contenido {
    max-width: 48rem;
    margin: 0 auto;
    padding: var(--espacio-5);
}

/* Páginas con tablas de varias columnas (se activa con @section('contenido-clase', 'contenido-ancho')) */
.contenido-ancho {
    max-width: 72rem;
}

.resultado {
    min-height: var(--espacio-5);
    margin: var(--espacio-3) 0 0;
    padding: var(--espacio-2);
    background: var(--color-superficie-suave);
    white-space: pre-wrap;
}

/* Iconos */
.icono {
    font-size: var(--icono-tamano);
    line-height: 1;
    vertical-align: -0.125em;
}

a > .icono,
.boton > .icono,
.alerta > .icono {
    margin-right: var(--icono-separacion);
}

.boton-icono > .icono {
    margin-right: 0;
}

/* Barra de navegación */
.barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-5);
    background: var(--color-marca);
}

.marca {
    color: var(--color-texto-invertido);
    font-weight: 600;
    text-decoration: none;
}

.menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-4);
}

.menu a,
.menu-usuario {
    color: var(--color-menu);
    text-decoration: none;
}

.menu a:hover {
    color: var(--color-texto-invertido);
}

.menu form {
    margin: 0;
}

/* Grupos de menú (Ventas, Compras, Inventario): <details> que despliega un panel. */
.menu-grupo {
    position: relative;
}

.menu-grupo > summary {
    display: flex;
    align-items: center;
    color: var(--color-menu);
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.menu-grupo > summary::-webkit-details-marker {
    display: none;
}

.menu-grupo > summary:hover,
.menu-grupo[open] > summary {
    color: var(--color-texto-invertido);
}

/* La sección donde está el usuario se subraya discretamente. */
.menu-grupo > summary.menu-grupo-activo {
    color: var(--color-texto-invertido);
    box-shadow: inset 0 -2px 0 var(--color-menu-borde);
}

.menu-grupo-flecha {
    margin-left: var(--espacio-1);
    font-size: 0.75em;
    transition: transform 0.2s ease;
}

.menu-grupo[open] .menu-grupo-flecha {
    transform: rotate(180deg);
}

.menu-panel {
    position: absolute;
    top: calc(100% + var(--espacio-3));
    left: 50%;
    z-index: 20;
    width: var(--ancho-menu-panel);
    max-width: calc(100vw - 2 * var(--espacio-4));
    padding: var(--espacio-2);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-top: 3px solid var(--color-primario);
    box-shadow: var(--sombra-menu-panel);
    transform: translateX(-50%);
    animation: menu-panel-entrada 0.18s ease-out;
}

/* Pico que une el panel con su título. */
.menu-panel::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-bottom-color: var(--color-primario);
    margin-bottom: 3px;
}

@keyframes menu-panel-entrada {
    from {
        opacity: 0;
        transform: translate(-50%, -6px);
    }
}

.menu-panel a,
.menu-panel button {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-2) var(--espacio-3);
    color: var(--color-texto);
    text-decoration: none;
    border-left: 2px solid transparent;
}

.menu-panel a:hover,
.menu-panel a:focus-visible,
.menu-panel button:hover,
.menu-panel button:focus-visible {
    color: var(--color-texto);
    background: var(--color-superficie-suave);
    border-left-color: var(--color-primario);
    outline: none;
}

.menu-panel a[aria-current="page"] {
    background: var(--color-precargado);
    border-left-color: var(--color-primario);
}

.menu-panel-icono {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--lado-menu-panel-icono);
    height: var(--lado-menu-panel-icono);
    color: var(--color-primario);
    background: var(--color-precargado);
    border: 1px solid var(--color-menu);
    transition: color 0.15s ease, background 0.15s ease;
}

.menu-panel-icono > .icono {
    margin-right: 0;
    font-size: var(--texto-subtitulo);
}

.menu-panel a:hover .menu-panel-icono,
.menu-panel button:hover .menu-panel-icono,
.menu-panel a[aria-current="page"] .menu-panel-icono {
    color: var(--color-texto-invertido);
    background: var(--color-primario);
    border-color: var(--color-primario);
}

.menu-panel-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.menu-panel-texto strong {
    font-weight: 600;
}

.menu-panel-texto small {
    font-size: var(--texto-mini);
    color: var(--color-texto-suave);
}

/* Elementos del panel que son botones (p. ej. cerrar sesión dentro de un form). */
.menu-panel button {
    width: 100%;
    font: inherit;
    text-align: left;
    background: none;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    cursor: pointer;
}

/* Panel pegado al borde derecho de la barra (menú del usuario): se alinea a la
   derecha de su título para no salirse de la pantalla. */
.menu-panel.menu-panel-derecha {
    right: 0;
    left: auto;
    width: 14rem;
    transform: none;
    animation-name: menu-panel-entrada-derecha;
}

.menu-panel.menu-panel-derecha::before {
    right: var(--espacio-4);
    left: auto;
}

@keyframes menu-panel-entrada-derecha {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}

/* En pantallas angostas la barra se parte en renglones: el panel se alinea a
   la izquierda de su título para no salirse de la pantalla. */
@media (max-width: 767px) {
    .menu-panel {
        left: 0;
        transform: none;
        animation: none;
    }

    .menu-panel::before {
        left: var(--espacio-5);
    }
}

/* Botones */
.boton {
    display: inline-block;
    padding: var(--espacio-2) var(--espacio-4);
    font: inherit;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radio);
    cursor: pointer;
}

.boton-principal {
    color: var(--color-texto-invertido);
    background: var(--color-primario);
}

.boton-principal:hover {
    background: var(--color-primario-oscuro);
}

.boton-secundario {
    color: var(--color-primario);
    background: var(--color-superficie);
    border-color: var(--color-primario);
}

.boton-secundario:hover {
    color: var(--color-texto-invertido);
    background: var(--color-primario);
}

.barra .boton-secundario {
    color: var(--color-texto-invertido);
    background: transparent;
    border-color: var(--color-menu-borde);
}

.barra .boton-secundario:hover {
    background: var(--color-primario);
}

/* "Crear pedido" y "Catálogo" de la barra: le ganan al color de los enlaces del menú. */
.menu a.barra-crear-pedido,
.menu a.barra-crear-pedido:hover,
.menu a.barra-catalogo,
.menu a.barra-catalogo:hover {
    color: var(--color-texto-invertido);
}

/* "Instalar aplicación" es para el celular y la tableta; en escritorio no sale
   aunque el navegador ofrezca instalar. */
@media (min-width: 1024px) {
    .barra-instalar-app {
        display: none !important;
    }
}

.boton-suave {
    color: var(--color-texto);
    background: var(--color-neutro);
}

.boton-suave:hover {
    background: var(--color-neutro-oscuro);
}

.boton-peligro {
    color: var(--color-error);
    background: var(--color-superficie);
    border-color: var(--color-error-borde);
}

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

.boton-bloque {
    display: block;
    width: 100%;
}

.boton-icono {
    padding-right: var(--espacio-3);
    padding-left: var(--espacio-3);
}

/* Cards */
.tarjeta {
    margin-bottom: var(--espacio-4);
    padding: var(--espacio-4) var(--espacio-5);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
}

.tarjeta-titulo {
    margin-top: 0;
}

h2.tarjeta-titulo {
    font-size: var(--texto-subtitulo);
}

h1.tarjeta-titulo {
    font-size: var(--texto-titulo);
}

.tarjeta-estrecha {
    max-width: 26rem;
    margin: var(--espacio-6) auto;
    padding: var(--espacio-5);
}

/* Campos de formulario */
.campo {
    margin-bottom: var(--espacio-4);
}

.campo label,
.campo-titulo {
    display: block;
    margin-bottom: var(--espacio-1);
    font-weight: 500;
}

/* Grupo de radios de <x-campo tipo="radio"> */
.opciones-radio {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2) var(--espacio-4);
}

.campo .opciones-radio label {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    font-weight: 400;
}

.campo .opciones-radio input {
    width: auto;
    padding: 0;
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: var(--espacio-2) var(--espacio-3);
    font: inherit;
    border: 1px solid var(--color-borde-campo);
    border-radius: var(--radio);
}

.campo-error input,
.campo-error select {
    border-color: var(--color-error);
}

.contrasena {
    display: flex;
    gap: var(--espacio-2);
}

.contrasena input {
    flex: 1;
}

.casilla {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-4);
}

.ayuda {
    margin: var(--espacio-1) 0 0;
    color: var(--color-texto-suave);
    font-size: var(--texto-pequeno);
}

.enlaces-auth {
    display: flex;
    justify-content: space-between;
    gap: var(--espacio-4);
    margin: var(--espacio-4) 0 0;
    font-size: var(--texto-pequeno);
}

.enlaces-auth a {
    color: var(--color-primario);
}

/* Alertas */
.alerta {
    display: flex;
    align-items: baseline;
    margin-bottom: var(--espacio-4);
    padding: var(--espacio-2) var(--espacio-3);
    border: 1px solid transparent;
    border-radius: var(--radio);
}

.alerta p {
    margin: 0;
}

.alerta-exito {
    color: var(--color-exito);
    background: var(--color-exito-fondo);
    border-color: var(--color-exito-borde);
}

.alerta-error {
    color: var(--color-error);
    background: var(--color-error-fondo);
    border-color: var(--color-error-borde);
}

.alerta-advertencia {
    color: var(--color-advertencia);
    background: var(--color-advertencia-fondo);
    border-color: var(--color-advertencia-borde);
}

.alerta-info {
    color: var(--color-info);
    background: var(--color-info-fondo);
    border-color: var(--color-info-borde);
}

/* Historial de accesos */
.tabla-contenedor {
    padding: 0;
}

/* Las celdas parten el texto (incluso correos y RFC largos) para que la tabla
   siempre quepa en su contenedor, sin barra de desplazamiento. */
.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-pequeno);
}

.tabla th,
.tabla td {
    padding: var(--espacio-2) var(--espacio-3);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
    border-bottom: 1px solid var(--color-borde);
}

.tabla .etiqueta {
    white-space: nowrap;
}

.tabla th {
    background: var(--color-superficie-suave);
}

.etiqueta {
    padding: 0.1rem var(--espacio-2);
    font-size: var(--texto-mini);
    border-radius: var(--radio);
}

.etiqueta-exitoso {
    color: var(--color-exito);
    background: var(--color-exito-fondo);
}

.etiqueta-fallido {
    color: var(--color-error);
    background: var(--color-error-fondo);
}

.etiqueta-suspendido {
    color: var(--color-advertencia);
    background: var(--color-advertencia-fondo);
}

.paginacion {
    display: flex;
    justify-content: space-between;
    color: var(--color-texto-suave);
}

.paginacion a {
    color: var(--color-primario);
}

/* Página de muestra de estilos */
.muestra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-3);
}

.muestra-icono {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-1);
    width: 7rem;
    font-size: var(--texto-mini);
    color: var(--color-texto-suave);
}

.muestra-icono .icono {
    font-size: var(--texto-titulo);
    color: var(--color-texto);
}

/* Filtros por columna en el encabezado de una tabla: la etiqueta queda solo
   para lectores de pantalla porque el título de la columna ya la indica. */
.tabla-filtros th {
    padding-top: 0;
}

.tabla-filtros .campo {
    margin-bottom: 0;
}

.tabla-filtros .campo label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.tabla-filtros .campo input {
    padding: var(--espacio-1) var(--espacio-2);
    font-size: var(--texto-pequeno);
}

.tabla[aria-busy="true"] tbody {
    opacity: 0.6;
}

/* Módulos con listado (proveedores, clientes) */
.encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
}

.buscador {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-4);
}

.buscador .campo {
    flex: 1;
    min-width: 16rem;
    margin-bottom: 0;
}

.acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}

.acciones form {
    margin: 0;
}

/* Dentro de una tabla los botones de cada fila van siempre en línea. */
.tabla .acciones {
    flex-wrap: nowrap;
}

/* La celda de acciones mide solo lo que ocupan sus botones. */
.tabla td:has(> .acciones) {
    width: 1%;
    white-space: nowrap;
}

.tabla .acciones {
    gap: var(--espacio-1);
}

/* Botones de fila: cuadrados, del mismo tamaño y con el icono centrado. */
.tabla .acciones .boton-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--lado-boton-fila);
    height: var(--lado-boton-fila);
    padding: 0;
}

/* Tabla de ancho fijo: las columnas de texto se reparten el espacio libre y se
   truncan, así la tabla nunca se sale de su tarjeta. Los anchos van en <colgroup>. */
.tabla-fija {
    table-layout: fixed;
}

.tabla-fija .celda-truncada {
    max-width: 100%;
}

.tabla-fija .col-modelo {
    width: 12rem;
}

.tabla-fija .col-importe {
    width: var(--ancho-columna-importe);
}

.tabla-fija .col-precio {
    width: var(--ancho-columna-precio);
}

.tabla-fija .col-acciones {
    width: var(--ancho-columna-acciones);
}

.tabla-fija .col-existencias {
    width: 4.75rem;
}

/* Botones de fila más chicos, para dejar espacio a las columnas de texto. */
.tabla .acciones-chicas .boton-icono {
    width: var(--lado-boton-fila-chico);
    height: var(--lado-boton-fila-chico);
    font-size: var(--texto-mini);
}

/* Tres botones chicos: editar, clonar y eliminar (artículos). */
.tabla-fija .col-acciones-chicas {
    width: calc(3 * var(--lado-boton-fila-chico) + 2 * var(--espacio-1) + 2 * var(--espacio-3));
}

/* Constancia de Situación Fiscal (clientes) */
.constancia-zona {
    margin-bottom: var(--espacio-3);
    padding: var(--espacio-4);
    text-align: center;
    background: var(--color-superficie-suave);
    border: 2px dashed var(--color-borde-campo);
    border-radius: var(--radio);
    cursor: pointer;
}

.constancia-zona-encima {
    background: var(--color-precargado);
    border-color: var(--color-primario);
}

.constancia-zona .campo {
    max-width: 26rem;
    margin: 0 auto;
    text-align: left;
}

.constancia-estado {
    min-height: var(--espacio-5);
    margin: 0 0 var(--espacio-2);
    color: var(--color-texto-suave);
}

.alerta ul {
    margin: var(--espacio-2) 0 0;
    padding-left: var(--espacio-5);
}

.campo input.precargado,
.campo select.precargado {
    background: var(--color-precargado);
    border-color: var(--color-primario);
}

/* Artículos */

/* Texto largo en una celda: se corta con puntos suspensivos y el texto completo
   va en el atributo title, para que las acciones nunca queden fuera de la vista. */
.celda-truncada {
    display: block;
    max-width: var(--ancho-celda-truncada);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tabla td.numero {
    text-align: right;
    white-space: nowrap;
}

.tabla .orden {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.tabla .orden .icono {
    margin-right: 0;
    margin-left: var(--icono-separacion);
    color: var(--color-texto-suave);
}

.tabla th[aria-sort] .orden .icono {
    color: var(--color-primario);
}

.pie-tabla {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    margin-top: var(--espacio-3);
}

.pie-tabla .campo {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin-bottom: 0;
}

.pie-tabla .campo label {
    margin-bottom: 0;
    font-weight: normal;
    white-space: nowrap;
}

.pie-tabla #articulos-paginacion {
    flex: 1;
}

.aviso-utilidad {
    margin: calc(-1 * var(--espacio-2)) 0 var(--espacio-4);
    color: var(--color-advertencia);
}

/* 037: precio fijo que ya no cubre el costo, en el listado */
.precio-bajo-costo {
    color: var(--color-error);
    font-weight: 600;
}

.tabla .etiqueta-fijo {
    margin-left: var(--espacio-1);
    color: var(--color-info);
    background: var(--color-info-fondo);
}

/* Cadena de cálculo del precio (precio-articulo.js) */
.resumen-precio {
    margin: 0 0 var(--espacio-4);
    padding: var(--espacio-3);
    background: var(--color-superficie-suave);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
}

.resumen-precio div {
    display: flex;
    justify-content: space-between;
    gap: var(--espacio-3);
    padding: var(--espacio-1) 0;
    color: var(--color-texto-suave);
}

.resumen-precio dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.resumen-precio .resumen-total {
    border-top: 1px solid var(--color-borde);
    font-weight: 600;
    color: var(--color-texto);
}

.bloque-codigo {
    overflow-x: auto;
    padding: var(--espacio-2) var(--espacio-3);
    background: var(--color-superficie-suave);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    white-space: nowrap;
}

/* Campo con sugerencias (autocompletar.js) */
.con-sugerencias {
    position: relative;
}

.sugerencias {
    position: absolute;
    z-index: 10;
    right: 0;
    left: 0;
    max-height: var(--alto-sugerencias);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde-campo);
    border-radius: var(--radio);
}

.sugerencias [role="option"] {
    padding: var(--espacio-2) var(--espacio-3);
    font-size: var(--texto-pequeno);
    cursor: pointer;
}

.sugerencias [role="option"]:hover,
.sugerencias [aria-selected="true"] {
    background: var(--color-menu);
}

/* Lista desplegable con buscador (select-buscable.js) */
.select-buscable {
    position: relative;
}

.campo .select-buscable-original {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.select-buscable-boton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2);
    width: 100%;
    padding: var(--espacio-2) var(--espacio-3);
    font: inherit;
    color: var(--color-texto);
    text-align: left;
    cursor: pointer;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde-campo);
    border-radius: var(--radio);
}

.select-buscable-boton::after {
    flex-shrink: 0;
    width: 0.5em;
    height: 0.5em;
    margin-top: -0.25em;
    content: "";
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    transform: rotate(45deg);
}

.select-buscable-abierto .select-buscable-boton::after {
    margin-top: 0.25em;
    transform: rotate(-135deg);
}

.select-buscable-texto {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.select-buscable-vacio {
    color: var(--color-texto-suave);
}

.campo-error .select-buscable-boton {
    border-color: var(--color-error);
}

.select-buscable-abierto .select-buscable-boton {
    border-color: var(--color-primario);
}

.select-buscable-panel {
    position: absolute;
    z-index: 10;
    right: 0;
    left: 0;
    margin-top: var(--espacio-1);
    padding: var(--espacio-2);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde-campo);
    border-radius: var(--radio);
    box-shadow: var(--sombra-menu-panel);
}

/* En una ventana chica el panel empuja el contenido en vez de quedar recortado. */
.dialogo:not(.dialogo-documento) .select-buscable-panel {
    position: static;
}

.campo .select-buscable-buscador {
    margin-bottom: var(--espacio-2);
}

.select-buscable-lista {
    max-height: var(--alto-sugerencias);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.select-buscable-lista [role="option"] {
    padding: var(--espacio-2) var(--espacio-3);
    cursor: pointer;
}

.select-buscable-lista [aria-selected="true"] {
    font-weight: 600;
}

.select-buscable-lista [role="option"]:hover,
.select-buscable-lista .select-buscable-activa {
    background: var(--color-menu);
}

.select-buscable-aviso {
    margin: var(--espacio-2) 0 0;
    font-size: var(--texto-pequeno);
    color: var(--color-texto-suave);
}

/* Imágenes de artículos */
.enlace-ficha {
    color: var(--color-primario);
    text-decoration: none;
}

.enlace-ficha:hover {
    text-decoration: underline;
}

/* Ficha visual (ficha-articulo.js). min-width: 0 evita que un nombre largo o
   una foto ancha desborden el diálogo. */
.ficha {
    width: min(var(--ancho-ficha), calc(100% - var(--espacio-4)));
    max-height: calc(100% - var(--espacio-4));
    padding: var(--espacio-5);
    color: var(--color-texto);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
}

.ficha::backdrop {
    background: var(--color-fondo-modal);
}

.ficha-cuerpo {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-5);
}

.ficha-columna {
    flex: 1 1 var(--lado-foto-ficha);
    min-width: 0;
}

.ficha-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    aspect-ratio: 1;
    background: var(--color-superficie-suave);
    border: 1px solid var(--color-borde);
}

.ficha-foto img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ficha-sin-imagen {
    margin: 0;
    color: var(--color-texto-suave);
}

.ficha-datos {
    flex: 1 1 14rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ficha-datos h2 {
    margin-top: 0;
    font-size: var(--texto-titulo);
}

.ficha-precio {
    margin-bottom: 0;
    font-size: var(--texto-titulo);
    font-weight: 600;
}

.ficha-aviso {
    min-height: var(--espacio-5);
    margin: var(--espacio-3) 0 0;
    color: var(--color-exito);
}

.ficha-pie {
    margin: var(--espacio-3) 0 0;
}

.imagen-articulo {
    display: block;
    max-width: 100%;
    max-height: var(--lado-imagen-formulario);
    margin-bottom: var(--espacio-3);
    border: 1px solid var(--color-borde);
}

/* Carga masiva de imágenes (carga-imagenes.js) */
.conteo-articulos {
    margin: calc(-1 * var(--espacio-2)) 0 var(--espacio-4);
}

.progreso-carga {
    width: 100%;
}

.reporte-acciones {
    margin-bottom: var(--espacio-4);
}

/* Cotizaciones */
.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.etiqueta-borrador {
    color: var(--color-texto);
    background: var(--color-neutro);
}

.etiqueta-enviada {
    color: var(--color-primario-oscuro);
    background: var(--color-menu);
}

.etiqueta-pagada,
.etiqueta-producto-entregado,
.etiqueta-recibida {
    color: var(--color-exito);
    background: var(--color-exito-fondo);
}

/* Cotización aceptada (021): su vida sigue en la venta */
.etiqueta-aceptada {
    color: var(--color-exito);
    background: var(--color-exito-fondo);
    border: 1px solid var(--color-exito);
}

.etiqueta-venta {
    color: var(--color-primario-oscuro);
    background: var(--color-menu);
    text-decoration: none;
}

/* Marcas de facturación de la cotización (no son estados) */
.etiqueta-facturada {
    color: var(--color-texto-invertido);
    background: var(--color-etiqueta-facturas);
}

.etiqueta-por-facturar {
    color: var(--color-primario-oscuro);
    background: var(--color-menu);
    border: 1px dashed var(--color-primario-oscuro);
}

.lista-cotizaciones-facturables {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 22rem;
    overflow-y: auto;
}

.lista-cotizaciones-facturables a {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1) var(--espacio-3);
    align-items: baseline;
    padding: var(--espacio-2) var(--espacio-3);
    border-bottom: 1px solid var(--color-borde);
    color: inherit;
    text-decoration: none;
}

.lista-cotizaciones-facturables a:hover,
.lista-cotizaciones-facturables a:focus-visible {
    background: var(--color-neutro);
}

.lista-cotizaciones-facturables .total {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* Facturas (borrador comparte la etiqueta de la cotización) */
.etiqueta-pendiente {
    color: var(--color-advertencia);
    background: var(--color-advertencia-fondo);
}

.etiqueta-timbrada {
    color: var(--color-exito);
    background: var(--color-exito-fondo);
}

.etiqueta-cancelada {
    color: var(--color-error);
    background: var(--color-error-fondo);
}

.texto-uuid {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: var(--texto-mini);
}

.texto-sello {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: var(--texto-mini);
    overflow-wrap: anywhere;
}

.compartir-pdf {
    display: inline-flex;
    flex-direction: column;
    gap: var(--espacio-1);
}

.compartir-pdf[hidden] {
    display: none;
}

h1 .etiqueta {
    font-size: var(--texto-pequeno);
    font-weight: 500;
    vertical-align: middle;
}

/* Atajos de fecha del listado */
.atajos {
    display: flex;
    align-self: center;
    border: 1px solid var(--color-borde-campo);
}

.atajo {
    padding: var(--espacio-2) var(--espacio-3);
    color: var(--color-texto);
    text-decoration: none;
    background: var(--color-superficie);
}

.atajo + .atajo {
    border-left: 1px solid var(--color-borde-campo);
}

.atajo:hover {
    background: var(--color-superficie-suave);
}

.atajo-activo,
.atajo-activo:hover {
    color: var(--color-texto-invertido);
    background: var(--color-primario);
}

.buscador .campo:has(input[type="date"]) {
    flex: 0 1 12rem;
    min-width: 10rem;
}

.buscador .campo:has(select[name="catalogo_id"]) {
    flex: 0 1 24rem;
}

/* Solo guarda el orden en campos ocultos; no debe ocupar lugar en el buscador. */
#articulos-orden {
    display: none;
}

/* Tabla de líneas del formulario (documento-lineas.js) */
.barra-lineas {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-3);
}

.buscador-articulos {
    flex: 1;
    min-width: 16rem;
}

.buscador-articulos .campo {
    margin-bottom: 0;
}

.tabla-lineas td {
    vertical-align: middle;
}

.tabla-lineas input,
.tabla-lineas select {
    width: 100%;
    padding: var(--espacio-1) var(--espacio-2);
    font: inherit;
    font-size: var(--texto-pequeno);
    border: 1px solid var(--color-borde-campo);
    border-radius: var(--radio);
}

.tabla-lineas .campo-error input,
.tabla-lineas .campo-error select {
    border-color: var(--color-error);
}

.tabla-lineas [data-campo="cantidad"] {
    min-width: 4.5rem;
}

.tabla-lineas [data-campo="precio_unitario"] {
    min-width: 7rem;
}

.celda-descuento {
    display: flex;
    gap: var(--espacio-1);
    min-width: 8rem;
}

.celda-descuento select {
    width: auto;
}

.tabla-lineas output {
    white-space: nowrap;
}

.descuento-global {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-3);
}

.descuento-global .campo {
    flex: 1 1 12rem;
}

/* Detalle */
.barra-acciones {
    margin-bottom: var(--espacio-4);
}

/* Detalle con la hoja: botones apilados a la izquierda, hoja y pagos a la derecha. */
.detalle-documento {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    align-items: start;
    gap: var(--espacio-4);
}

.detalle-acciones {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    padding: var(--espacio-3);
    background: var(--color-superficie-suave);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
}

.detalle-acciones > .boton,
.detalle-acciones form,
.detalle-acciones form > .boton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
}

.detalle-acciones > .boton[hidden] {
    display: none;
}

.detalle-principal .hoja {
    max-width: none;
    margin: 0 0 var(--espacio-2);
}

@media (max-width: 767px) {
    .detalle-documento {
        grid-template-columns: minmax(0, 1fr);
    }
}

.datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--espacio-3);
    margin: 0;
}

.datos dt {
    font-size: var(--texto-mini);
    color: var(--color-texto-suave);
}

.datos dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Diálogos con formulario. Sin JavaScript, el enlace #id los muestra en la página (:target). */
.dialogo {
    width: min(32rem, calc(100% - var(--espacio-4)));
}

.dialogo h2 {
    margin-top: 0;
}

dialog.dialogo:target:not([open]) {
    display: block;
    position: static;
    margin: var(--espacio-4) 0;
}

/* Bandeja de correo de demostración del dashboard (bandeja-correo.js).
   Escritorio: carpetas, lista y visor. Tableta: lista y visor, con las carpetas
   desplegables. Celular: una columna a la vez. */

/* La bandeja ocupa todo el ancho y el alto de la pantalla bajo el menú: la
   página se vuelve una columna flexible del alto de la ventana y el contenido
   toma el espacio que deja la barra (que puede ocupar varias líneas). */
body:has(.contenido-bandeja) {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

.contenido-bandeja {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.contenido-bandeja > .alerta {
    margin: var(--espacio-3) var(--espacio-4) 0;
}

/* Escritorio del dashboard: la aplicación abierta o el inicio con
   cotizaciones y facturas (dashboard-apps.js). */
.escritorio {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* Menú de aplicaciones: barra fija a la izquierda de todo el sistema. La barra
   superior y el contenido se recorren para dejarle su lugar. */
.con-menu-apps {
    padding-left: var(--ancho-menu-apps);
}

.menu-apps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-1);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    width: var(--ancho-menu-apps);
    padding: var(--espacio-3) 0;
    background: var(--color-menu-apps);
}

.menu-apps-grupo {
    position: relative;
}

.menu-apps-opcion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-1);
    position: relative;
    width: var(--lado-menu-apps-opcion);
    height: var(--lado-menu-apps-opcion);
    padding: 0;
    font: inherit;
    color: var(--color-menu-apps-texto);
    text-decoration: none;
    list-style: none;
    background: none;
    border: 0;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.menu-apps-opcion::-webkit-details-marker {
    display: none;
}

/* Raya de acento a la izquierda en la opción donde está el usuario. */
.menu-apps-opcion::before {
    content: "";
    position: absolute;
    top: var(--espacio-2);
    bottom: var(--espacio-2);
    left: calc((var(--ancho-menu-apps) - var(--lado-menu-apps-opcion)) / -2);
    width: 3px;
    background: var(--color-menu-apps-acento);
    transform: scaleY(0);
    transition: transform 0.15s ease;
}

.menu-apps-opcion:hover {
    color: var(--color-texto-invertido);
    background: var(--color-menu-apps-hover);
}

.menu-apps-opcion[aria-current],
.menu-apps-seccion-activa,
.menu-apps-grupo[open] > .menu-apps-opcion {
    color: var(--color-texto-invertido);
    background: var(--color-menu-apps-activo);
}

.menu-apps-opcion[aria-current]::before,
.menu-apps-seccion-activa::before {
    transform: scaleY(1);
}

.menu-apps-opcion:focus-visible {
    outline: 2px solid var(--color-menu-apps-acento);
    outline-offset: 2px;
}

.menu-apps-icono {
    position: relative;
    font-size: 1.6rem;
    line-height: 1;
}

.menu-apps-icono > .icono {
    margin-right: 0;
    font-size: inherit;
}

.menu-apps-abierto,
.menu-apps-opcion[aria-current] .menu-apps-cerrado {
    display: none;
}

.menu-apps-opcion[aria-current] .menu-apps-abierto {
    display: inline-block;
}

.menu-apps-texto {
    font-size: var(--texto-mini);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.menu-apps-insignia {
    position: absolute;
    top: -0.4rem;
    right: -0.7rem;
    min-width: 1.15rem;
    padding: 0.1rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: var(--color-texto-invertido);
    background: var(--color-insignia);
    box-shadow: 0 0 0 2px var(--color-menu-apps);
}

/* El panel de cada grupo sale a la derecha de la barra, a la altura de su opción. */
.menu-apps .menu-panel {
    top: 0;
    left: calc(100% + (var(--ancho-menu-apps) - var(--lado-menu-apps-opcion)) / 2 + var(--espacio-2));
    border-top-width: 1px;
    border-left: 3px solid var(--color-primario);
    transform: none;
    animation-name: menu-apps-panel-entrada;
}

.menu-apps .menu-panel::before {
    top: var(--espacio-4);
    right: 100%;
    bottom: auto;
    left: auto;
    margin: 0 3px 0 0;
    border-color: transparent;
    border-right-color: var(--color-primario);
}

@keyframes menu-apps-panel-entrada {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }
}

.menu-panel-titulo {
    margin: 0;
    padding: var(--espacio-1) var(--espacio-3) var(--espacio-2);
    font-size: var(--texto-mini);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-texto-suave);
}

/* Celular: la barra pasa abajo, a lo ancho, y los paneles se abren encima. */
@media (max-width: 767px) {
    .con-menu-apps {
        padding-left: 0;
        padding-bottom: var(--alto-menu-apps-movil);
    }

    .menu-apps {
        flex-direction: row;
        justify-content: space-around;
        top: auto;
        right: 0;
        width: auto;
        height: var(--alto-menu-apps-movil);
        padding: 0 var(--espacio-1);
    }

    .menu-apps-grupo {
        position: static;
    }

    .menu-apps-opcion::before {
        top: auto;
        right: var(--espacio-2);
        bottom: 0;
        left: var(--espacio-2);
        width: auto;
        height: 3px;
        transform: scaleX(0);
    }

    .menu-apps-opcion[aria-current]::before,
    .menu-apps-seccion-activa::before {
        transform: scaleX(1);
    }

    .menu-apps .menu-panel {
        position: fixed;
        top: auto;
        right: var(--espacio-3);
        bottom: calc(var(--alto-menu-apps-movil) + var(--espacio-2));
        left: var(--espacio-3);
        width: auto;
        max-width: none;
        border-left-width: 1px;
        border-bottom: 3px solid var(--color-primario);
        animation: none;
    }

    .menu-apps .menu-panel::before {
        display: none;
    }
}

.bandeja-vacia > .icono,
.bandeja-sin-seleccion > .icono,
.dialogo h2 > .icono {
    margin-right: var(--icono-separacion);
}

.bandeja {
    display: grid;
    grid-template-columns: var(--ancho-bandeja-carpetas) var(--ancho-bandeja-lista) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    flex: 1;
    position: relative;
    min-height: var(--alto-minimo-bandeja);
    background: var(--color-superficie);
    border-top: 1px solid var(--color-borde);
}

.bandeja-carpetas,
.bandeja-lista,
.bandeja-visor {
    min-width: 0;
    min-height: 0;
}

.bandeja-carpetas {
    padding: var(--espacio-3);
    overflow-y: auto;
    background: var(--color-superficie);
    border-right: 1px solid var(--color-borde);
}

.bandeja-opciones {
    margin: var(--espacio-3) 0 0;
    padding: 0;
    list-style: none;
}

.bandeja-opcion {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    width: 100%;
    padding: var(--espacio-2) var(--espacio-3);
    font: inherit;
    color: var(--color-texto);
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

.bandeja-opcion:hover {
    background: var(--color-superficie-suave);
}

.bandeja-opcion-activa,
.bandeja-opcion-activa:hover {
    color: var(--color-primario);
    font-weight: 600;
    background: var(--color-precargado);
}

.bandeja-opcion-nombre {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bandeja-contador {
    margin-left: auto;
    padding: 0 var(--espacio-2);
    font-size: var(--texto-mini);
    color: var(--color-texto-invertido);
    background: var(--color-primario);
}

.bandeja-subtitulo {
    margin: var(--espacio-4) 0 0;
    padding: 0 var(--espacio-3);
    font-size: var(--texto-mini);
    color: var(--color-texto-suave);
    text-transform: uppercase;
}

.bandeja-color {
    display: inline-block;
    flex: none;
    width: 0.75rem;
    height: 0.75rem;
}

.bandeja-chip {
    display: inline-block;
    padding: 0 var(--espacio-2);
    font-size: var(--texto-mini);
    font-weight: 500;
    color: var(--color-texto-invertido);
}

.bandeja-etiqueta-clientes { background: var(--color-etiqueta-clientes); }
.bandeja-etiqueta-proveedores { background: var(--color-etiqueta-proveedores); }
.bandeja-etiqueta-facturas { background: var(--color-etiqueta-facturas); }
.bandeja-etiqueta-cotizaciones { background: var(--color-etiqueta-cotizaciones); }

/* Lista */
.bandeja-lista {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-borde);
}

.bandeja-lista-encabezado {
    display: flex;
    gap: var(--espacio-2);
    padding: var(--espacio-3);
    border-bottom: 1px solid var(--color-borde);
}

.bandeja-boton-carpetas {
    display: none;
}

.bandeja-buscador {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--espacio-2);
    min-width: 0;
    padding: 0 var(--espacio-3);
    color: var(--color-texto-suave);
    border: 1px solid var(--color-borde-campo);
}

.bandeja-buscador:focus-within {
    outline: 2px solid var(--color-primario);
    outline-offset: -1px;
}

.bandeja-buscador input {
    flex: 1;
    min-width: 0;
    padding: var(--espacio-2) 0;
    font: inherit;
    color: var(--color-texto);
    background: none;
    border: 0;
    outline: none;
}

.bandeja-filas {
    flex: 1;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.bandeja-fila {
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid var(--color-borde);
    border-left: 3px solid transparent;
}

.bandeja-fila:hover {
    background: var(--color-superficie-suave);
}

.bandeja-fila-activa,
.bandeja-fila-activa:hover {
    background: var(--color-precargado);
}

.bandeja-fila-no-leida {
    border-left-color: var(--color-primario);
}

.bandeja-estrella {
    flex: none;
    padding: var(--espacio-3) var(--espacio-1) var(--espacio-3) var(--espacio-2);
    font: inherit;
    color: var(--color-texto-suave);
    background: none;
    border: 0;
    cursor: pointer;
}

.bandeja-estrella[aria-pressed="true"] {
    color: var(--color-estrella);
}

.bandeja-abrir {
    display: flex;
    flex: 1;
    gap: var(--espacio-3);
    min-width: 0;
    padding: var(--espacio-3) var(--espacio-3) var(--espacio-3) var(--espacio-1);
    font: inherit;
    color: var(--color-texto);
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

.bandeja-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--lado-avatar);
    height: var(--lado-avatar);
    font-size: var(--texto-pequeno);
    font-weight: 600;
    color: var(--color-texto-invertido);
}

.bandeja-avatar-1 { background: var(--color-avatar-1); }
.bandeja-avatar-2 { background: var(--color-avatar-2); }
.bandeja-avatar-3 { background: var(--color-avatar-3); }
.bandeja-avatar-4 { background: var(--color-avatar-4); }
.bandeja-avatar-5 { background: var(--color-avatar-5); }
.bandeja-avatar-6 { background: var(--color-avatar-6); }

.bandeja-fila-texto {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.bandeja-fila-linea {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espacio-2);
    min-width: 0;
}

.bandeja-fila-remitente,
.bandeja-fila-asunto,
.bandeja-fila-fragmento {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bandeja-fila-fecha {
    flex: none;
    font-size: var(--texto-mini);
    color: var(--color-texto-suave);
}

.bandeja-fila-asunto {
    font-size: var(--texto-pequeno);
}

.bandeja-fila-fragmento {
    font-size: var(--texto-mini);
    color: var(--color-texto-suave);
}

.bandeja-fila-no-leida .bandeja-fila-remitente,
.bandeja-fila-no-leida .bandeja-fila-asunto {
    font-weight: 700;
}

.bandeja-fila-marcas {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin-top: var(--espacio-1);
}

.bandeja-clip {
    color: var(--color-texto-suave);
}

.bandeja-vacia,
.bandeja-sin-seleccion {
    margin: 0;
    padding: var(--espacio-6) var(--espacio-4);
    color: var(--color-texto-suave);
    text-align: center;
}

/* Visor */
.bandeja-visor {
    padding: var(--espacio-5);
    overflow-y: auto;
}

.bandeja-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-4);
}

.bandeja-volver {
    display: none;
}

.bandeja-correo-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-3);
    margin-bottom: var(--espacio-4);
}

.bandeja-correo-asunto {
    margin: 0;
    font-size: var(--texto-titulo);
    overflow-wrap: anywhere;
}

.bandeja-correo-remitente {
    display: flex;
    gap: var(--espacio-3);
    padding-bottom: var(--espacio-4);
    border-bottom: 1px solid var(--color-borde);
}

.bandeja-correo-datos {
    min-width: 0;
    overflow-wrap: anywhere;
}

.bandeja-correo-datos p {
    margin: 0 0 var(--espacio-1);
}

.bandeja-suave {
    font-size: var(--texto-pequeno);
    color: var(--color-texto-suave);
}

.bandeja-correo-cuerpo {
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.bandeja-adjunto {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
    max-width: 100%;
    margin-top: var(--espacio-2);
    padding: var(--espacio-3) var(--espacio-4);
    background: var(--color-superficie-suave);
    border: 1px solid var(--color-borde);
}

.bandeja-adjunto > .icono {
    color: var(--color-error);
}

.bandeja-adjunto-nombre {
    overflow-wrap: anywhere;
}

/* Aviso "Esto es una demostración" */
.bandeja-aviso {
    position: fixed;
    bottom: var(--espacio-5);
    left: 50%;
    z-index: 10;
    max-width: calc(100% - var(--espacio-6));
    padding: var(--espacio-3) var(--espacio-4);
    color: var(--color-texto-invertido);
    background: var(--color-marca);
    transform: translateX(-50%);
}

.dialogo textarea {
    resize: vertical;
}

/* Bandeja de documentos (bandeja-documentos.js): cotizaciones y órdenes de
   compra. Reutiliza la bandeja de correo; aquí solo lo que cambia: carpetas y
   filas son enlaces, y el visor muestra el documento como una hoja de papel. */
a.bandeja-opcion,
a.bandeja-abrir {
    text-decoration: none;
}

.bandeja-color-estado {
    border: 1px solid currentColor;
}

.bandeja-filas-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bandeja-filas-lista .bandeja-abrir {
    padding-left: var(--espacio-3);
}

.bandeja-fila-total {
    flex: none;
    font-size: var(--texto-pequeno);
    font-weight: 600;
}

.bandeja-paginacion:has(.paginacion) {
    padding: var(--espacio-2) var(--espacio-3);
    font-size: var(--texto-pequeno);
    border-top: 1px solid var(--color-borde);
}

.bandeja-visor-documento {
    background: var(--color-fondo);
}

/* Las acciones comparten ancho y margen con la hoja para quedar alineadas con ella. */
.bandeja-visor-documento .bandeja-acciones {
    max-width: var(--ancho-hoja);
    margin-left: auto;
    margin-right: auto;
    gap: var(--espacio-1);
}

/* Barra compacta: botones más chicos que en el resto de la aplicación. */
.bandeja-visor-documento .bandeja-acciones .boton {
    padding: var(--espacio-1) var(--espacio-3);
    font-size: 0.875rem;
}

.bandeja-visor-documento .bandeja-acciones .boton-icono {
    padding-right: var(--espacio-2);
    padding-left: var(--espacio-2);
}

.bandeja-abrir-detalle {
    margin-left: auto;
}

.bandeja-documento-estado {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    max-width: var(--ancho-hoja);
    margin: 0 auto var(--espacio-3);
}

/* Hoja de la cotización: el contenido del PDF en HTML (visor y detalle). */
.hoja {
    max-width: var(--ancho-hoja);
    margin: 0 auto var(--espacio-4);
    padding: var(--espacio-6);
    font-size: var(--texto-pequeno);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
}

.hoja-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--espacio-2) var(--espacio-4);
    margin-bottom: var(--espacio-4);
    padding-bottom: var(--espacio-2);
    border-bottom: 2px solid var(--color-marca);
}

.hoja-encabezado p {
    margin: 0;
}

.hoja-negocio {
    font-size: var(--texto-titulo);
    font-weight: 700;
    color: var(--color-marca);
    overflow-wrap: anywhere;
}

.hoja-folio {
    text-align: right;
}

.ticket-copiar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-2) var(--espacio-3);
    margin-top: var(--espacio-3);
}

.hoja-suave,
.hoja-cliente dt {
    color: var(--color-texto-suave);
}

.hoja-cliente {
    margin: 0 0 var(--espacio-4);
}

.hoja-cliente div {
    display: flex;
    gap: var(--espacio-3);
    padding: 0.125rem 0;
}

.hoja-cliente dt {
    flex: none;
    width: 5rem;
}

.hoja-cliente dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.hoja-lineas {
    overflow-x: auto;
}

.hoja-lineas table {
    width: 100%;
    border-collapse: collapse;
}

.hoja-lineas th {
    font-weight: 600;
    text-align: left;
    background: var(--color-fondo);
}

.hoja-lineas th,
.hoja-lineas td {
    padding: var(--espacio-2);
    vertical-align: top;
    border-bottom: 1px solid var(--color-borde);
}

.hoja-lineas .numero {
    text-align: right;
    white-space: nowrap;
}

.hoja-totales {
    width: max-content;
    max-width: 100%;
    margin: var(--espacio-3) 0 0 auto;
}

.hoja-totales div {
    display: flex;
    justify-content: space-between;
    gap: var(--espacio-6);
    padding: 0.125rem 0;
}

.hoja-totales dd {
    margin: 0;
    white-space: nowrap;
}

.hoja-totales .hoja-total {
    margin-top: var(--espacio-1);
    padding-top: var(--espacio-1);
    font-size: var(--texto-subtitulo);
    font-weight: 700;
    border-top: 1px solid var(--color-texto);
}

.hoja-saldo {
    font-weight: 700;
}

/* Barra lateral del dashboard con la hamburguesa; solo existe en escritorio. */
.bandeja-riel {
    display: none;
}

/* Escritorio: en el dashboard la hamburguesa de la barra lateral pliega la
   columna de carpetas hacia la izquierda para dar más espacio a la lista y al visor. */
@media (min-width: 1024px) {
    .bandeja-plegable {
        grid-template-columns: var(--ancho-bandeja-riel) var(--ancho-bandeja-carpetas) var(--ancho-bandeja-lista) minmax(0, 1fr);
        transition: grid-template-columns 0.25s ease;
    }

    .bandeja-riel {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: var(--espacio-2);
        background: var(--color-neutro);
        border-right: 1px solid var(--color-borde);
    }

    .bandeja-riel-boton {
        padding: var(--espacio-1) var(--espacio-2);
        font-size: 1.5rem;
        line-height: 1;
        color: var(--color-texto);
        background: none;
        border: 0;
        cursor: pointer;
    }

    .bandeja-riel-boton:hover,
    .bandeja-riel-boton[aria-expanded="true"] {
        background: var(--color-neutro-oscuro);
    }

    .bandeja-riel-boton > .icono {
        font-size: inherit;
    }

    .bandeja-plegable .bandeja-carpetas {
        overflow-x: hidden;
        transition: padding 0.25s ease, border-width 0.25s ease, visibility 0s;
    }

    /* El contenido conserva su ancho mientras la columna se cierra: se recorta, no se encima. */
    .bandeja-plegable .bandeja-carpetas > * {
        min-width: calc(var(--ancho-bandeja-carpetas) - 2 * var(--espacio-3));
    }

    .bandeja-carpetas-ocultas {
        grid-template-columns: var(--ancho-bandeja-riel) 0 var(--ancho-bandeja-lista) minmax(0, 1fr);
    }

    .bandeja-carpetas-ocultas .bandeja-carpetas {
        padding-right: 0;
        padding-left: 0;
        border-right-width: 0;
        visibility: hidden;
        transition: padding 0.25s ease, border-width 0.25s ease, visibility 0s 0.25s;
    }
}

/* Tableta: las carpetas se despliegan sobre la lista con el botón "Carpetas". */
@media (max-width: 1023px) {
    .bandeja {
        grid-template-columns: var(--ancho-bandeja-lista) minmax(0, 1fr);
    }

    .bandeja-carpetas {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 5;
        width: min(var(--ancho-bandeja-carpetas), 100%);
        box-shadow: 0 0.5rem 1.5rem var(--color-fondo-modal);
    }

    .bandeja-carpetas-abiertas .bandeja-carpetas {
        display: block;
    }

    .bandeja-boton-carpetas {
        display: inline-block;
        flex: none;
    }
}

/* Celular: una columna a la vez; al abrir un correo el visor ocupa todo. */
@media (max-width: 767px) {
    .bandeja {
        grid-template-columns: minmax(0, 1fr);
    }

    .bandeja-visor {
        display: none;
        padding: var(--espacio-4);
    }

    .hoja {
        padding: var(--espacio-4);
    }

    .bandeja-leyendo .bandeja-lista {
        display: none;
    }

    .bandeja-leyendo .bandeja-visor {
        display: block;
    }

    .bandeja-volver {
        display: inline-block;
        margin-right: auto;
    }
}

/* Inicio del dashboard: "Documentos" (cotizaciones y facturas en acordeón),
   órdenes de trabajo y un solo visor. Tableta: las dos columnas, una sobre
   otra, junto al visor. Celular: apiladas y el visor a pantalla completa. */
.bandeja-dashboard {
    grid-template-columns: var(--ancho-bandeja-lista) var(--ancho-bandeja-lista) minmax(0, 1fr);
}

.bandeja-lista-titulo {
    display: flex;
    align-items: center;
    gap: var(--icono-separacion);
    margin: 0;
    padding: var(--espacio-3) var(--espacio-3) 0;
    font-size: var(--texto-subtitulo);
}

.bandeja-lista-titulo a {
    margin-left: auto;
    font-size: var(--texto-pequeno);
    font-weight: 400;
}

.bandeja-lista-titulo + .bandeja-lista-encabezado {
    padding-top: var(--espacio-2);
}

@media (max-width: 1023px) {
    .bandeja-dashboard {
        grid-template-columns: var(--ancho-bandeja-lista) minmax(0, 1fr);
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .bandeja-dashboard .bandeja-visor {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .bandeja-lista-ordenes {
        border-top: 1px solid var(--color-borde);
    }
}

@media (max-width: 767px) {
    .bandeja-dashboard {
        grid-template-columns: minmax(0, 1fr);
    }

    .bandeja-dashboard .bandeja-visor {
        grid-column: 1;
    }
}

/* Acordeón "Documentos": cada sección es un <details>. La columna hace scroll
   si las dos están abiertas y no caben; entonces cada lista tiene además su
   propio scroll, para que una no empuje a la otra fuera de la pantalla. */
.bandeja-lista-documentos {
    overflow-y: auto;
}

.bandeja-seccion {
    border-bottom: 1px solid var(--color-borde);
}

.bandeja-seccion > summary {
    padding-bottom: var(--espacio-3);
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.bandeja-seccion[open] > summary {
    padding-bottom: 0;
}

.bandeja-seccion > summary::-webkit-details-marker {
    display: none;
}

.bandeja-seccion > summary:hover {
    background: var(--color-superficie-suave);
}

.bandeja-seccion-flecha {
    font-size: 0.75em;
    color: var(--color-texto-suave);
    transition: transform 0.2s ease;
}

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

.bandeja-seccion-cuenta {
    font-size: var(--texto-pequeno);
    font-weight: 400;
    color: var(--color-texto-suave);
}

.bandeja-lista-documentos:has(.bandeja-seccion[open] ~ .bandeja-seccion[open]) .bandeja-filas {
    max-height: 40vh;
}

@media (prefers-reduced-motion: reduce) {
    .bandeja-seccion-flecha {
        transition: none;
    }
}

/* Miniatura del diseño en la fila de una orden de trabajo, del tamaño del
   avatar de las demás listas. */
.bandeja-miniatura {
    flex: none;
    width: var(--lado-avatar);
    height: var(--lado-avatar);
    object-fit: cover;
    border: 1px solid var(--color-borde);
}

.bandeja-miniatura-vacia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-texto-suave);
    background: var(--color-superficie-suave);
}

/* La orden de trabajo en el visor: sus tarjetas al ancho de una hoja. */
.bandeja-documento > .tarjeta,
.bandeja-documento > .alerta {
    max-width: var(--ancho-hoja);
    margin-right: auto;
    margin-left: auto;
}

.bandeja-documento-titulo {
    max-width: var(--ancho-hoja);
    margin: 0 auto var(--espacio-2);
    font-size: var(--texto-subtitulo);
}

/* Botones pequeños de solo icono junto al título de una lista del dashboard
   ("Ver todas" y "Nueva cotización"), cargados a la derecha. */
.bandeja-lista-herramientas {
    display: flex;
    gap: var(--espacio-1);
    margin-left: auto;
}

.bandeja-lista-herramientas .boton {
    padding: var(--espacio-1) var(--espacio-2);
    font-size: var(--texto-pequeno);
    line-height: 1.2;
}

/* Ventana "Nueva cotización" del dashboard: encabezado y pie fijos, y el
   cuerpo (tres pasos numerados) con su propio scroll. */
.dialogo-documento {
    width: min(var(--ancho-dialogo-documento), calc(100% - var(--espacio-4)));
    max-height: calc(100% - var(--espacio-6));
    padding: 0;
    overflow: hidden;
    border: 0;
    border-top: 4px solid var(--color-primario);
    box-shadow: var(--sombra-dialogo);
}

.dialogo-documento[open] {
    display: flex;
    flex-direction: column;
    animation: dialogo-documento-entrada 0.2s ease-out;
}

.dialogo-documento::backdrop {
    backdrop-filter: blur(2px);
}

@keyframes dialogo-documento-entrada {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dialogo-documento[open] {
        animation: none;
    }
}

.documento-nuevo {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.documento-nuevo-encabezado {
    display: flex;
    align-items: center;
    gap: var(--espacio-4);
    padding: var(--espacio-5) var(--espacio-5) var(--espacio-4);
    border-bottom: 1px solid var(--color-borde);
}

.documento-nuevo-sello {
    display: grid;
    flex: none;
    place-items: center;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    color: var(--color-primario);
    background: var(--color-menu);
}

.documento-nuevo-titulos {
    flex: 1;
    min-width: 0;
}

.documento-nuevo-titulos h2 {
    margin: 0;
    font-size: var(--texto-titulo);
    letter-spacing: -0.01em;
}

.documento-nuevo-titulos p {
    margin: var(--espacio-1) 0 0;
    font-size: var(--texto-pequeno);
    color: var(--color-texto-suave);
}

.documento-nuevo-cerrar {
    flex: none;
    align-self: flex-start;
    background: transparent;
}

.documento-nuevo-cuerpo {
    flex: 1;
    min-height: 0;
    padding: var(--espacio-2) var(--espacio-5) var(--espacio-4);
    overflow-y: auto;
    background: var(--color-superficie-suave);
}

.documento-nuevo-cuerpo > .alerta {
    margin-top: var(--espacio-3);
}

.documento-nuevo-paso {
    margin-top: var(--espacio-3);
    padding: var(--espacio-4) var(--espacio-5);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
}

.documento-nuevo-paso .campo:last-child {
    margin-bottom: 0;
}

.documento-nuevo-paso-titulo {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    margin: 0 0 var(--espacio-4);
    font-size: var(--texto-pequeno);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-marca);
}

.documento-nuevo-numero {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    font-size: var(--texto-mini);
    letter-spacing: 0;
    color: var(--color-texto-invertido);
    background: var(--color-marca);
}

.documento-nuevo-lineas .tabla-lineas th {
    font-size: var(--texto-mini);
    color: var(--color-texto-suave);
}

.documento-nuevo-vacio {
    margin: var(--espacio-3) 0 0;
    padding: var(--espacio-5) var(--espacio-4);
    color: var(--color-texto-suave);
    text-align: center;
    border: 1px dashed var(--color-borde-campo);
}

.documento-nuevo-vacio > .icono {
    margin-right: var(--icono-separacion);
    color: var(--color-primario);
}

.documento-nuevo-cierre {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espacio-4) var(--espacio-6);
}

.documento-nuevo-cierre .descuento-global {
    flex: 1 1 20rem;
}

.documento-nuevo-resumen {
    flex: 0 1 18rem;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.documento-nuevo-resumen div {
    display: flex;
    justify-content: space-between;
    gap: var(--espacio-4);
    padding: var(--espacio-1) 0;
    border-bottom: 1px dotted var(--color-borde-campo);
}

.documento-nuevo-resumen dt {
    color: var(--color-texto-suave);
}

.documento-nuevo-resumen dd {
    margin: 0;
}

.documento-nuevo-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3) var(--espacio-5);
    padding: var(--espacio-4) var(--espacio-5);
    background: var(--color-superficie);
    border-top: 1px solid var(--color-borde);
}

.documento-nuevo-total {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.documento-nuevo-total span {
    font-size: var(--texto-mini);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-texto-suave);
}

.documento-nuevo-total output {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--color-marca);
}

@media (max-width: 767px) {
    .dialogo-documento {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
    }

    .documento-nuevo-encabezado,
    .documento-nuevo-pie {
        padding-right: var(--espacio-4);
        padding-left: var(--espacio-4);
    }

    .documento-nuevo-cuerpo {
        padding-right: var(--espacio-2);
        padding-left: var(--espacio-2);
    }

    .documento-nuevo-paso {
        padding: var(--espacio-3);
    }

    .documento-nuevo-pie .acciones {
        width: 100%;
    }

    .documento-nuevo-pie .acciones .boton {
        flex: 1;
    }
}

/* Confirmación del timbrado directo (timbrar-cotizacion.js) y la factura
   recién timbrada, que entra resaltada a la lista del dashboard. */
.dialogo-timbrar {
    width: min(38rem, calc(100% - var(--espacio-4)));
}

.timbrar-resumen {
    margin: 0 0 var(--espacio-4);
    padding: var(--espacio-3) var(--espacio-4);
    background: var(--color-superficie-suave);
    border: 1px solid var(--color-borde);
}

.timbrar-resumen div {
    display: flex;
    justify-content: space-between;
    gap: var(--espacio-4);
    padding: var(--espacio-1) 0;
}

.timbrar-resumen dt {
    color: var(--color-texto-suave);
}

.timbrar-resumen dd {
    min-width: 0;
    margin: 0;
    text-align: right;
    overflow-wrap: anywhere;
}

.timbrar-resumen-total {
    margin-top: var(--espacio-1);
    border-top: 1px solid var(--color-borde-campo);
    font-size: var(--texto-subtitulo);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.timbrar-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0 var(--espacio-3);
}

.dialogo-timbrar .alerta ul {
    margin: var(--espacio-1) 0 0;
    padding-left: var(--espacio-5);
}

.bandeja-fila-nueva {
    animation: bandeja-fila-nueva 2.5s ease-out;
}

@keyframes bandeja-fila-nueva {
    from {
        background: var(--color-exito-fondo);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bandeja-fila-nueva {
        animation: none;
        background: var(--color-exito-fondo);
    }
}

/* Contabilidad (Tesorería) */
.pestanas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1);
    margin-bottom: var(--espacio-4);
    border-bottom: 1px solid var(--color-borde);
}

.pestanas a {
    padding: var(--espacio-2) var(--espacio-4);
    color: var(--color-texto-suave);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.pestanas a:hover {
    color: var(--color-texto);
}

.pestanas a[aria-current="page"] {
    color: var(--color-primario-oscuro);
    border-bottom-color: var(--color-primario);
}

.etiqueta-activa {
    color: var(--color-exito);
    background: var(--color-exito-fondo);
}

.etiqueta-inactiva {
    color: var(--color-texto);
    background: var(--color-neutro);
}

.etiqueta-automatico {
    color: var(--color-primario-oscuro);
    background: var(--color-menu);
}

.monto-positivo {
    color: var(--color-exito);
}

.monto-negativo {
    color: var(--color-error);
}

.texto-discreto {
    color: var(--color-texto-suave);
    font-size: var(--texto-mini);
}

.fila-automatica td {
    background: var(--color-superficie-suave);
}

.tabla .fila-total th,
.tabla .fila-total td {
    font-weight: 600;
    border-top: 2px solid var(--color-borde-campo);
}

/* Existencias (018): cifras del conjunto filtrado y artículos por pedir. */
.cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-4);
}

.cifra {
    margin: 0;
}

.cifra p {
    margin: 0;
}

.cifra-etiqueta {
    font-size: var(--texto-mini);
    color: var(--color-texto-suave);
}

.cifra-valor {
    font-size: var(--texto-titulo);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.filtro-con-contador {
    display: flex;
    align-items: flex-end;
    gap: var(--espacio-2);
}

.filtro-con-contador .texto-discreto {
    padding-bottom: var(--espacio-2);
    white-space: nowrap;
}

.fila-por-pedir td {
    background: var(--color-advertencia-fondo);
}

.etiqueta-por-pedir {
    color: var(--color-advertencia);
    background: var(--color-advertencia-fondo);
    border: 1px solid var(--color-advertencia-borde);
}

/* Pedidos de mostrador (019) */
.etiqueta-pedido-pendiente {
    color: var(--color-advertencia);
    background: var(--color-advertencia-fondo);
}

.etiqueta-pedido-anticipo {
    color: var(--color-primario-oscuro);
    background: var(--color-menu);
}

.etiqueta-pedido-pagado {
    color: var(--color-exito);
    background: var(--color-exito-fondo);
}

.etiqueta-pedido-entregado {
    color: var(--color-texto);
    background: var(--color-neutro);
}

/* El cliente intentó autofacturarse y no pudo */
.senal-autofactura {
    margin-left: var(--espacio-1);
    color: var(--color-advertencia);
    cursor: help;
}

/* La venta nació de una cotización aceptada (021) */
.senal-origen {
    margin-left: var(--espacio-1);
    color: var(--color-texto-suave);
    cursor: help;
}

/* Orden de trabajo de la venta (022) */
.etiqueta-orden-en-dibujo {
    color: var(--color-advertencia);
    background: var(--color-advertencia-fondo);
}

.etiqueta-orden-en-proceso {
    color: var(--color-primario-oscuro);
    background: var(--color-menu);
}

.etiqueta-orden-terminado {
    color: var(--color-exito);
    background: var(--color-exito-fondo);
}

.etiqueta-orden-entregado {
    color: var(--color-texto);
    background: var(--color-neutro);
}

/* Venta cobrada que todavía no tiene orden de trabajo, o línea sin color */
.etiqueta-sin-orden {
    margin-left: var(--espacio-1);
    color: var(--color-advertencia);
    background: var(--color-advertencia-fondo);
    border: 1px solid var(--color-advertencia-borde);
}

.imagen-diseno {
    display: block;
    max-width: 100%;
    max-height: 32rem;
    border: 1px solid var(--color-borde);
}

.campos-cliente-pedido {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-3);
}

.campos-cliente-pedido .campo {
    flex: 1 1 14rem;
}

.ticket-vista-previa {
    display: block;
    width: 100%;
    max-width: 22rem;
    margin: 0 auto;
    border: 1px solid var(--color-borde);
}

.huecos-mensaje {
    margin-top: var(--espacio-3);
}

.huecos-mensaje summary {
    cursor: pointer;
    color: var(--color-primario-oscuro);
}

/* Logo fijo de los PDF, solo como referencia en Configuración (026) */
.logo-documentos {
    margin: var(--espacio-3) 0;
}

.logo-documentos img {
    display: block;
    max-width: 200px;
    height: auto;
}

/* Datos bancarios (027): el icono del banco a la altura del texto y la fila
   del banco que no se imprime, atenuada para que no parezca perdida. */
.icono-banco {
    height: 1.5em;
    width: auto;
    max-width: 4em;
    vertical-align: middle;
}

.banco-nombre {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
}

.logo-banco .icono-banco {
    display: block;
    height: 64px;
    max-width: none;
    margin-bottom: var(--espacio-2);
}

.datos-bancarios tr.banco-oculto td:not(:last-child) {
    opacity: 0.55;
}

/* Páginas públicas (portal de autofacturación): solo la marca del negocio */
.barra-publica {
    justify-content: center;
}

/* Catálogo de producción y sus artículos (029) */
.etiqueta-produccion {
    color: var(--color-info);
    background: var(--color-info-fondo);
    border: 1px solid var(--color-info-borde);
}

/* Enlaces dentro del mensaje de éxito (venta y orden creadas con el pago, 029) */
.enlaces-exito {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    margin-left: var(--espacio-2);
}

.enlaces-exito a {
    color: inherit;
    font-weight: 600;
}

/* Contacto de la venta en la ventana del primer pago (029) */
.datos-venta {
    margin: var(--espacio-3) 0 0;
    padding: 0;
    border: 0;
}

.datos-venta legend {
    margin-bottom: var(--espacio-2);
    font-weight: 600;
}

/*
 * Aplicación de mostrador (033): pantallas para el dedo en un celular. Sin
 * desplazamiento horizontal a 375 puntos; todo lo tocable mide al menos 44 px.
 */
.mostrador {
    --mostrador-toque: 2.75rem;
    --mostrador-alto-barra: 3.25rem;
}

.barra-mostrador {
    position: sticky;
    top: 0;
    z-index: 10;
    flex-wrap: nowrap;
    min-height: var(--mostrador-alto-barra);
    padding: var(--espacio-2) var(--espacio-4);
}

.barra-mostrador .marca {
    display: inline-flex;
    align-items: center;
    min-height: var(--mostrador-toque);
}

.contenido-mostrador {
    max-width: 40rem;
    padding: var(--espacio-4);
}

/* Inicio: tres accesos que ocupan el alto disponible en partes iguales */
.mostrador-accesos {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: var(--espacio-3);
    min-height: calc(100vh - var(--mostrador-alto-barra) - 8rem);
    min-height: calc(100dvh - var(--mostrador-alto-barra) - 8rem);
}

.mostrador-acceso {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-2);
    min-height: 6rem;
    padding: var(--espacio-4);
    font-size: var(--texto-titulo);
    font-weight: 600;
    color: var(--color-texto-invertido);
    text-align: center;
    text-decoration: none;
    background: var(--color-primario);
    border-radius: var(--radio);
}

.mostrador-acceso:hover,
.mostrador-acceso:focus-visible {
    background: var(--color-primario-oscuro);
}

.mostrador-acceso .icono {
    font-size: 2.75rem;
}

.mostrador-salir {
    display: flex;
    justify-content: center;
    margin-top: var(--espacio-5);
}

/* Captura por pasos */
.mostrador-indicador {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2);
    margin: 0 0 var(--espacio-4);
    color: var(--color-texto-suave);
}

.mostrador-indicador strong {
    color: var(--color-texto);
    font-size: var(--texto-subtitulo);
}

.mostrador-paso {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
}

.mostrador-paso .campo {
    margin: 0;
}

.mostrador-acciones-cliente {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espacio-3);
}

.mostrador-acciones-cliente .boton,
.mostrador-paso > .boton,
.mostrador-pie .boton,
.mostrador-acciones-resultado .boton {
    min-height: var(--mostrador-toque);
}

.mostrador-cliente-elegido {
    margin: 0;
    padding: var(--espacio-2) var(--espacio-3);
    font-weight: 600;
    background: var(--color-info-fondo);
    border: 1px solid var(--color-info-borde);
}

/* Listas de fichas tocables (clientes, artículos y opciones) */
.mostrador-lista,
.mostrador-opciones {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
}

.mostrador-lista-articulos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}

.mostrador-ficha {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
    min-height: var(--mostrador-toque);
    padding: var(--espacio-3);
    color: var(--color-texto);
    text-decoration: none;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    overflow-wrap: anywhere;
}

.mostrador-ficha:hover,
.mostrador-ficha:focus-visible {
    border-color: var(--color-primario);
}

.mostrador-ficha:active {
    background: var(--color-precargado);
}

.mostrador-ficha-titulo {
    font-size: var(--texto-subtitulo);
}

.mostrador-ficha-dato {
    color: var(--color-texto-suave);
    font-size: var(--texto-pequeno);
}

.mostrador-ficha-dato .icono {
    margin-right: var(--icono-separacion);
}

.mostrador-rfc {
    font-family: ui-monospace, Consolas, monospace;
}

.mostrador-ficha .etiqueta {
    align-self: flex-start;
}

.mostrador-ficha-imagen {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    color: var(--color-texto-suave);
    font-size: 2rem;
    background: var(--color-superficie-suave);
}

.mostrador-ficha-imagen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mostrador-ficha-precio {
    font-weight: 600;
}

.mostrador-ficha-precio small {
    color: var(--color-texto-suave);
    font-weight: 400;
}

.mostrador-ficha-cantidad {
    position: absolute;
    top: var(--espacio-2);
    right: var(--espacio-2);
    padding: var(--espacio-1) var(--espacio-2);
    font-weight: 700;
    color: var(--color-texto-invertido);
    background: var(--color-primario);
}

.mostrador-ficha-agregada {
    border-color: var(--color-primario);
}

.mostrador-opcion {
    flex-direction: row;
    align-items: center;
    gap: var(--espacio-3);
}

.mostrador-opcion-clave {
    min-width: 3rem;
}

.mostrador-opcion-grande {
    min-height: 5rem;
    font-size: var(--texto-subtitulo);
}

.mostrador-opcion-palomita {
    margin-left: auto;
    color: var(--color-primario);
    font-size: 1.4rem;
    visibility: hidden;
}

.mostrador-opcion-elegida {
    border-color: var(--color-primario);
    background: var(--color-info-fondo);
}

.mostrador-opcion-elegida .mostrador-opcion-palomita {
    visibility: visible;
}

.mostrador-vacio,
.mostrador-cargando {
    margin: 0;
    padding: var(--espacio-4);
    color: var(--color-texto-suave);
    text-align: center;
}

.mostrador-lista-articulos .mostrador-vacio,
.mostrador-lista-articulos .mostrador-cargando {
    grid-column: 1 / -1;
}

.mostrador-vacio .icono {
    margin-right: var(--icono-separacion);
}

/* Carrito */
.mostrador-carrito {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mostrador-renglon {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--espacio-2) var(--espacio-3);
    padding: var(--espacio-3);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
}

.mostrador-renglon-datos {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
    grid-column: 1 / -1;
    overflow-wrap: anywhere;
}

.mostrador-renglon-error {
    color: var(--color-error);
    font-size: var(--texto-pequeno);
}

.mostrador-renglon-controles {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.mostrador-renglon-controles .boton {
    min-width: var(--mostrador-toque);
    min-height: var(--mostrador-toque);
}

.mostrador-renglon-cantidad {
    min-width: 2rem;
    font-weight: 700;
    text-align: center;
}

.mostrador-renglon-importe {
    align-self: center;
    font-weight: 600;
}

/* Barra fija al pie con conteo, total y el botón que sigue */
.mostrador-pie {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    margin: var(--espacio-3) calc(-1 * var(--espacio-4)) 0;
    padding: var(--espacio-3) var(--espacio-4);
    background: var(--color-superficie);
    border-top: 1px solid var(--color-borde);
}

.mostrador-pie > .boton-bloque {
    flex: 1;
}

.mostrador-pie-resumen {
    font-weight: 600;
}

/* Revisión y resultados */
.mostrador-revision {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
    margin-bottom: var(--espacio-4);
    padding: var(--espacio-4);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
}

.mostrador-revision p {
    margin: 0;
}

.mostrador-revision-nombre {
    font-size: var(--texto-titulo);
    font-weight: 700;
}

.mostrador-revision-total {
    font-size: var(--texto-titulo);
    font-weight: 700;
    color: var(--color-primario-oscuro);
}

.mostrador-revision-fiscal {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--espacio-1) var(--espacio-3);
    margin: var(--espacio-3) 0 0;
    font-size: var(--texto-pequeno);
    color: var(--color-texto-suave);
}

.mostrador-revision-fiscal dd {
    margin: 0;
}

.mostrador-acciones-resultado {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
}

.mostrador-ticket {
    display: block;
    width: 100%;
    max-width: 24rem;
    margin: 0 auto var(--espacio-4);
    border: 1px solid var(--color-borde);
}

.mostrador-alta form {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-4);
}

/*
 * Consulta del mostrador (034): la barra de secciones al pie, las listas de
 * documentos, los detalles y la ficha del catálogo.
 */
.mostrador {
    --mostrador-alto-secciones: 3.75rem;
}

/* Barra de secciones: fija al pie, tres columnas iguales, toda tocable */
.mostrador-secciones {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: var(--color-superficie);
    border-top: 1px solid var(--color-borde);
}

.mostrador-seccion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-1);
    min-height: var(--mostrador-alto-secciones);
    padding: var(--espacio-2);
    color: var(--color-texto-suave);
    font-size: var(--texto-pequeno);
    text-decoration: none;
}

.mostrador-seccion .icono {
    font-size: 1.4rem;
}

.mostrador-seccion[aria-current="page"] {
    color: var(--color-primario);
    font-weight: 600;
    box-shadow: inset 0 3px 0 var(--color-primario);
}

/* El contenido deja libre el alto de la barra; los pies fijos quedan encima de ella */
.mostrador-con-barra .contenido-mostrador {
    padding-bottom: calc(var(--mostrador-alto-secciones) + var(--espacio-4) + env(safe-area-inset-bottom, 0));
}

.mostrador-con-barra .mostrador-pie {
    bottom: calc(var(--mostrador-alto-secciones) + env(safe-area-inset-bottom, 0));
}

.mostrador-con-barra .mostrador-accesos {
    min-height: calc(100vh - var(--mostrador-alto-barra) - var(--mostrador-alto-secciones) - 8rem);
    min-height: calc(100dvh - var(--mostrador-alto-barra) - var(--mostrador-alto-secciones) - 8rem);
}

/* Listas de documentos */
.mostrador-consulta {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
}

.mostrador-consulta .campo {
    margin: 0;
}

.mostrador-documento-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espacio-2);
    margin: 0;
}

.mostrador-documento-total {
    font-size: var(--texto-subtitulo);
    color: var(--color-primario-oscuro);
}

.mostrador-documento-cliente {
    font-size: var(--texto-subtitulo);
}

.mostrador-documento-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2);
}

.mostrador-ficha-documento .etiqueta {
    align-self: auto;
}

/* Detalles: cotización, factura y ficha del catálogo */
.mostrador-detalle {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
}

.mostrador-detalle > .boton-suave,
.mostrador-resultado > .boton-suave {
    align-self: flex-start;
    min-height: var(--mostrador-toque);
}

.mostrador-detalle .mostrador-revision {
    margin-bottom: 0;
}

.mostrador-totales {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
    margin: 0;
    padding: var(--espacio-3) var(--espacio-4);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
}

.mostrador-totales div {
    display: flex;
    justify-content: space-between;
    gap: var(--espacio-3);
}

.mostrador-totales dd {
    margin: 0;
}

.mostrador-totales-total {
    font-size: var(--texto-subtitulo);
    font-weight: 700;
}

.mostrador-totales-saldo {
    font-weight: 700;
    color: var(--color-primario-oscuro);
}

.mostrador-motivo {
    margin: 0;
    color: var(--color-texto-suave);
    font-size: var(--texto-pequeno);
}

.mostrador-uuid {
    margin: 0;
    font-size: var(--texto-pequeno);
    overflow-wrap: anywhere;
}

.mostrador-pago {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-4);
}

/* Ficha del catálogo: se le voltea al cliente */
.mostrador-articulo-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    background: var(--color-superficie-suave);
    border: 1px solid var(--color-borde);
}

.mostrador-articulo-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mostrador-articulo-foto .icono {
    margin-right: var(--icono-separacion);
}

.mostrador-articulo-datos {
    overflow-wrap: anywhere;
}

.mostrador-articulo-datos p {
    margin: 0;
}

.mostrador-articulo-nombre {
    margin: 0 0 var(--espacio-1);
    font-size: var(--texto-titulo);
}

.mostrador-articulo-precio {
    margin-top: var(--espacio-2);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primario-oscuro);
}