:root {
    --md-sys-color-primary: #6750a4;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #eaddff;
    --md-sys-color-on-primary-container: #21005d;
    --md-sys-color-surface: #fffbfe;
    --md-sys-color-surface-variant: #e7e0ec;
    --md-sys-color-on-surface: #1c1b1f;
    --md-sys-color-on-surface-variant: #49454f;
    --md-sys-color-outline: #79747e;
    --md-sys-color-error: #b3261e;
    --md-sys-color-error-container: #f9dedc;

    --ok-color: #146c2e;
    --ok-bg: #dff3e3;
    --warn-bg: #fff4e5;
    --warn-color: #8a5a00;

    color-scheme: light;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Roboto', system-ui, sans-serif;
    background: #f5f2fa;
    color: var(--md-sys-color-on-surface);
}

a {
    color: var(--md-sys-color-primary);
    text-decoration: none;
}

/* ---------- Top bar responsive (checkbox hack, sin JS) ---------- */

.nav-toggle {
    display: none;
}

.topbar {
    background: var(--md-sys-color-surface);
    border-bottom: 1px solid var(--md-sys-color-surface-variant);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 12px 20px;
    gap: 16px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    margin-right: auto;
}

.nav-links {
    display: flex;
    gap: 4px;
}

.nav-links a {
    padding: 10px 14px;
    border-radius: 20px;
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 500;
}

.nav-links a:hover {
    background: var(--md-sys-color-surface-variant);
}

.nav-burger {
    display: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
}

.nav-burger:hover {
    background: var(--md-sys-color-surface-variant);
}

@media (max-width: 960px) {
    .nav-burger {
        display: flex;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--md-sys-color-surface);
        border-bottom: 1px solid var(--md-sys-color-surface-variant);
        padding: 8px;
        display: none;
    }

    .nav-toggle:checked ~ .topbar .nav-links {
        display: flex;
    }

    /* En mobile hay poco ancho de sobra en los bordes para estos botones sin tapar
       contenido (tablas, formularios) — se ocultan y queda el gesto nativo del navegador. */
    .nav-history-btn {
        display: none;
    }
}

/* ---------- Botones flotantes de atrás/adelante (navegación del historial) ---------- */

.nav-history-btn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 500;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface-variant);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.nav-history-btn:hover {
    opacity: 1;
    background: var(--md-sys-color-surface-variant);
}

.nav-history-atras {
    left: 10px;
}

.nav-history-adelante {
    right: 10px;
}

/* ---------- Barra de punto de venta activo ---------- */

.pv-bar {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-size: 0.85rem;
}

.pv-bar-warn {
    background: var(--warn-bg);
    color: var(--warn-color);
}

.pv-bar-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 6px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Agrupa ícono+etiqueta+combo de "Comercio"/"Trabajando en" como una unidad — así, cuando
   hay que envolver por falta de espacio, envuelve el grupo entero (no el ícono suelto de
   un lado y el combo del otro) y ambos selectores quedan en la misma barra/línea. */
.pv-bar-grupo {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Estado de ARCA del punto de venta elegido (al lado de "Trabajando en"). */
.arca-estado {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 2px 10px 2px 6px;
    border-radius: 12px;
    cursor: help;
    white-space: nowrap;
}

.arca-estado .material-symbols-outlined {
    font-size: 18px;
}

.arca-real {
    background: #d7f0dc;
    color: #1b5e20;
}

.arca-prueba {
    background: #fff0c2;
    color: #7a5200;
}

.pv-bar-warn a {
    color: var(--warn-color);
    text-decoration: underline;
}

.pv-select {
    font-family: inherit;
    font-size: 0.85rem;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--md-sys-color-primary);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

/* Combo de búsqueda compacto para las barras del nav (Comercio / Trabajando en) — mismo
   combo genérico, angosto y con el tipeo/dropdown en vez de un <select> plano. */
.pv-combo {
    width: 220px;
    max-width: 60vw;
}

.pv-combo .combo-input {
    font-size: 0.85rem;
    padding: 4px 30px 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--md-sys-color-primary);
}

/* ---------- Layout general ---------- */

.content {
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.page-header h1 {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0;
}

.page-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.total-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
}

.total-linea {
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface-variant);
    margin: -10px 0 12px;
}

.footer {
    text-align: center;
    padding: 24px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.85rem;
}

.entorno-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
}

/* ---------- Cards ---------- */

.card {
    background: var(--md-sys-color-surface);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

/* ---------- Gráficos de torta comparativos (Reportes de ventas) ---------- */

.torta-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.torta-card canvas {
    max-width: 220px;
    max-height: 220px;
}

.torta-legend {
    width: 100%;
    margin-top: 12px;
    text-align: left;
}

.torta-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    padding: 3px 0;
}

.torta-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.stat {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-radius: 16px;
    padding: 20px;
}

.stat .value {
    font-size: 1.8rem;
    font-weight: 700;
    display: block;
}

/* ---------- Menu de inicio (iconos) ---------- */

.menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

@media (min-width: 640px) {
    .menu-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

.menu-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    aspect-ratio: 1 / 1;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-surface-variant);
    border-radius: 20px;
    text-decoration: none;
    color: var(--md-sys-color-on-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.menu-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.menu-tile .menu-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.menu-tile .menu-icon .material-symbols-outlined {
    font-size: 28px;
}

.menu-tile .menu-label {
    font-weight: 500;
    font-size: 0.95rem;
    text-align: center;
}

.menu-tile.destacado .menu-icon {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

/* ---------- Tablas ---------- */

.table-wrap {
    overflow-x: auto;
    background: var(--md-sys-color-surface);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

th, td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--md-sys-color-surface-variant);
    font-size: 0.92rem;
}

th {
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 500;
}

tbody tr:hover {
    background: #faf8fc;
}

/* ---------- Botón de copiar (primera columna, chica, de cada listado) ---------- */

th.col-copiar, td.col-copiar {
    width: 1%;
    padding-left: 12px;
    padding-right: 4px;
    white-space: nowrap;
}

.fila-numero {
    display: inline-block;
    min-width: 18px;
    text-align: right;
    margin-right: 6px;
    font-size: 0.78rem;
    color: var(--md-sys-color-on-surface-variant);
    vertical-align: middle;
}

.copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--md-sys-color-on-surface-variant);
    border-radius: 8px;
    vertical-align: middle;
}

.copy-btn .material-symbols-outlined {
    font-size: 16px;
}

.copy-btn:hover {
    background: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-primary);
}

.copy-btn.copiado {
    color: var(--ok-color);
}

/* ---------- Check "Activo" de los listados ---------- */

.toggle-activo {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--ok-color);
}

/* ---------- Toast global (confirmación de cambios) ---------- */

.toast-global {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translate(-50%, 12px);
    background: var(--md-sys-color-inverse-surface, #333);
    color: var(--md-sys-color-inverse-on-surface, #fff);
    padding: 12px 22px;
    border-radius: 24px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 1000;
}

.toast-global.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ---------- Galería de imágenes de producto (modal en Stock) ---------- */

.miniatura-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    border-radius: 8px;
}

.miniatura-btn:hover {
    outline: 2px solid var(--md-sys-color-primary);
}

.galeria-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.galeria-modal {
    background: var(--md-sys-color-surface);
    border-radius: 16px;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 16px;
}

.galeria-cerrar {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--md-sys-color-on-surface-variant);
    padding: 6px;
    border-radius: 50%;
    z-index: 1;
}

.galeria-cerrar:hover {
    background: var(--md-sys-color-surface-variant);
}

.galeria-imagen-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 280px;
    position: relative;
}

.galeria-imagen-wrap img {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 8px;
}

.galeria-nav {
    background: var(--md-sys-color-surface-variant);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.galeria-nav:hover {
    background: var(--md-sys-color-primary-container);
}

.galeria-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* ---------- Filas de árbol (Estructura de comercios en /configuracion) ---------- */

.estructura-row {
    border-radius: 8px;
    padding: 6px 8px;
    margin: 0 -8px;
    transition: background 0.1s ease;
}

.estructura-row:hover {
    background: var(--md-sys-color-surface-variant);
}

.comercio-acordeon {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--md-sys-color-surface-variant);
}

.comercio-acordeon-resumen {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    margin: 0 -8px;
    border-radius: 8px;
    cursor: pointer;
    list-style: none;
}

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

.comercio-acordeon-resumen:hover {
    background: var(--md-sys-color-surface-variant);
}

.acordeon-ver-mas {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface-variant);
}

.acordeon-chevron {
    font-size: 20px;
    transition: transform 0.15s ease;
}

.comercio-acordeon[open] .acordeon-chevron {
    transform: rotate(180deg);
}

.comercio-acordeon:not([open]) .solo-abierto,
.comercio-acordeon[open] .solo-cerrado {
    display: none;
}

.acordeon-editar {
    font-size: 0.85rem;
}

.comercio-acordeon-body {
    padding-top: 12px;
}

/* ---------- Acordeón genérico dentro de una .card (ej. Nueva factura) ---------- */
/* Mismo mecanismo de chevron/"Ver detalles" que .comercio-acordeon, pero sin su
   border-bottom/margin (pensados para filas de una lista, no para adentro de una .card
   ya redondeada) — clases .acordeon-chevron/.solo-cerrado/.solo-abierto se reusan tal
   cual, solo cambia el selector padre. */
.card-acordeon > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
}

.card-acordeon > summary::-webkit-details-marker {
    display: none;
}

.card-acordeon[open] > summary {
    margin-bottom: 16px;
}

.card-acordeon .acordeon-ver-mas {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface-variant);
}

.card-acordeon .acordeon-chevron {
    font-size: 20px;
    transition: transform 0.15s ease;
}

.card-acordeon[open] .acordeon-chevron {
    transform: rotate(180deg);
}

.card-acordeon:not([open]) .solo-abierto,
.card-acordeon[open] .solo-cerrado {
    display: none;
}

/* ---------- Solapas (Empresa/Usuarios en /configuracion) ---------- */

.tabs-strip {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--md-sys-color-surface-variant);
    margin-bottom: 16px;
}

.tab-btn {
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 16px;
    cursor: pointer;
    color: var(--md-sys-color-on-surface-variant);
}

.tab-btn.active {
    color: var(--md-sys-color-primary);
    border-bottom-color: var(--md-sys-color-primary);
}

.tab-btn .total-badge {
    margin-left: 6px;
    vertical-align: middle;
}

/* ---------- Badges de estado ---------- */

.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.badge-ok {
    background: var(--ok-bg);
    color: var(--ok-color);
}

.badge-warn {
    background: var(--warn-bg);
    color: var(--warn-color);
}

.badge-error {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-error);
}

.fila-cancelada {
    opacity: 0.55;
}

.fila-cancelada td {
    text-decoration: line-through;
}

.fila-cancelada .badge,
.fila-cancelada md-icon-button,
.fila-cancelada a {
    text-decoration: none;
}

.fila-bloqueada {
    background: var(--md-sys-color-error-container);
}

/* ---------- Formularios ---------- */

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field label {
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface-variant);
}

.field input,
.field select,
.field textarea {
    font-family: inherit;
    font-size: 1rem;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--md-sys-color-outline);
    background: transparent;
    color: var(--md-sys-color-on-surface);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: -1px;
}

.actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* ---------- Items de factura (tabla editable) ---------- */

.items-table th, .items-table td {
    padding: 8px 10px;
}

.items-table input {
    width: 100%;
}

.total-line {
    text-align: right;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 16px 0;
}

.error-box {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-error);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 16px;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--md-sys-color-on-surface-variant);
}

.qr-box img {
    max-width: 160px;
}

/* ---------- Vidriera /ventas (estilo marketplace) ---------- */

.catalogo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}

.producto-card {
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-surface-variant);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.producto-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.producto-imagen {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--md-sys-color-surface-variant);
    display: flex;
    align-items: center;
    justify-content: center;
}

.producto-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.producto-imagen-placeholder {
    font-size: 48px;
    color: var(--md-sys-color-on-surface-variant);
}

.producto-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--md-sys-color-error);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}

.producto-info {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.producto-titulo {
    margin: 0;
    font-size: 0.92rem;
    color: var(--md-sys-color-on-surface-variant);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.producto-precio {
    margin: 2px 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
}

.producto-stock {
    margin: 0;
    font-size: 0.8rem;
    color: var(--md-sys-color-on-surface-variant);
}

.producto-card {
    cursor: pointer;
}

/* ---------- Carrito (vidriera pública) ---------- */

.carrito-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 30px;
    border: none;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.carrito-fab-badge {
    background: var(--tienda-acento, var(--md-sys-color-error));
    color: var(--tienda-on-acento, #fff);
    border-radius: 50%;
    min-width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    padding: 0 4px;
}

.producto-detalle-galeria {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--md-sys-color-surface-variant);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 14px;
}

.producto-detalle-galeria img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.producto-detalle-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.producto-detalle-nav.prev { left: 8px; }
.producto-detalle-nav.next { right: 8px; }

.qty-stepper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qty-stepper button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--md-sys-color-outline);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font-size: 1.1rem;
    cursor: pointer;
}

.qty-stepper input {
    width: 60px;
    text-align: center;
    font-family: inherit;
    font-size: 1rem;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--md-sys-color-outline);
}

.carrito-item-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--md-sys-color-surface-variant);
}

.carrito-item-info {
    flex: 1;
    min-width: 0;
}

.carrito-item-info p {
    margin: 0;
}

.carrito-item-titulo {
    font-size: 0.9rem;
}

.carrito-item-precio {
    font-size: 0.8rem;
    color: var(--md-sys-color-on-surface-variant);
}

/* ---------- Combo de busqueda genérico (un solo control: input + lista desplegable) ---------- */
/* .combo-producto es el nombre original (Producto en Compras/Facturas); .combo-buscador
   es el genérico usado en todos los demás (Cliente, Proveedor, Comercio, Punto de Venta,
   Sucursal...) — ambos comparten exactamente el mismo look & feel. */

.combo-producto,
.combo-buscador {
    position: relative;
}

.combo-input {
    width: 100%;
    font-family: inherit;
    font-size: 0.95rem;
    padding: 12px 34px 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--md-sys-color-outline);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

.combo-input:focus {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: -1px;
}

.combo-clear {
    display: none;
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
}

.combo-clear:hover {
    background: var(--md-sys-color-surface-variant);
}

.combo-clear.visible {
    display: flex;
}

.combo-clear .material-symbols-outlined {
    font-size: 18px;
}

.combo-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-surface-variant);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
}

.combo-option {
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--md-sys-color-on-surface);
}

.combo-option:hover,
.combo-option.active {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.combo-empty {
    padding: 10px 12px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.88rem;
}

/* ---------- Popup de medios de pago ---------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}

.modal-card {
    background: var(--md-sys-color-surface);
    border-radius: 20px;
    padding: 24px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.pago-linea {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px 40px;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

.pago-efectivo-extra {
    grid-column: 1 / -1;
    background: var(--md-sys-color-surface-container, #f3edf7);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pago-efectivo-extra label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.pago-efectivo-extra .pago-recibido {
    flex: 1;
    min-width: 0;
}

.pago-billetes {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pago-billetes button {
    border: 1px solid var(--md-sys-color-outline);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    border-radius: 16px;
    padding: 4px 12px;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.pago-vuelto {
    font-size: 1.25rem;
    font-weight: 700;
    min-height: 1.4em;
}

.pago-linea select,
.pago-linea input {
    font-family: inherit;
    font-size: 0.95rem;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--md-sys-color-outline);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

/* ---------- Listas: buscador + paginado (AJAX) ---------- */

.lista-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.lista-buscar {
    flex: 1;
    min-width: 220px;
    max-width: 380px;
    font-family: inherit;
    font-size: 0.95rem;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--md-sys-color-outline);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

.lista-buscar:focus {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: -1px;
}

.lista-tamano {
    font-family: inherit;
    font-size: 0.9rem;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--md-sys-color-outline);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

.lista-cargando {
    opacity: 0.5;
    pointer-events: none;
}

.paginacion-controles {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface-variant);
}

.paginacion-botones {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pag-btn {
    border: none;
    background: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.pag-btn:hover:not(:disabled) {
    background: var(--md-sys-color-primary-container);
}

.pag-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.pag-btn .material-symbols-outlined {
    font-size: 20px;
}


/* =====================================================================================
   RESPONSIVE — celular, tablet y PC
   Puntos de corte: celular <= 720px · tablet 721–1023px · PC >= 1024px.
   Todo está dentro de media queries: la PC (>= 1024px) queda exactamente como antes.
   ===================================================================================== */

/* El texto de los nombres de menú no se parte en dos líneas ("Cta. Cte."). */
.nav-links a {
    white-space: nowrap;
}

/* ---------- Tablet y menores (<= 1023px) ---------- */
@media (max-width: 1023px) {
    .content {
        padding: 20px 16px 60px;
    }

    .topbar-inner,
    .pv-bar-inner {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ---------- Items de factura/compra como TARJETAS (celular y tablet vertical, <= 900px) ----------
   Cada fila de la tabla editable pasa a ser una tarjeta con sus campos en grilla. Los inputs conservan sus clases y nombres,
   así que el JavaScript (recalcular, agregar fila, reindexar) no cambia. Las etiquetas salen del atributo data-label de cada celda. */
@media (max-width: 900px) {
    .items-table,
    .items-table tbody {
        display: block;
        width: 100%;
        min-width: 0; /* el CSS base de table fija un mínimo de 560px */
    }

    .items-table thead {
        display: none;
    }

    .items-table tr.item-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px 8px;
        padding: 14px;
        margin-bottom: 12px;
        background: var(--md-sys-color-surface);
        border: 1px solid var(--md-sys-color-surface-variant);
        border-radius: 14px;
        position: relative;
    }

    .items-table tr.item-row > td {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 0;
        min-width: 0;
        border: none;
    }

    .items-table td[data-label]::before {
        content: attr(data-label);
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--md-sys-color-on-surface-variant);
    }

    .items-table td.subtotal-cell {
        font-weight: 700;
        font-size: 1.05rem;
        justify-content: flex-end;
    }

    /* Ventas: producto | descripción | cantidad · precio · bonificación | subtotal · quitar */
    .items-ventas tr.item-row > td:nth-child(1),
    .items-ventas tr.item-row > td:nth-child(2) { grid-column: 1 / -1; }
    .items-ventas tr.item-row > td:nth-child(6) { grid-column: 1 / 3; }
    .items-ventas tr.item-row > td:nth-child(7) { grid-column: 3; align-items: flex-end; justify-content: flex-end; }

    /* Compras: producto | cantidad · costo $ · costo USD | % ganancia · precio de venta | subtotal · quitar */
    .items-compras tr.item-row > td:nth-child(1) { grid-column: 1 / -1; }
    .items-compras tr.item-row > td:nth-child(6) { grid-column: 2 / 4; }
    .items-compras tr.item-row > td:nth-child(7) { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
    .items-compras tr.item-row > td:nth-child(8) { grid-column: 1 / 3; }
    .items-compras tr.item-row > td:nth-child(9) { grid-column: 3; align-items: flex-end; justify-content: flex-end; }

    /* La tarjeta ya no necesita el scroll horizontal ni el "overflow visible" de la tabla. */
    .table-wrap:has(> .items-table) {
        overflow: visible !important;
        background: transparent;
        box-shadow: none;
    }
}

/* ---------- Celular (<= 720px) ---------- */
@media (max-width: 720px) {
    .content {
        padding: 14px 12px 90px;
    }

    .card {
        padding: 14px;
        border-radius: 14px;
    }

    h1 {
        font-size: 1.4rem;
    }

    /* Campos: 16px evita el zoom automático de iPhone al tocarlos y la altura cómoda para el dedo. */
    input,
    select,
    textarea,
    .combo-input,
    .lista-buscar,
    .pago-linea select,
    .pago-linea input {
        font-size: 16px;
        min-height: 44px;
    }

    md-icon-button {
        --md-icon-button-state-layer-height: 44px;
        --md-icon-button-state-layer-width: 44px;
    }

    /* Pestañas: se desplazan hacia el costado en vez de partirse o desbordar. */
    .tabs-strip {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .tabs-strip::-webkit-scrollbar {
        display: none;
    }

    .tab-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 12px 14px;
    }

    /* Encabezados y barras de herramientas de los listados. */
    .page-header {
        gap: 8px;
    }

    .lista-toolbar > * {
        flex: 1 1 100%;
        max-width: none;
    }

    .lista-buscar {
        max-width: none;
        min-width: 0;
        width: 100%;
    }

    /* Barra violeta (Comercio / Trabajando en / ARCA): cada grupo ocupa su línea y los selectores el ancho disponible. */
    .pv-bar-inner {
        gap: 6px 8px;
    }

    .pv-bar-grupo {
        width: 100%;
    }

    /* Se oculta el texto "Comercio:"/"Trabajando en:" (queda el ícono); el indicador de ARCA se mantiene. */
    .pv-bar-grupo > span:not(.material-symbols-outlined):not(.arca-estado) {
        display: none;
    }

    .pv-bar-grupo .pv-combo,
    .pv-bar-grupo form {
        flex: 1;
        min-width: 0;
    }

    /* Formularios en una columna. */
    .form-grid {
        grid-template-columns: 1fr;
    }

    .actions {
        gap: 8px;
    }

    .actions > * {
        flex: 1 1 auto;
    }

    /* Ventanas emergentes como "hoja" que sube desde abajo, a todo el ancho. */
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .modal-card {
        max-width: none;
        border-radius: 20px 20px 0 0;
        max-height: 92vh;
        padding: 20px 16px 24px;
    }

    .pago-linea {
        grid-template-columns: minmax(0, 1fr) 110px 44px;
    }

    .nav-history-btn {
        display: none;
    }

    /* Barra de emisión pegada abajo: el Total y los botones siempre a mano mientras se cargan ítems. */
    .barra-emision {
        position: sticky;
        bottom: 0;
        z-index: 8;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 16px -12px 0;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: var(--md-sys-color-surface);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.14);
    }

    .barra-emision .barra-total {
        display: block;
        grid-column: 1 / -1;
        text-align: right;
        font-size: 1.25rem;
        font-weight: 700;
    }

    .barra-emision > md-filled-button,
    .barra-emision > md-outlined-button {
        width: 100%;
    }

    /* El Total de la tarjeta de ítems se repite en la barra de abajo. */
    .total-line {
        display: none;
    }
}

/* El Total dentro de la barra de emisión solo existe en celular. */
.barra-total {
    display: none;
}

/* ---------- Listados como TARJETAS en celular (patrón reutilizable: table.tabla-cards) ----------
   En <= 720px cada fila de la tabla se muestra como una tarjeta. Las celdas con data-label se ven como "Etiqueta ... valor".
   Cada tabla define su acomodo con grid-template-areas (ver .tabla-facturas). La PC sigue viendo la tabla de siempre. */
@media (max-width: 720px) {
    .tabla-cards,
    .tabla-cards tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .tabla-cards thead {
        display: none;
    }

    .tabla-cards tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 10px;
        padding: 12px 14px;
        margin-bottom: 10px;
        background: var(--md-sys-color-surface);
        border: 1px solid var(--md-sys-color-surface-variant);
        border-radius: 14px;
        align-items: center;
    }

    .tabla-cards tbody tr > td {
        display: block;
        padding: 0;
        border: none;
        min-width: 0;
    }

    .tabla-cards td[data-label] {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        font-size: 0.92rem;
    }

    .tabla-cards td[data-label]::before {
        content: attr(data-label);
        color: var(--md-sys-color-on-surface-variant);
        font-size: 0.8rem;
    }

    .tabla-cards td.col-copiar {
        display: none;
    }

    .table-wrap:has(> .tabla-cards) {
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    /* Últimas facturas */
    .tabla-facturas tbody tr {
        grid-template-areas:
            "comp estado"
            "cliente cliente"
            "fecha fecha"
            "suc suc"
            "user user"
            "total total"
            "acc acc";
    }
    .tabla-facturas td:nth-child(2) { grid-area: fecha; }
    .tabla-facturas td:nth-child(3) { grid-area: cliente; }
    .tabla-facturas td:nth-child(4) { grid-area: comp; font-weight: 700; }
    .tabla-facturas td:nth-child(5) { grid-area: suc; }
    .tabla-facturas td:nth-child(6) { grid-area: user; }
    .tabla-facturas td:nth-child(7) { grid-area: total; font-weight: 700; font-size: 1.05rem; }
    .tabla-facturas td:nth-child(8) { grid-area: estado; justify-self: end; }
    .tabla-facturas td:nth-child(9) { grid-area: acc; justify-self: end; }

    /* Barra violeta: el indicador de ARCA va en su propia línea, sin pisar al selector. */
    .pv-bar-grupo {
        flex-wrap: wrap;
    }

    .pv-bar-grupo form {
        flex: 1 1 calc(100% - 40px);
    }

    .pv-bar-grupo .arca-estado {
        margin-left: 34px;
    }
}


/* ---------- Fase 2: tarjetas genéricas para todos los listados, Compras con barra pegada, escaneo con cámara ---------- */
@media (max-width: 720px) {
    /* Las tablas ya no exigen 560px de ancho mínimo: las chicas se ajustan, las grandes pasan a tarjetas (.tabla-cards). */
    table {
        min-width: 0;
    }

    th,
    td {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Acomodo genérico de una tarjeta: título arriba (si lo hay), datos como "etiqueta ... valor", acciones al final a la derecha. */
    .tabla-cards tbody tr {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .tabla-cards td[data-titulo] {
        order: -1;
        display: block;
        font-weight: 700;
        font-size: 1.02rem;
    }

    .tabla-cards td[data-titulo]::before {
        display: none;
    }

    .tabla-cards td:not([data-label]) {
        align-self: flex-end;
    }

    .tabla-cards td:not([data-label]):first-child {
        align-self: flex-start;
    }

    /* Fila vacía ("No hay ..."): ocupa el ancho y se centra. */
    .tabla-cards td[colspan] {
        text-align: center;
    }

    /* Últimas facturas conserva su acomodo propio en grilla. */
    .tabla-facturas tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    /* Compras: barra pegada abajo, igual que Ventas. */
    .barra-emision > md-text-button {
        width: 100%;
    }
}

/* ---------- Botón de escaneo con la cámara (solo en pantallas táctiles y si el navegador soporta BarcodeDetector) ---------- */
.combo-scan {
    display: none;
    position: absolute;
    top: 50%;
    right: 34px;
    transform: translateY(-50%);
    border: none;
    background: none;
    padding: 4px;
    cursor: pointer;
    color: var(--md-sys-color-primary);
    align-items: center;
    justify-content: center;
}

@media (pointer: coarse) {
    .combo-scan {
        display: flex;
    }

    .combo-producto .combo-input,
    .combo-buscador .combo-input {
        padding-right: 66px;
    }
}

.scan-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: #000;
    display: flex;
    flex-direction: column;
}

.scan-overlay video {
    flex: 1;
    width: 100%;
    object-fit: cover;
}

.scan-overlay .scan-barra {
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    color: #fff;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.7);
}

.scan-overlay .scan-guia {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 35%;
    height: 22%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

/* Celular: solo la barra con el logo y la hamburguesa queda fija arriba; la barra violeta (empresa / punto de venta / ARCA) se
   desplaza con la página para no comerse un cuarto de la pantalla. display: contents saca al <header> de la jerarquía visual. */
@media (max-width: 720px) {
    .topbar {
        display: contents;
    }

    .topbar-inner {
        position: sticky;
        top: 0;
        z-index: 20;
        background: var(--md-sys-color-surface);
        border-bottom: 1px solid var(--md-sys-color-surface-variant);
    }
}

/* ---------- Utilidades (reemplazan estilos escritos en línea en las plantillas). Con !important para ganar igual que el estilo en línea. ---------- */
.u-mt0 { margin-top: 0 !important; }
.u-m0 { margin: 0 !important; }
.u-ta-right { text-align: right !important; }
.u-ta-center { text-align: center !important; }
.u-span-all { grid-column: 1 / -1 !important; }
.u-flex-center-4 { display: flex !important; align-items: center !important; gap: 4px !important; }
.u-w-auto { width: auto !important; }
.u-muted { color: var(--md-sys-color-on-surface-variant) !important; }
.u-muted-sm { color: var(--md-sys-color-on-surface-variant) !important; font-size: 0.85rem !important; }
.u-muted-xs { color: var(--md-sys-color-on-surface-variant) !important; font-size: 0.8rem !important; margin: 4px 0 0 !important; }
.u-muted-pull8 { color: var(--md-sys-color-on-surface-variant) !important; margin-top: -8px !important; }
.u-muted-pull12 { color: var(--md-sys-color-on-surface-variant) !important; margin-top: -12px !important; }
.u-check-label { display: flex !important; align-items: center !important; gap: 8px !important; font-weight: normal !important; }
.u-nodeco { text-decoration: none !important; }
.u-flex-gap4 { display: flex !important; gap: 4px !important; }
.u-flex-gap8 { display: flex !important; gap: 8px !important; }
.u-flex-gap10 { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; }
.u-mb8 { margin-bottom: 8px !important; }
.u-mb12 { margin-bottom: 12px !important; }
.u-mb16 { margin-bottom: 16px !important; }
.u-mt16 { margin-top: 16px !important; }

/* ---------- Pulido para celular: letra de 16px también en los buscadores de la barra violeta y el selector de tamaño, zonas táctiles ---------- */
@media (max-width: 720px) {
    .pv-combo .combo-input,
    .lista-tamano,
    select {
        font-size: 16px;
    }

    .pag-btn {
        width: 44px;
        height: 44px;
    }

    .brand {
        min-height: 44px;
    }

    /* Enlaces sueltos dentro de las tarjetas ("(ver comprobante)", "Ver"): área táctil más alta. */
    .tabla-cards td a:not(.copy-btn) {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
    }

    /* Casillas y botones de opción con tamaño de dedo, sin estirarlas con la altura mínima de los demás campos. */
    input[type="checkbox"],
    input[type="radio"] {
        width: 22px;
        height: 22px;
        min-height: 0;
    }
}

/* Bloque "Precios" de la ficha de producto (Stock). */
.precios-card {
    border: 1px solid var(--md-sys-color-surface-variant);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 0;
}

.precios-card legend {
    font-weight: 700;
    padding: 0 8px;
}

.precios-card .pr-compra[readonly] {
    background: var(--md-sys-color-surface-variant);
}

/* ---------- Pantallas grandes: las tablas de listados anchas usan el ancho disponible en vez de scrollear ----------
   El contenido sigue centrado en 1080px (formularios, títulos, tarjetas), pero una tabla de listado se extiende hacia los dos
   costados hasta su ancho natural, con un tope del ancho de la ventana. Si aun así no entra, vuelve el scroll horizontal. */
@media (min-width: 1100px) {
    .table-wrap:has(table.tabla-cards):not(.card *) {
        width: max-content;
        min-width: 100%;
        max-width: calc(100vw - 48px);
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ---------- Detalle de factura: ganancia por ítem y resultado de la venta ---------- */
.fila-expandir-btn {
    border: none;
    background: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    color: var(--md-sys-color-on-surface-variant);
    display: inline-flex;
}

.fila-expandir-btn .material-symbols-outlined {
    transition: transform 0.15s;
}

.fila-expandir-btn.abierto .material-symbols-outlined {
    transform: rotate(180deg);
}

.fila-analisis[hidden] {
    display: none !important;
}

.fila-analisis > td {
    background: var(--md-sys-color-surface-variant);
    padding: 16px 20px;
}

.analisis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px 24px;
}

.analisis-bloque h4 {
    margin: 0 0 8px;
    font-size: 0.95rem;
}

.analisis-dl {
    margin: 0;
    display: grid;
    gap: 4px;
}

.analisis-dl > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.9rem;
}

.analisis-dl dt {
    color: var(--md-sys-color-on-surface-variant);
}

.analisis-dl dd {
    margin: 0;
    text-align: right;
    white-space: nowrap;
}

.u-neg {
    color: var(--md-sys-color-error) !important;
}

@media (max-width: 720px) {
    .fila-analisis > td {
        text-align: left;
    }

    .analisis-dl dd {
        white-space: normal;
    }
}


/* Detalle de comprobantes en celular: la botonera de la cabecera ocupa todo el ancho y los botones se reparten en filas. */
@media (max-width: 720px) {
    .page-header > .u-flex-gap10 {
        width: 100%;
    }

    .page-header > .u-flex-gap10 > a,
    .page-header > .u-flex-gap10 > form {
        flex: 1 1 100%;
        min-width: 0;
        display: block;
    }

    .page-header > .u-flex-gap10 md-filled-button,
    .page-header > .u-flex-gap10 md-outlined-button {
        width: 100%;
    }

    .page-header h1 {
        overflow-wrap: anywhere;
    }
}

/* Configuración → Empresa: canal de los códigos de verificación (Email / WhatsApp) de cada empresa. */
.canal-bloque {
    border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
    border-radius: 12px;
    padding: 10px 14px;
    margin: 0 0 14px 20px;
}

.canal-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin-top: 8px;
}

.canal-titulo {
    min-width: 190px;
    font-weight: 500;
}

.canal-opcion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.canal-opcion input {
    width: auto;
}

/* ---------- Edición de empresa: selector gráfico del tema de la tienda ---------- */
.tema-bloque {
    border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
    border-radius: 16px;
    padding: 16px 18px 18px;
    margin: 0 0 20px;
    background: var(--md-sys-color-surface);
}

.tema-cabecera {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px 24px;
}

.tema-actual {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 150px;
    padding: 8px 14px;
    border-radius: 12px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.tema-actual-etiqueta {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.8;
}

.tema-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 14px;
}

.tema-chip {
    border: 1px solid var(--md-sys-color-outline);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    border-radius: 999px;
    padding: 6px 14px;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tema-chip:hover {
    background: var(--md-sys-color-surface-variant);
}

.tema-chip.activo {
    background: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.tema-chip span {
    opacity: 0.8;
    margin-left: 4px;
    font-size: 0.78rem;
}

.tema-selector {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

.tema-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    max-height: 620px;
    overflow-y: auto;
    padding: 4px 6px 6px 4px;
    scrollbar-width: thin;
}

.tema-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
    border-radius: 14px;
    background: var(--md-sys-color-surface);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.tema-card[hidden] {
    display: none;
}

.tema-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

.tema-card input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.tema-card:has(input:focus-visible) {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.tema-card.elegida {
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 2px var(--md-sys-color-primary);
}

.tema-check {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 22px;
    color: var(--md-sys-color-on-primary);
    background: var(--md-sys-color-primary);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s, transform 0.15s;
    pointer-events: none;
}

.tema-card.elegida .tema-check {
    opacity: 1;
    transform: scale(1);
}

/* Mini tienda de cada tarjeta */
.tema-mock {
    display: flex;
    flex-direction: column;
    height: 92px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--t-bg);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.tema-mock-barra {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 7px;
    height: 18px;
    background: var(--t-surface);
    border-bottom: 1px solid var(--t-surface-var);
}

.tema-mock-barra i {
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: var(--t-primary);
}

.tema-mock-barra b {
    width: 28px;
    height: 4px;
    border-radius: 2px;
    background: var(--t-text);
    opacity: 0.8;
}

.tema-mock-barra em {
    margin-left: auto;
    width: 16px;
    height: 7px;
    border-radius: 4px;
    border: 1px solid var(--t-outline);
}

.tema-mock-cuerpo {
    display: flex;
    gap: 6px;
    padding: 6px;
    flex: 1;
}

.tema-mock-prod {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px;
    border-radius: 6px;
    background: var(--t-surface);
    border: 1px solid var(--t-surface-var);
}

.tema-mock-img {
    flex: 1;
    border-radius: 4px;
    background: var(--t-surface-var);
}

.tema-mock-prod b {
    height: 4px;
    width: 70%;
    border-radius: 2px;
    background: var(--t-text);
    opacity: 0.85;
}

.tema-mock-prod u {
    height: 7px;
    border-radius: 4px;
    background: var(--t-primary);
    text-decoration: none;
}

.tema-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 0 2px 2px;
}

.tema-nombre {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    line-height: 1.15;
}

.tema-muestras {
    display: inline-flex;
    flex-shrink: 0;
}

.tema-muestras i {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.18);
    margin-left: -4px;
}

/* Vista previa grande */
.tema-preview-col {
    position: sticky;
    top: 92px;
}

.tema-preview {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: var(--t-bg);
    border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
    transition: background 0.2s;
}

.tp-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--t-surface);
    border-bottom: 1px solid var(--t-surface-var);
}

.tp-marca {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--t-text);
    font-size: 0.9rem;
}

.tp-logo {
    font-size: 20px;
    color: var(--t-primary);
}

.tp-boton-borde {
    border: 1px solid var(--t-outline);
    color: var(--t-primary);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.tp-cuerpo {
    position: relative;
    padding: 14px 14px 52px;
}

.tp-titulo {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--t-text);
}

.tp-grilla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.tp-prod {
    display: flex;
    flex-direction: column;
    background: var(--t-surface);
    border: 1px solid var(--t-surface-var);
    border-radius: 12px;
    overflow: hidden;
}

.tp-img {
    position: relative;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--t-surface-var);
    color: var(--t-text-var);
}

.tp-insignia {
    position: absolute;
    top: 6px;
    left: 6px;
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--t-accent);
    color: var(--t-on-accent, #fff);
}

.tp-datos {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px 4px;
}

.tp-desc {
    font-size: 0.74rem;
    color: var(--t-text-var);
}

.tp-precio {
    font-size: 0.95rem;
    color: var(--t-text);
}

.tp-stock {
    font-size: 0.66rem;
    color: var(--t-text-var);
}

.tp-boton {
    margin: 4px 10px 10px;
    text-align: center;
    padding: 6px 0;
    border-radius: 999px;
    background: var(--t-primary);
    color: var(--t-on-primary);
    font-size: 0.72rem;
    font-weight: 600;
}

.tp-fab {
    position: absolute;
    right: 14px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--t-primary);
    color: var(--t-on-primary);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.tp-fab .material-symbols-outlined {
    font-size: 18px;
}

.tp-fab i {
    font-style: normal;
    font-size: 0.7rem;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--t-accent);
    color: var(--t-on-accent, #fff);
}

.tema-preview-nota {
    text-align: center;
    margin-top: 8px;
}

@media (max-width: 1000px) {
    .tema-selector {
        grid-template-columns: 1fr;
    }

    .tema-preview-col {
        order: -1;
        position: static;
    }

    .tema-grid {
        max-height: 460px;
    }

    .tema-actual {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tema-card,
    .tema-check,
    .tema-chip {
        transition: none;
    }
}

/* Nueva compra: línea verde sobre cada campo con el valor que el producto tiene hoy en Stock ("Valor actual: …"). */
.valor-actual {
    color: var(--ok-color);
    background: var(--ok-bg);
    border-radius: 6px;
    padding: 2px 8px;
    margin-bottom: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
.valor-actual[hidden] { display: none; }

/* Edición de empresa → solapa Avisos (destinatarios de los avisos de venta por email) */
.aviso-agregar { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin: 12px 0 4px; }
.aviso-entrada-wrap { position: relative; flex: 1 1 320px; min-width: 240px; }
.aviso-entrada-wrap input { width: 100%; }
.aviso-sugerencias { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: var(--md-sys-color-surface, #fff);
    border: 1px solid var(--md-sys-color-outline-variant, #ccc); border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.14); overflow: hidden; }
.aviso-sugerencias button { display: block; width: 100%; text-align: left; padding: 10px 14px; border: 0; background: transparent; cursor: pointer; font: inherit; }
.aviso-sugerencias button:hover, .aviso-sugerencias button.activa { background: var(--md-sys-color-primary-container, #eaddff); }
.aviso-sugerencias small { display: block; color: var(--md-sys-color-on-surface-variant, #666); }
.aviso-lista { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; }
.aviso-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--md-sys-color-surface-container-low, #f6f2fa); }
.aviso-item.aviso-inactivo { opacity: .55; }
.aviso-icono { color: var(--md-sys-color-primary, #6750a4); }
.aviso-datos { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; min-width: 0; overflow-wrap: anywhere; }

.aviso-maestro { font-size: 1.05rem; }
.aviso-eventos { display: grid; gap: 8px; margin: 8px 0 4px; }
.aviso-eventos.aviso-inactivo { opacity: .55; }
.aviso-evento { align-items: flex-start !important; padding: 8px 12px; border-radius: 12px; background: var(--md-sys-color-surface-container-low, #f6f2fa); }
.aviso-evento > span { display: flex; flex-direction: column; }

/* ---------- Módulo de Ayuda (/ayuda) ---------- */
.ayuda-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; }
.ayuda-indice { position: sticky; top: 130px; max-height: calc(100vh - 150px); overflow: auto; padding: 14px; border-radius: 18px;
    background: var(--md-sys-color-surface-container-low, #f6f2fa); }
.ayuda-buscar { width: 100%; box-sizing: border-box; margin-bottom: 10px; }
.ayuda-grupo h3 { margin: 14px 0 4px; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--md-sys-color-on-surface-variant, #666); }
.ayuda-grupo ul { list-style: none; margin: 0; padding: 0; }
.ayuda-grupo li a { display: block; padding: 7px 10px; border-radius: 10px; color: inherit; text-decoration: none; font-size: .92rem; }
.ayuda-grupo li a:hover { background: var(--md-sys-color-primary-container, #eaddff); }
.ayuda-grupo li a.actual { background: var(--md-sys-color-primary, #6750a4); color: var(--md-sys-color-on-primary, #fff); font-weight: 600; }
.ayuda-sin-resultados { color: var(--md-sys-color-on-surface-variant, #666); font-size: .9rem; }
.ayuda-contenido { min-width: 0; }
.ayuda-portada-grupo h2 { margin: 0 0 10px; }
.ayuda-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 22px; }
.ayuda-tarjeta { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 16px; text-decoration: none; color: inherit;
    background: var(--md-sys-color-surface-container-low, #f6f2fa); border: 1px solid transparent; }
.ayuda-tarjeta:hover { border-color: var(--md-sys-color-primary, #6750a4); }
.ayuda-tarjeta span { font-size: .85rem; color: var(--md-sys-color-on-surface-variant, #666); }
.ayuda-articulo { max-width: 860px; line-height: 1.6; }
.ayuda-articulo h2 { margin: 28px 0 8px; scroll-margin-top: 140px; }
.ayuda-articulo h3 { margin: 18px 0 6px; }
.ayuda-articulo ol, .ayuda-articulo ul { padding-left: 22px; }
.ayuda-articulo li { margin: 4px 0; }
.ayuda-toc { margin-bottom: 18px; padding: 12px 16px; border-radius: 14px; background: var(--md-sys-color-surface-container-low, #f6f2fa); }
.ayuda-toc ul { margin: 6px 0 0; }
.ayuda-fig { margin: 14px 0 20px; }
.ayuda-fig img { display: block; max-width: 100%; border-radius: 14px; border: 1px solid var(--md-sys-color-outline-variant, #d0cbd6); cursor: zoom-in;
    box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.ayuda-fig figcaption { margin-top: 6px; font-size: .85rem; color: var(--md-sys-color-on-surface-variant, #666); }
.ayuda-nota, .ayuda-aviso { margin: 14px 0; padding: 12px 16px; border-radius: 12px; }
.ayuda-nota { background: var(--md-sys-color-primary-container, #eaddff); }
.ayuda-aviso { background: var(--warn-bg, #fff0c2); }
.ayuda-pie { display: flex; justify-content: space-between; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.ayuda-vecino { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 14px; text-decoration: none; color: inherit;
    background: var(--md-sys-color-surface-container-low, #f6f2fa); min-width: 200px; }
.ayuda-vecino:hover { background: var(--md-sys-color-primary-container, #eaddff); }
.ayuda-vecino-sig { margin-left: auto; text-align: right; }
.ayuda-vecino small { color: var(--md-sys-color-on-surface-variant, #666); }
.ayuda-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; }
.ayuda-lightbox[hidden] { display: none; }
.ayuda-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; }
@media (max-width: 900px) {
    .ayuda-layout { grid-template-columns: 1fr; }
    .ayuda-indice { position: static; max-height: none; }
}
.aviso-entrada-wrap input { box-sizing: border-box; padding: 13px 16px; border: 1px solid var(--md-sys-color-outline, #79747e); border-radius: 12px; font: inherit; background: transparent; color: inherit; }
.aviso-entrada-wrap input:focus { outline: 2px solid var(--md-sys-color-primary, #6750a4); outline-offset: -1px; }
.tabla-ayuda { border-collapse: collapse; width: 100%; margin: 12px 0 16px; font-size: .92rem; }
.tabla-ayuda th, .tabla-ayuda td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--md-sys-color-outline-variant, #d0cbd6); vertical-align: top; }
.tabla-ayuda th { background: var(--md-sys-color-surface-container-low, #f6f2fa); }
.u-nowrap { white-space: nowrap; }
.resumen-info { font-size: 18px; vertical-align: middle; color: var(--md-sys-color-primary, #6750a4); cursor: help; }

/* Ventas -> MercadoPago */
.mp-sugerida { margin-bottom: 6px; font-size: .88rem; }
.mp-candidatas { display: grid; gap: 8px; max-height: 50vh; overflow: auto; margin: 12px 0; }
.mp-candidata { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px;
    background: var(--md-sys-color-surface-container-low, #f6f2fa); }
.mp-candidata.mp-exacta { outline: 2px solid var(--ok-color, #146c2e); }
#mp-vincular-overlay input[type=search] { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1px solid var(--md-sys-color-outline, #79747e); border-radius: 12px; font: inherit; }

#lista-mp td[data-label="Venta vinculada"] { min-width: 190px; }
#lista-mp .mp-sugerida { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }

/* MercadoPago: compacto para que se vea todo el listado en la PC (la referencia larga se recorta; el texto completo está en el tooltip) */
#lista-mp > div > .table-wrap table { font-size: .92rem; }
#lista-mp th, #lista-mp td { padding: 8px 10px; }
#lista-mp .mp-ref { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lista-mp > div > p { margin-left: 4px; }

/* Ventana "Cobros de MercadoPago" de una venta */
.mpv-card { max-width: 640px; width: 94vw; max-height: 92vh; overflow: auto; }
.mpv-titulo { margin: 14px 0 6px; }
.mpv-suma { min-height: 1.4em; font-weight: 600; margin: 6px 0; }
.mpv-suma.mpv-ok { color: var(--ok-color, #146c2e); }
.mpv-suma.mpv-falta { color: var(--md-sys-color-on-surface-variant, #555); }
.mpv-suma.mpv-excede { color: var(--md-sys-color-error, #b3261e); }
.mp-candidata { cursor: pointer; }
.mp-candidata input[type=checkbox] { width: 20px; height: 20px; flex: none; }

/* Columna MP de Últimas facturas: lo mínimo de ancho (el encabezado es solo "MP") */
th.mp-col { width: 1%; white-space: nowrap; }

.mp-resumen-venta { margin: 12px 4px 0; }
.u-ok { color: var(--ok-color, #146c2e); }

/* ---------- Términos y condiciones ---------- */
/* Menú deshabilitado hasta aceptar: se ve gris y no se puede tocar; solo "Términos y condiciones" queda activo. */
.nav-links .nav-disabled {
    padding: 10px 14px;
    border-radius: 20px;
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 500;
    white-space: nowrap;
    opacity: 0.4;
    cursor: not-allowed;
    user-select: none;
}

.nav-links a.nav-activo-terminos {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary, #fff);
}

.terminos-box {
    max-height: 55vh;
    overflow-y: auto;
    padding: 16px 20px;
    border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
    border-radius: 12px;
    background: var(--md-sys-color-surface, #fff);
    line-height: 1.55;
}

.terminos-box h3 { margin: 18px 0 6px; font-size: 1.02rem; }
.terminos-box h3:first-child { margin-top: 0; }
.terminos-box p, .terminos-box li { font-size: 0.95rem; }

.terminos-estado { margin: 10px 0 0; font-weight: 600; }
.terminos-estado.pendiente { color: var(--warn-color, #8a5a00); }
.terminos-estado.listo { color: var(--ok-color, #146c2e); }

/* ---------- Acciones del detalle de un comprobante: Descargar / Enviar / Anular ---------- */
.acciones-comprobante {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 32px;
    padding: 14px 20px;
    margin-bottom: 16px;
}

.accion-grupo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.accion-grupo-titulo {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--md-sys-color-on-surface-variant);
}

.accion-grupo-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Un separador fino entre grupos (solo en pantallas anchas, donde van en la misma fila). */
@media (min-width: 900px) {
    .accion-grupo + .accion-grupo:not(.accion-peligro) {
        padding-left: 32px;
        border-left: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
    }

    /* Anular va aparte, al borde derecho. */
    .accion-peligro {
        margin-left: auto;
    }
}

.accion-peligro .accion-grupo-titulo {
    color: var(--md-sys-color-error, #b3261e);
}

.accion-peligro md-outlined-button {
    --md-outlined-button-label-text-color: var(--md-sys-color-error, #b3261e);
    --md-outlined-button-hover-label-text-color: var(--md-sys-color-error, #b3261e);
    --md-outlined-button-focus-label-text-color: var(--md-sys-color-error, #b3261e);
    --md-outlined-button-pressed-label-text-color: var(--md-sys-color-error, #b3261e);
    --md-outlined-button-icon-color: var(--md-sys-color-error, #b3261e);
    --md-outlined-button-hover-icon-color: var(--md-sys-color-error, #b3261e);
    --md-outlined-button-focus-icon-color: var(--md-sys-color-error, #b3261e);
    --md-outlined-button-pressed-icon-color: var(--md-sys-color-error, #b3261e);
    --md-outlined-button-outline-color: var(--md-sys-color-error, #b3261e);
}

/* Celular: cada grupo ocupa todo el ancho y sus botones se reparten parejo. */
@media (max-width: 720px) {
    .acciones-comprobante { padding: 12px 14px; gap: 14px; }
    .accion-grupo { width: 100%; }
    .accion-grupo-botones > a,
    .accion-grupo-botones > form,
    .accion-grupo-botones > md-filled-tonal-button { flex: 1 1 calc(50% - 8px); min-width: 0; }
    .accion-grupo-botones md-filled-tonal-button,
    .accion-grupo-botones md-outlined-button { width: 100%; }
}

/* ---------- Categorías de productos (árbol) ---------- */
.cat-arbol { padding: 8px 12px; }

.cat-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 2px 4px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant, #e7e0ec);
}
.cat-fila:last-child { border-bottom: none; }
.cat-fila:hover { background: var(--md-sys-color-surface-variant, #f3edf7); border-radius: 8px; }

.cat-sangria { flex: none; display: inline-block; }

.cat-toggle, .cat-toggle-vacio {
    flex: none;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cat-toggle {
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 50%;
    color: var(--md-sys-color-on-surface-variant);
}
.cat-toggle:hover { background: var(--md-sys-color-surface-variant); }
.cat-toggle .material-symbols-outlined { transition: transform 0.15s; }
.cat-toggle.colapsada .material-symbols-outlined { transform: rotate(-90deg); }

.cat-nombre { font-weight: 500; }
.cat-nombre.cat-inactiva { opacity: 0.55; text-decoration: line-through; }
.cat-cantidad { text-decoration: none; }
.cat-acciones { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.cat-activo { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; margin: 0 6px; cursor: pointer; }

@media (max-width: 720px) {
    .cat-fila { flex-wrap: wrap; row-gap: 0; }
    .cat-acciones { margin-left: 0; width: 100%; justify-content: flex-end; }
}

/* ---------- Vidriera: buscador y filtro por categoría ---------- */
.catalogo-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
}

.catalogo-buscar {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    height: 46px;
    border: 1px solid var(--md-sys-color-outline, #79747e);
    border-radius: 24px;
    background: var(--md-sys-color-surface, #fff);
}
.catalogo-buscar:focus-within { border-color: var(--md-sys-color-primary); box-shadow: 0 0 0 1px var(--md-sys-color-primary); }
.catalogo-buscar .material-symbols-outlined { color: var(--md-sys-color-on-surface-variant); }
.catalogo-buscar input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 1rem;
}

.catalogo-toolbar select {
    height: 46px;
    max-width: 100%;
    padding: 0 14px;
    border: 1px solid var(--md-sys-color-outline, #79747e);
    border-radius: 24px;
    background: var(--md-sys-color-surface, #fff);
    font: inherit;
    font-size: 0.95rem;
}

.catalogo-buscar-btn {
    height: 46px;
    padding: 0 22px;
    border: none;
    border-radius: 24px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary, #fff);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.catalogo-limpiar { font-size: 0.9rem; }

@media (max-width: 720px) {
    .catalogo-toolbar select { flex: 1 1 100%; }
    .catalogo-buscar-btn { flex: 1 1 100%; }
}

/* ---------- Formas de pago de la tienda (configuración y checkout) ---------- */
.check-fila {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    cursor: pointer;
}
.check-fila input[type="checkbox"] { margin-top: 4px; width: 18px; height: 18px; flex: none; }

.checkout-pagos {
    border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
    border-radius: 12px;
    padding: 8px 14px 10px;
    margin: 0 0 14px;
}
.checkout-pagos legend { padding: 0 6px; font-size: 0.85rem; color: var(--md-sys-color-on-surface-variant); }
.checkout-pago {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    cursor: pointer;
}
.checkout-pago + .checkout-pago { border-top: 1px solid var(--md-sys-color-surface-variant, #e7e0ec); }
.checkout-pago input[type="radio"] { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.checkout-pago small { color: var(--md-sys-color-on-surface-variant); }

.gracias-alias {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 8px 0 14px;
    font-size: 1.15rem;
}
.gracias-pagar { display: inline-flex; align-items: center; text-decoration: none; margin: 4px 0 14px; }

/* ---------- Cola de emisiones (Ventas): cada venta emitida en segundo plano ---------- */
.emisiones-panel {
    position: fixed;
    left: 16px;
    bottom: 88px;
    z-index: 950;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}
.emision-chip {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--md-sys-color-surface, #fff);
    border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    font-size: 0.9rem;
}
.emision-cuerpo { flex: 1; min-width: 0; }
.emision-estado { color: var(--md-sys-color-on-surface-variant); }
.emision-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.emision-acciones a, .emision-acciones button {
    border: none; background: none; padding: 0; cursor: pointer; font: inherit; font-weight: 600;
    color: var(--md-sys-color-primary); text-decoration: underline;
}
.emision-cerrar { border: none; background: none; cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--md-sys-color-on-surface-variant); padding: 0 2px; }
.emision-icono { flex: none; }
.emision-pendiente .emision-icono { color: var(--md-sys-color-primary); animation: emision-giro 1s linear infinite; }
.emision-ok { border-color: var(--ok-color, #146c2e); }
.emision-ok .emision-icono { color: var(--ok-color, #146c2e); }
.emision-error { border-color: var(--md-sys-color-error, #b3261e); }
.emision-error .emision-icono { color: var(--md-sys-color-error, #b3261e); }
@keyframes emision-giro { to { transform: rotate(360deg); } }
@media (max-width: 720px) {
    /* Celular: el estado de cada venta emitida es una BARRA pegada abajo, con botones grandes (Ver, PDF, Ticket) y un cerrar cómodo, en vez de
       una tarjeta flotante con enlaces chicos que tapaba el teclado de la caja. La página deja lugar con --barra-emision-h (ver el script de Ventas). */
    .emisiones-panel { left: 0; right: 0; bottom: 0; width: 100%; max-height: 45vh; overflow-y: auto; gap: 0; }
    .emision-chip {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: 2px;
        align-items: center;
        border-width: 1px 0 0;
        border-radius: 18px 18px 0 0;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.22);
        font-size: 1rem;
    }
    .emision-chip + .emision-chip { border-radius: 0; }
    .emision-cuerpo { display: contents; }
    .emision-icono { grid-column: 1; grid-row: 1 / span 2; font-size: 28px; }
    .emision-cuerpo > strong { grid-column: 2; grid-row: 1; overflow-wrap: anywhere; }
    .emision-estado { grid-column: 2; grid-row: 2; overflow-wrap: anywhere; }
    .emision-cerrar {
        grid-column: 3; grid-row: 1 / span 2;
        width: 44px; height: 44px; font-size: 1.7rem; border-radius: 22px;
        background: var(--md-sys-color-surface-container, #f3edf7);
    }
    .emision-acciones { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; margin-top: 10px; }
    .emision-acciones:empty { display: none; }
    .emision-acciones a, .emision-acciones button {
        min-height: 48px; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
        border-radius: 24px; padding: 0 14px; text-decoration: none; text-align: center;
        background: var(--md-sys-color-secondary-container, #e8def8); color: var(--md-sys-color-on-secondary-container, #1d192b);
    }
    body { padding-bottom: var(--barra-emision-h, 0px); }
    .barra-emision { bottom: var(--barra-emision-h, 0px); }
}

/* ---------- MercadoPago: varias cuentas con color ---------- */
.mp-punto {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    flex: none;
}
.mp-colores { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.mp-swatch { position: relative; cursor: pointer; }
.mp-swatch input { position: absolute; opacity: 0; }
.mp-swatch span {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid transparent;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.mp-swatch input:checked + span { border-color: var(--md-sys-color-surface, #fff); box-shadow: 0 0 0 3px var(--md-sys-color-on-surface, #1d1b20); }
.mp-swatch input:focus-visible + span { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }

/* Listado de cobros: cada fila lleva el color de su cuenta en el borde izquierdo y una etiqueta con su alias/CVU. */
.mp-fila td:first-child { border-left: 6px solid var(--mp-color, #bdbdbd); }
.mp-cuenta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 14px;
    font-size: 0.85rem;
    background: color-mix(in srgb, var(--mp-color, #bdbdbd) 16%, transparent);
    border: 1px solid var(--mp-color, #bdbdbd);
    white-space: nowrap;
}
.mp-leyenda { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }

/* ---------- Tienda: lateral de categorías en acordeón ---------- */
.tienda-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.tienda-layout.sin-lateral { grid-template-columns: minmax(0, 1fr); }
.tienda-lateral {
    position: sticky;
    top: 16px;
    padding: 12px 8px 12px 12px;
    border-radius: 16px;
    background: var(--md-sys-color-surface, #fff);
    border: 1px solid var(--md-sys-color-surface-variant, #e7e0ec);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}
.tienda-lateral-titulo { font-weight: 600; font-size: 1rem; padding: 4px 4px 8px; cursor: default; list-style: none; }
.tienda-lateral-titulo::-webkit-details-marker { display: none; }
.cat-tienda-lista { list-style: none; margin: 0; padding: 0; }
.cat-tienda-lista .cat-tienda-lista { padding-left: 14px; margin-left: 6px; border-left: 1px solid var(--md-sys-color-surface-variant, #e7e0ec); }
.cat-tienda-lista summary { cursor: pointer; padding: 2px 0; }
.cat-tienda-link {
    display: inline-block;
    padding: 5px 8px;
    border-radius: 8px;
    color: var(--md-sys-color-on-surface, #1d1b20);
    text-decoration: none;
    font-size: 0.93rem;
    line-height: 1.25;
}
.cat-tienda-hoja { margin-left: 18px; }
.cat-tienda-link:hover { background: var(--md-sys-color-surface-variant, #f3edf7); }
.cat-tienda-link.activa { background: var(--md-sys-color-primary-container, #eaddff); font-weight: 600; }
.cat-tienda-cant { color: var(--md-sys-color-on-surface-variant, #625b71); font-weight: 400; }

@media (max-width: 899px) {
    .tienda-layout { grid-template-columns: minmax(0, 1fr); }
    .tienda-lateral { position: static; max-height: none; }
    .tienda-lateral-titulo { cursor: pointer; }
    .tienda-lateral-titulo::after { content: ' ▾'; }
}
@media (min-width: 900px) {
    .tienda-lateral-titulo { pointer-events: none; }
}

/* ---------- Ventas: total modificable y filas con total ajustado ---------- */
.total-ajuste {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: -6px 0 12px;
}
.total-ajuste label {
    font-weight: 600;
}
.total-ajuste input[type="number"] {
    width: 150px;
    text-align: right;
    font-weight: 700;
    font-size: 1.05rem;
}
/* Fila de una venta cuyo cobro difiere del total de lista: amarillo suave a tono con el violeta de la app. */
.fila-ajustada,
.fila-ajustada td {
    background: #fff6d6;
}
.fila-ajustada td:first-child {
    box-shadow: inset 4px 0 0 #e0a800;
}
.cobrado-ajustado {
    font-weight: 700;
    color: var(--warn-color);
}
@media (max-width: 720px) {
    .tabla-facturas tbody tr {
        grid-template-areas:
            "comp estado"
            "cliente cliente"
            "fecha fecha"
            "suc suc"
            "user user"
            "total cobrado"
            "acc acc";
    }
    .tabla-facturas td:nth-child(8) { grid-area: cobrado; font-weight: 700; font-size: 1.05rem; }
    .tabla-facturas td:nth-child(9) { grid-area: estado; justify-self: end; }
    .tabla-facturas td:nth-child(10) { grid-area: acc; justify-self: end; }
}

/* ---------- Procesos en segundo plano ---------- */
.badge-info {
    background: var(--md-sys-color-secondary-container, #e8def8);
    color: var(--md-sys-color-on-secondary-container, #1d192b);
}
.fila-proceso-error td:first-child {
    box-shadow: inset 4px 0 0 var(--md-sys-color-error, #b3261e);
}

/* ---------- Vidriera: celular y tablet ---------- */
/* Tablet: el catálogo ocupa todo el ancho (el lateral de categorías pasa a acordeón) y se ve en 3 columnas. */
@media (min-width: 721px) and (max-width: 1023px) {
    .catalogo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Celular: 2 productos por fila, imágenes más bajas, buscador siempre a mano y todo lo tocable de al menos 44 px. */
@media (max-width: 720px) {
    .catalogo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .producto-card { border-radius: 12px; }
    .producto-card:hover { transform: none; }
    .producto-imagen { aspect-ratio: 4 / 3; }
    .producto-imagen-placeholder { font-size: 36px; }
    .producto-info { padding: 10px; gap: 2px; }
    .producto-titulo { font-size: 0.85rem; }
    .producto-precio { font-size: 1.15rem; margin: 0; }
    .producto-stock { font-size: 0.75rem; }
    .producto-badge { font-size: 0.65rem; padding: 2px 8px; top: 6px; left: 6px; }

    .tienda-contenido h1, .content > h1 { font-size: 1.4rem; line-height: 1.25; margin: 4px 0 12px; }

    /* El buscador queda fijo arriba al desplazarse, con el botón al lado en vez de debajo. */
    .catalogo-toolbar {
        position: sticky;
        top: 0;
        z-index: 20;
        background: var(--md-sys-color-background, #fff);
        padding: 8px 0;
        margin: 0 0 8px;
        flex-wrap: nowrap;
    }
    .catalogo-buscar { flex: 1 1 0; min-width: 0; }
    .catalogo-buscar-btn { flex: 0 0 auto; padding: 0 16px; }
    .catalogo-toolbar select { flex: 1 1 100%; }

    /* Categorías: filas más altas para tocar con el dedo. */
    .tienda-lateral-titulo { min-height: 44px; display: flex; align-items: center; }
    .cat-tienda-lista summary { min-height: 44px; display: flex; align-items: center; }
    .cat-tienda-link { min-height: 44px; display: inline-flex; align-items: center; }

    /* El botón del carrito no tapa el último producto: la página deja lugar abajo y el botón se centra. */
    .content:has(.tienda-layout) { padding-bottom: 96px; }
    .carrito-fab { right: 12px; left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); justify-content: center; padding: 14px 20px; min-height: 52px; }
}

@media (max-width: 720px) {
    /* El Total del carrito sí se muestra (la regla general lo oculta porque en Ventas se repite en la barra de abajo). */
    #carrito-modal .total-line { display: block; }
    .producto-detalle-galeria { aspect-ratio: 4 / 3; margin-bottom: 10px; }
    .qty-stepper button { width: 44px; height: 44px; }
    .qty-stepper input { height: 44px; }
    .checkout-pago { min-height: 48px; }
    /* Los botones de la hoja (agregar, finalizar...) quedan siempre a la vista al desplazarse. */
    #producto-modal .actions, #carrito-modal .actions, #checkout-modal .actions {
        position: sticky;
        bottom: -24px;
        padding: 10px 0 12px;
        background: var(--md-sys-color-surface, #fff);
    }
}

/* ---------- Errores de la aplicación: el error y su email se ven con el mismo color en Logs ---------- */
.fila-error,
.fila-error td {
    background: #fdecea;
}
.fila-error td:first-child {
    box-shadow: inset 4px 0 0 var(--md-sys-color-error, #b3261e);
}
.error-detalle summary { cursor: pointer; color: var(--md-sys-color-primary); font-size: 0.85rem; }
.error-detalle pre {
    max-height: 320px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.75rem;
    background: rgba(0, 0, 0, 0.04);
    padding: 8px;
    border-radius: 8px;
}

/* ---------- Combos de Stock ---------- */
.combo-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px 24px;
    margin: 16px 0;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--md-sys-color-surface-container, #f3edf7);
}
.combo-resumen > div { display: flex; flex-direction: column; gap: 2px; }
.combo-resumen strong { font-size: 1.15rem; }
.combo-resumen .field input { max-width: 200px; font-weight: 700; }


/* ---------- Tiendas combinadas (vidriera publica y administracion) ---------- */
.producto-tienda {
    display: inline-block;
    margin: 0 0 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--md-sys-color-on-secondary-container, #1d192b);
    background: var(--md-sys-color-secondary-container, #e8def8);
}

.tienda-filtro {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    cursor: pointer;
}

.tienda-filtro input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.carrito-tienda-titulo {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0 4px;
    padding: 6px 10px;
    border-radius: 10px;
    font-weight: 700;
    background: var(--md-sys-color-secondary-container, #e8def8);
    color: var(--md-sys-color-on-secondary-container, #1d192b);
}

.gracias-pedido {
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
    border-radius: 12px;
}

.gracias-pedido p {
    margin: 4px 0;
}

.tc-tiendas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 12px;
}

.tc-tienda-opcion {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* ---------- Control de stock ---------- */
.cs-resultado {
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.05rem;
}

.cs-ok {
    background: #d7f0dc;
    color: #0b3d1b;
}

.cs-falta {
    background: var(--md-sys-color-error-container, #f9dedc);
    color: var(--md-sys-color-on-error-container, #410e0b);
}

.cs-sobra {
    background: #ffe8b8;
    color: #4a3200;
}

.cs-ajuste {
    margin-top: 16px;
    padding: 14px 16px;
    border: 2px solid var(--md-sys-color-primary, #6750a4);
    border-radius: 14px;
}

/* ---------- Códigos de barras: estado de la generación ---------- */
.cb-progreso {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--md-sys-color-secondary-container, #e8def8);
}

.cb-progreso-ok {
    background: #d7f0dc;
    color: #0b3d1b;
}

.cb-progreso-aviso {
    background: #ffe8b8;
    color: #4a3200;
}

.cb-progreso-error {
    background: var(--md-sys-color-error-container, #f9dedc);
    color: var(--md-sys-color-on-error-container, #410e0b);
}

.cb-progreso-icono {
    font-size: 28px;
}

.cb-girar {
    animation: cb-girar 1s linear infinite;
}

@keyframes cb-girar {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Auditoría de responsive (2026-10-13): sin desborde horizontal de la página ---------- */
.lista-tamano {
    max-width: 100%;
}

/* Un campo dentro de una grilla/flex puede achicarse: sin esto, un input con ancho propio ensancha la página. */
.field {
    min-width: 0;
}

.field input,
.field select,
.field textarea {
    max-width: 100%;
    box-sizing: border-box;
}

/* Tortas de Reportes: tres columnas en escritorio, y bajan a 2 / 1 según el ancho (nunca fuerzan el ancho de la página). */
.card-grid-tortas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 16px;
}

/* Datos largos (URLs, rutas de archivos) en las pantallas de solo lectura: se parten en vez de empujar el ancho. */
.dato-largo {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ---------- Objetivos táctiles de 44 px en tablet y celular (y en cualquier pantalla táctil) ---------- */
@media (max-width: 1023px), (pointer: coarse) {
    .pv-combo .combo-input {
        min-height: 44px;
        box-sizing: border-box;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .pag-btn {
        width: 44px;
        height: 44px;
    }

    .brand {
        min-height: 44px;
    }

    md-filled-button,
    md-outlined-button,
    md-text-button,
    md-filled-tonal-button {
        --md-filled-button-container-height: 44px;
        --md-outlined-button-container-height: 44px;
        --md-text-button-container-height: 44px;
        --md-filled-tonal-button-container-height: 44px;
    }

    md-icon-button {
        --md-icon-button-state-layer-height: 44px;
        --md-icon-button-state-layer-width: 44px;
    }

    /* Enlaces dentro de un texto: el área de toque crece sin mover las líneas del párrafo. */
    p a:not(.copy-btn),
    small a,
    li a {
        padding: 14px 6px;
        margin: -14px -6px;
    }

    /* Enlaces sueltos (pie de página, "Términos y condiciones"). */
    footer a,
    .footer a,
    .pie a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

@media (max-width: 1023px), (pointer: coarse) {
    .lista-tamano,
    .tab-btn {
        min-height: 44px;
        box-sizing: border-box;
    }

    /* Íconos chicos dentro de las filas (copiar, miniatura): el área de toque llega a 44 px sin agrandar la fila. */
    .copy-btn,
    .miniatura-btn {
        position: relative;
    }

    .copy-btn::after,
    .miniatura-btn::after {
        content: "";
        position: absolute;
        inset: -10px;
    }
}

@media (max-width: 1023px), (pointer: coarse) {
    /* Enlaces chicos dentro de filas y textos: el área de toque llega a 44 px sin mover nada de lugar. */
    td a:not(.copy-btn),
    span a,
    small a {
        position: relative;
    }

    td a:not(.copy-btn)::after,
    span a::after,
    small a::after {
        content: "";
        position: absolute;
        inset: -10px -8px;
    }
}

/* ---------- Ventas: "Cambiar visualización" (cargar productos con lector / cámara) ---------- */
.lector-card {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lector-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lector-buscar {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--md-sys-color-primary);
    border-radius: 10px;
    padding: 0 8px 0 12px;
    background: var(--md-sys-color-surface);
}

.lector-buscar > .material-symbols-outlined {
    color: var(--md-sys-color-primary);
}

.lector-buscar input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1rem;
    padding: 12px 0;
}

.lector-cam-btn {
    border: none;
    background: transparent;
    color: var(--md-sys-color-primary);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.lector-cam-btn.activo {
    background: var(--md-sys-color-primary-container);
}

/* La cámara es una franja finita: muestra (y lee) solo la tira del medio, así no tapa la lista de lo que se va cargando. */
.lector-cam {
    position: relative;
    height: 84px;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
}

.lector-cam video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lector-guia {
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
    border-radius: 10px;
}

/* La línea roja del medio, como la de un lector de supermercado: late despacio para que se note que está leyendo. */
.lector-linea {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: #ff2d2d;
    box-shadow: 0 0 8px 1px rgba(255, 45, 45, 0.85);
    border-radius: 2px;
    animation: lector-linea-late 1.4s ease-in-out infinite;
}

@keyframes lector-linea-late {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.lector-cam-texto {
    position: absolute;
    left: 8px;
    bottom: 4px;
    padding: 1px 7px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.55);
    font-size: 11px;
    line-height: 1.3;
    color: #fff;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .lector-linea { animation: none; }
}

.lector-resultados {
    border: 1px solid var(--md-sys-color-outline-variant, var(--md-sys-color-outline));
    border-radius: 10px;
    overflow: hidden;
    max-height: 220px;
    overflow-y: auto;
}

.lector-sug {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--md-sys-color-surface-variant);
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 10px 12px;
    min-height: 44px;
    cursor: pointer;
}

.lector-sug small {
    color: var(--md-sys-color-on-surface-variant);
    white-space: nowrap;
}

.lector-sug.activo,
.lector-sug:hover {
    background: var(--md-sys-color-primary-container);
}

.lector-ayuda {
    margin: 0;
}

.lector-lista {
    overflow-y: auto;
    min-height: 90px;
    max-height: 38vh;
    border-top: 1px solid var(--md-sys-color-surface-variant);
}

.lector-vacio {
    padding: 14px 4px;
    margin: 0;
}

.lector-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 90px 40px;
    gap: 10px;
    align-items: center;
    padding: 8px 4px;
    border-bottom: 1px solid var(--md-sys-color-surface-variant);
}

.lector-fila.nuevo {
    background: var(--md-sys-color-primary-container);
    border-radius: 8px;
    animation: lector-resalte 1.2s ease-out;
}

@keyframes lector-resalte {
    from {
        background: var(--md-sys-color-tertiary-container, var(--md-sys-color-primary-container));
    }
}

.lector-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lector-nombre {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.lector-info small {
    color: var(--md-sys-color-on-surface-variant);
}

.lector-paso {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 8px;
    overflow: hidden;
}

.lector-paso button {
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1.2rem;
    width: 36px;
    height: 36px;
    cursor: pointer;
}

.lector-paso input {
    width: 54px;
    border: none;
    border-left: 1px solid var(--md-sys-color-outline-variant, var(--md-sys-color-outline));
    border-right: 1px solid var(--md-sys-color-outline-variant, var(--md-sys-color-outline));
    text-align: center;
    background: transparent;
    color: inherit;
    font: inherit;
    height: 36px;
    box-sizing: border-box;
    border-radius: 0;
    padding: 0 4px;
}

.lector-sub {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.lector-quitar {
    border: none;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lector-pie {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 6px;
}

.lector-pie strong {
    flex: 1 1 auto;
}

/* Celular: la ventana ocupa toda la pantalla (cámara arriba, lo escaneado en el medio, el botón siempre abajo). */
@media (max-width: 720px) {
    #lector-overlay .lector-card {
        max-width: none;
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    }

    #lector-overlay .lector-lista {
        flex: 1;
        max-height: none;
    }

    .lector-fila {
        grid-template-columns: minmax(0, 1fr) auto 44px;
        grid-template-areas: "info paso quitar" "info sub quitar";
    }

    .lector-fila .lector-info { grid-area: info; }
    .lector-fila .lector-paso { grid-area: paso; }
    .lector-fila .lector-sub { grid-area: sub; }
    .lector-fila .lector-quitar { grid-area: quitar; width: 44px; height: 44px; }

    .lector-paso button { width: 44px; height: 44px; }
    .lector-paso input { height: 44px; width: 52px; font-size: 16px; }

    .lector-pie md-filled-button {
        flex: 1 1 100%;
    }

    .lector-ayuda {
        display: none;
    }
}

/* Cargar con lector: cada producto con su cantidad, precio unitario y % de bonificación (segunda línea de la fila). */
.lector-card {
    max-width: 640px;
}

.lector-fila {
    grid-template-columns: minmax(0, 1fr) auto 40px;
    grid-template-areas: none;
    row-gap: 6px;
}

.lector-fila .lector-info,
.lector-fila .lector-sub,
.lector-fila .lector-quitar,
.lector-fila .lector-campos {
    grid-area: auto;
}

.lector-campos {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: flex-end;
}

.lector-campo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.75rem;
    color: var(--md-sys-color-on-surface-variant);
}

.lector-num {
    width: 110px;
    height: 36px;
    box-sizing: border-box;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 8px;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    font: inherit;
    font-size: 0.95rem;
    padding: 0 8px;
    text-align: right;
}

.lector-num-chico {
    width: 80px;
}

@media (max-width: 720px) {
    .lector-fila {
        grid-template-columns: minmax(0, 1fr) auto 44px;
        grid-template-areas: none;
    }

    .lector-num {
        height: 44px;
        font-size: 16px;
    }

    .lector-pie md-outlined-button,
    .lector-pie md-filled-button {
        flex: 1 1 100%;
    }
}

/* Aviso (no error) dentro de ventanas: ámbar suave. */
.aviso-box {
    background: var(--md-sys-color-tertiary-container, #ffe9b8);
    color: var(--md-sys-color-on-tertiary-container, #4a3400);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 12px 0;
    font-size: 0.95rem;
}

/* Logs: filtros (usuario, acción, módulo, fechas) en una fila que baja a varias en pantallas angostas. */
.logs-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: flex-end;
    margin: 4px 0 12px;
}

.logs-filtros .field {
    min-width: 150px;
    flex: 1 1 150px;
}

.logs-filtros .field input,
.logs-filtros .field select {
    padding: 8px 10px;
}

/* Ventas cobradas de menos (gris) o de más (rosa) respecto del total de lista: filas del listado y aviso del detalle. */
.fila-cobro-menos,
.fila-cobro-menos td {
    background: #eceff1;
}
.fila-cobro-menos td:first-child {
    box-shadow: inset 4px 0 0 #78909c;
}
.fila-cobro-mas,
.fila-cobro-mas td {
    background: #fde7f1;
}
.fila-cobro-mas td:first-child {
    box-shadow: inset 4px 0 0 #d81b7a;
}
.cobro-aviso {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border-radius: 12px;
    padding: 12px 16px;
    margin: 0 0 16px;
}
.cobro-aviso .material-symbols-outlined {
    flex: none;
}
.cobro-menos {
    background: #eceff1;
    color: #37474f;
    border-left: 4px solid #78909c;
}
.cobro-mas {
    background: #fde7f1;
    color: #7a1148;
    border-left: 4px solid #d81b7a;
}

/* ---------- Configuración → Empresa: altas claras (empresa, sucursal, punto de venta) y estructura más legible ---------- */
.estructura-jerarquia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface-variant);
}

.estructura-jerarquia li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 8px;
    border-radius: 999px;
    background: var(--md-sys-color-surface-variant);
}

.estructura-jerarquia li + li::before {
    content: "›";
    margin-right: 6px;
    margin-left: -6px;
    color: var(--md-sys-color-outline);
    font-size: 1.1rem;
}

.estructura-jerarquia .material-symbols-outlined {
    font-size: 18px;
}

.alta-titulo {
    margin: 4px 0 8px;
    font-size: 0.95rem;
    font-weight: 600;
}

.alta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}

.alta-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 12px 14px;
    text-align: left;
    font: inherit;
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant, var(--md-sys-color-outline));
    border-radius: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.alta-card:hover,
.alta-card:focus-visible {
    background: var(--md-sys-color-primary-container);
    border-color: var(--md-sys-color-primary);
}

.alta-icono {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
}

.alta-card:hover .alta-icono {
    background: var(--md-sys-color-surface);
}

.alta-texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.alta-texto small {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.8rem;
    line-height: 1.3;
}

.alta-mas {
    flex: none;
    color: var(--md-sys-color-primary);
}

.alta-card-enlace .alta-icono {
    background: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
}

.estructura-ayuda {
    margin: 4px 0 14px;
}

.estructura-cuenta {
    font-size: 0.8rem;
    color: var(--md-sys-color-on-surface-variant);
    background: var(--md-sys-color-surface-variant);
    border-radius: 999px;
    padding: 2px 10px;
    white-space: nowrap;
}

/* Sucursales y puntos de venta dentro de una empresa desplegada: una guía vertical a la izquierda marca los niveles. */
.sucursal-bloque {
    margin: 0 0 14px 12px;
    padding-left: 14px;
    border-left: 2px solid var(--md-sys-color-outline-variant, var(--md-sys-color-outline));
}

.sucursal-cab {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sucursal-cab > .material-symbols-outlined {
    color: var(--md-sys-color-primary);
}

.pv-lista {
    margin: 6px 0 0 8px;
    padding: 0;
    list-style: none;
}

.pv-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.9rem;
}

.pv-fila:hover {
    background: var(--md-sys-color-surface-variant);
}

.pv-fila > .material-symbols-outlined {
    font-size: 18px;
    color: var(--md-sys-color-on-surface-variant);
}

.pv-vacio {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--md-sys-color-on-error-container, var(--md-sys-color-error));
    background: var(--md-sys-color-error-container, #fdecea);
}

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

    .alta-card {
        min-height: 64px;
    }

    .sucursal-bloque {
        margin-left: 4px;
        padding-left: 10px;
    }
}

/* Sin la acción "Ver costos y ganancias": las columnas de costo y margen del listado de Stock no se muestran. */
.sin-costos .col-costo {
    display: none !important;
}

/* Usuarios iniciales de una empresa (un usuario por perfil): cada fila se tilda y recién ahí pide sus datos. */
.usuario-inicial {
    padding: 12px 14px;
    margin: 10px 0;
    border: 1px solid var(--md-sys-color-outline-variant, var(--md-sys-color-outline));
    border-radius: 14px;
    background: var(--md-sys-color-surface);
}

.usuario-inicial-cabecera {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-height: 44px;
    cursor: pointer;
}

.usuario-inicial-cabecera input {
    margin-top: 4px;
}

.usuario-inicial-campos {
    margin-top: 10px;
}

.usuario-inicial-campos[hidden] {
    display: none;
}

.ui-estado {
    display: block;
    min-height: 1.2em;
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface-variant);
}

.ui-estado.ok {
    color: var(--ok-color);
}

.ui-estado.mal {
    color: var(--md-sys-color-error);
}

@media (max-width: 720px) {
    .usuario-inicial-campos {
        grid-template-columns: 1fr;
    }
}

/* Descuentos por forma de pago: bloque en la ventana de cobro. */
.descuento-box {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
    border-radius: 12px;
    background: var(--md-sys-color-surface-container-low, rgba(103, 80, 164, 0.06));
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.descuento-box select { width: 100%; max-width: 100%; min-height: 44px; }

.descuento-box { min-width: 0; margin-left: 0; margin-right: 0; }
.descuento-box legend { float: left; width: 100%; padding: 0 0 4px; font-weight: 600; }
.descuento-box legend + * { clear: both; }
.descuento-radios { display: flex; flex-direction: column; gap: 2px; }
.descuento-radio { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.descuento-radio input { width: 20px; height: 20px; flex: none; margin: 0; }
.descuento-radio input:disabled + span { opacity: 0.5; }

/* ---------- Solapa "Caja registradora" de Ventas ---------- */
.cr-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.cr-caja {
    background: linear-gradient(160deg, #6a7480 0%, #444c55 55%, #343b42 100%);
    border-radius: 22px 22px 14px 14px;
    padding: 16px 16px 12px;
    color: #fff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    min-width: 0;
}
.cr-marca { font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; opacity: 0.85; margin-bottom: 10px; }
.cr-pantalla {
    background: #0e1a13;
    color: #8dffa5;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    border: 4px solid #1b2128;
    border-radius: 10px;
    padding: 10px 14px;
    min-height: 128px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6);
}
.cr-pantalla-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cr-pantalla-total span { font-size: 0.85rem; opacity: 0.8; }
.cr-pantalla-total strong { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 700; }
.cr-pantalla-linea { font-size: 0.95rem; margin-top: 6px; overflow-wrap: anywhere; }
.cr-pantalla-mensaje { min-height: 1.4em; color: #d4ffd9; }
.cr-mensaje-error { color: #ffb4a8 !important; }
.cr-entrada-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cr-entrada {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 12px 0 10px;
    padding: 12px 14px;
    font-size: 1.4rem;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    text-align: right;
    border-radius: 10px;
    border: 3px solid #1b2128;
    background: #f1f3f4;
    color: #111;
    min-height: 48px;
}
.cr-entrada:focus { outline: 3px solid #b69df8; outline-offset: 1px; }
.cr-teclado { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cr-tecla {
    min-height: 52px;
    border: 0;
    border-radius: 10px;
    background: #eceef0;
    color: #1d2227;
    font-size: 1.25rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 0 #9ba3ab;
}
.cr-tecla:active { transform: translateY(3px); box-shadow: 0 1px 0 #9ba3ab; }
.cr-tecla:focus-visible { outline: 3px solid #b69df8; outline-offset: 2px; }
.cr-tecla-mas { background: #8fd9a0; box-shadow: 0 4px 0 #4f9c61; }
.cr-tecla-menos { background: #f4a6a0; box-shadow: 0 4px 0 #b4635c; }
.cr-tecla-cancelar { background: #f6d27a; box-shadow: 0 4px 0 #b08d2d; }
.cr-tecla-facturar { background: #b69df8; box-shadow: 0 4px 0 #7357c4; }
.cr-cajon { margin-top: 14px; height: 26px; border-radius: 0 0 10px 10px; background: #2a3037; display: flex; justify-content: center; align-items: center; }
.cr-cajon span { width: 36%; height: 8px; border-radius: 6px; background: #14181c; }
.cr-ayuda { margin: 12px 0 0; padding-left: 18px; font-size: 0.85rem; opacity: 0.9; line-height: 1.5; }
.cr-ayuda kbd { background: rgba(255, 255, 255, 0.18); border-radius: 5px; padding: 0 6px; font-family: inherit; }

.cr-ticket-zona { display: flex; justify-content: center; min-width: 0; }
.cr-ticket {
    position: relative;
    width: min(100%, 360px);
    box-sizing: border-box;
    background: #fff;
    color: #1a1a1a;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 0.95rem;
    padding: 18px 16px 22px;
    margin-bottom: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    min-height: 320px;
}
.cr-ticket::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 10px;
    background: linear-gradient(135deg, #fff 25%, transparent 25%) -6px 0, linear-gradient(225deg, #fff 25%, transparent 25%) -6px 0;
    background-size: 12px 12px;
}
.cr-ticket-revision { outline: 3px solid #7357c4; outline-offset: 3px; }
.cr-t-empresa { text-align: center; font-weight: 700; font-size: 1.05rem; text-transform: uppercase; overflow-wrap: anywhere; }
.cr-t-sub { text-align: center; font-size: 0.8rem; color: #555; }
.cr-t-sep { border-top: 2px dashed #888; margin: 10px 0; }
.cr-t-lineas { max-height: 46vh; overflow-y: auto; }
.cr-t-linea { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.cr-t-desc { overflow-wrap: anywhere; }
.cr-t-imp { white-space: nowrap; }
.cr-t-detalle { font-size: 0.8rem; color: #666; white-space: pre; }
.cr-t-sel { background: #ffe9a8; }
.cr-t-vacio { text-align: center; color: #888; padding: 18px 0; }
.cr-t-total { display: flex; justify-content: space-between; font-size: 1.2rem; margin-bottom: 4px; }
.cr-t-pregunta { margin-top: 12px; padding: 8px; background: #efe9ff; color: #2b1d59; border-radius: 6px; font-size: 0.85rem; text-align: center; }

@media (max-width: 900px) {
    .cr-layout { grid-template-columns: minmax(0, 1fr); }
    .cr-ticket-zona { order: 2; }
}
@media (max-width: 480px) {
    .cr-tecla { min-height: 48px; }
    .cr-ayuda { display: none; }
}

/* Caja registradora: la ventana de cobro (dentro del formulario oculto de Nueva factura) tiene que verse igual. */
#panel-nueva.solo-modal { display: block !important; height: 0; overflow: visible; visibility: hidden; }
#panel-nueva.solo-modal #pago-overlay { visibility: visible; }

/* ---------- Ticket de la venta en "Nueva factura" ---------- */
.venta-lateral { display: none; }
.barra-ticket { display: inline-flex; }
.ticket-hoja-card { max-width: 420px; max-height: 90vh; overflow-y: auto; }
.ticket-hoja-card .cr-ticket { width: 100%; margin-bottom: 0; box-shadow: none; border: 1px solid var(--md-sys-color-outline-variant, #cac4d0); min-height: 0; }
.cr-t-elegible { cursor: pointer; }
.cr-t-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; justify-content: center; }
.cr-t-boton { min-height: 44px; min-width: 64px; padding: 0 14px; border-radius: 22px; border: 1px solid #7357c4; background: #fff; color: #2b1d59; font: inherit; font-weight: 600; cursor: pointer; }
.cr-t-boton-principal { background: #7357c4; color: #fff; }

@media (min-width: 1200px) {
    /* En PC la página de Ventas se ensancha para que entre el ticket al costado del formulario. */
    .content:has(#panel-nueva) { max-width: min(1400px, 100%); }
    #panel-nueva:not(.solo-modal) { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 24px; align-items: start; }
    #panel-nueva > * { grid-column: 1; min-width: 0; }
    #panel-nueva > .venta-lateral { display: block; grid-column: 2; grid-row: 1 / span 12; position: sticky; top: 96px; }
    .venta-lateral .cr-ticket { width: 100%; margin-bottom: 0; }
    .barra-ticket { display: none; }
}

@media (max-width: 720px) {
    .barra-emision .barra-ticket { grid-column: 1; justify-self: start; }
    .barra-emision .barra-total { grid-column: 2; }
}

/* ---------- Caja registradora en celular y tablet ---------- */
.cr-tecla-borrar, .cr-tecla-esc { background: #dfe3e6; }
.cr-tecla-ok { grid-column: span 2; background: #8fd9a0; box-shadow: 0 4px 0 #4f9c61; }
.cr-ticket-toggle { display: none; }
@media (max-width: 900px) {
    /* El ticket pasa arriba de la caja como una barra que se despliega: se ve el resumen sin tener que bajar hasta el final. */
    .cr-ticket-zona { order: -1; flex-direction: column; align-items: stretch; }
    .cr-ticket-toggle {
        display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 14px; box-sizing: border-box;
        border: 0; border-radius: 12px; background: #fff; color: #1a1a1a; font: inherit; font-weight: 600; cursor: pointer;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    }
    .cr-ticket-toggle > span:nth-child(2) { flex: 1; text-align: left; }
    .cr-ticket-flecha { transition: transform 0.15s; }
    .cr-ticket-abierto .cr-ticket-flecha { transform: rotate(180deg); }
    .cr-ticket-zona .cr-ticket { display: none; margin: 8px auto 0; max-height: 60vh; overflow-y: auto; }
    .cr-ticket-zona.cr-ticket-abierto .cr-ticket { display: block; }
    .cr-ticket::after { display: none; }
    .cr-layout { gap: 12px; }
}

/* ---------- Préstamos → Morosos ---------- */
.filtro-dias { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.filtro-dias input { width: 84px; min-height: 40px; padding: 4px 8px; box-sizing: border-box; text-align: right; }
.moroso-contacto-fila { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.moroso-contacto-fila .material-symbols-outlined { font-size: 18px; color: var(--md-sys-color-primary, #6750a4); flex: none; }
.moroso-detalle > td { background: var(--md-sys-color-surface-container, rgba(103, 80, 164, 0.06)); padding: 8px 12px; }
.moroso-cuotas { display: flex; flex-direction: column; gap: 2px; }
.moroso-cuota { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr 1.4fr 1fr; gap: 8px; padding: 6px 4px; align-items: center; }
.moroso-cuota-cab { font-weight: 600; font-size: 0.85rem; color: var(--md-sys-color-on-surface-variant, #49454f); border-bottom: 1px solid var(--md-sys-color-outline-variant, #cac4d0); }
.moroso-cuota:not(.moroso-cuota-cab) { border-bottom: 1px dashed var(--md-sys-color-outline-variant, #cac4d0); }
.moroso-detalle-btn.abierto .material-symbols-outlined { transform: rotate(180deg); }
@media (max-width: 720px) {
    .filtro-dias { width: 100%; }
    .moroso-detalle > td { display: block; }
    /* En celular cada cuota es una línea corta con sus datos en fila (sin encabezados). */
    .moroso-cuota-cab { display: none; }
    .moroso-cuota { display: flex; flex-wrap: wrap; gap: 4px 12px; }
}

/* ---------- Historial de turnos de caja: filas por cómo se cerraron + referencia de colores ---------- */
.fila-turno-bien,
.fila-turno-bien td { background: #e6f4ea; }
.fila-turno-bien td:first-child { box-shadow: inset 4px 0 0 #2e7d32; }
.fila-turno-sistema,
.fila-turno-sistema td { background: #e3f0fb; }
.fila-turno-sistema td:first-child { box-shadow: inset 4px 0 0 #1976d2; }
.leyenda-colores { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 12px; font-size: 0.9rem; color: var(--md-sys-color-on-surface-variant, #49454f); }
.leyenda-item { display: inline-flex; align-items: center; gap: 8px; }
.leyenda-muestra { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.18); flex: none; }
.leyenda-bien { background: #e6f4ea; box-shadow: inset 4px 0 0 #2e7d32; }
.leyenda-sistema { background: #e3f0fb; box-shadow: inset 4px 0 0 #1976d2; }
.leyenda-sin { background: #fff; }
@media (max-width: 720px) {
    /* En celular cada turno es una tarjeta: se pinta la tarjeta entera, no cada renglón. */
    .fila-turno-bien td, .fila-turno-sistema td { background: transparent; box-shadow: none; }
    .fila-turno-bien td:first-child, .fila-turno-sistema td:first-child { box-shadow: none; }
    .tabla-cards tbody tr.fila-turno-bien { background: #e6f4ea; }
    .tabla-cards tbody tr.fila-turno-sistema { background: #e3f0fb; }
}

/* ---------- Solapas con flechas (static/js/tabs-flechas.js) ---------- */
.tabs-strip-wrap { position: relative; margin-bottom: 16px; }
.tabs-strip-wrap > .tabs-strip { margin-bottom: 0; position: relative; }
.tabs-flecha {
    display: none;
    position: absolute;
    top: 0;
    bottom: 1px;
    width: 40px;
    padding: 0;
    border: 0;
    align-items: center;
    cursor: pointer;
    color: var(--md-sys-color-primary, #6750a4);
    z-index: 2;
}
.tabs-flecha .material-symbols-outlined { font-size: 28px; }
.tabs-flecha-izq { left: 0; justify-content: flex-start; background: linear-gradient(90deg, #f5f2fa 55%, transparent); }
.tabs-flecha-der { right: 0; justify-content: flex-end; background: linear-gradient(270deg, #f5f2fa 55%, transparent); }
.tabs-flecha:focus-visible { outline: 2px solid var(--md-sys-color-primary, #6750a4); outline-offset: -2px; }
.tabs-strip-wrap.tiene-izq > .tabs-flecha-izq,
.tabs-strip-wrap.tiene-der > .tabs-flecha-der { display: flex; }

/* ---------- Caja → Gastos ---------- */
.gasto-detalle > td { background: var(--md-sys-color-surface-container, rgba(103, 80, 164, 0.06)); padding: 10px 14px; }
.gasto-detalle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 20px; margin: 0; }
.gasto-detalle-grid dt { font-size: 0.8rem; color: var(--md-sys-color-on-surface-variant, #49454f); }
.gasto-detalle-grid dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.gasto-detalle-btn[aria-expanded="true"] .material-symbols-outlined { transform: rotate(180deg); }
@media (max-width: 720px) { .gasto-detalle > td { display: block; } }

/* ---------- Reportes → Gastos ---------- */
.gastos-kpis { margin-bottom: 16px; }
.gastos-agrupados { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 16px; }
.gastos-agrupados .card { margin-bottom: 0; }
.gastos-mini { width: 100%; border-collapse: collapse; }
.gastos-mini td { padding: 5px 4px; border-bottom: 1px dashed var(--md-sys-color-outline-variant, #cac4d0); }
.gastos-anulados { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.gastos-anulados input { width: 20px; height: 20px; }

/* Ruedita de carga global (spinner-global.js): aparece en el medio de la pantalla mientras un formulario se envía */
.spinner-global { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.28); }
.spinner-global.visible { display: flex; }
.spinner-rueda { width: 52px; height: 52px; border-radius: 50%; border: 5px solid rgba(255, 255, 255, 0.55); border-top-color: var(--md-sys-color-primary, #6750a4); animation: spinner-giro 0.8s linear infinite; }
@keyframes spinner-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner-rueda { animation-duration: 2.4s; } }

/* ---------- Documentacion del cliente ---------- */
.doc-cabecera { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.doc-subir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0; }
.doc-subir input[type="file"] { max-width: 100%; min-width: 0; font-size: 1rem; }
.doc-vacio { padding: 12px 0; }
.doc-grilla { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.doc-item { display: flex; flex-direction: column; border: 1px solid var(--md-sys-color-outline-variant, #cac4d0); border-radius: 12px; overflow: hidden; background: var(--md-sys-color-surface, #fff); min-width: 0; }
.doc-miniatura { display: flex; align-items: center; justify-content: center; height: 140px; background: var(--md-sys-color-surface-container, #f3edf7); }
.doc-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.doc-pdf { font-size: 56px; color: var(--md-sys-color-error, #b3261e); }
.doc-datos { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 0; min-width: 0; }
.doc-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-acciones { display: flex; justify-content: flex-end; padding: 2px 6px 6px; }
@media (max-width: 720px) { .doc-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .doc-miniatura { height: 110px; } }

/* ---------- Empresa: informacion para prestamos ---------- */
.ip-datos { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.ip-dato { font: inherit; font-size: 0.78rem; padding: 4px 8px; min-height: 32px; border-radius: 14px; cursor: pointer; border: 1px solid var(--md-sys-color-outline-variant, #cac4d0); background: var(--md-sys-color-surface-container, #f3edf7); color: var(--md-sys-color-on-surface, #1d1b20); }
.ip-dato:hover, .ip-dato:focus-visible { background: var(--md-sys-color-primary-container, #eaddff); outline: 2px solid var(--md-sys-color-primary, #6750a4); outline-offset: 1px; }
.ip-bloque { margin: 16px 0 0; }
.ip-bloque-cabecera { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ip-texto { width: 100%; max-width: 100%; box-sizing: border-box; font-family: ui-monospace, Consolas, monospace; font-size: 0.9rem; line-height: 1.45; padding: 10px; border-radius: 8px; border: 1px solid var(--md-sys-color-outline, #79747e); background: var(--md-sys-color-surface, #fff); color: var(--md-sys-color-on-surface, #1d1b20); resize: vertical; }
.ip-texto-chico { font-family: inherit; }
@media (max-width: 720px) { .ip-texto { font-size: 16px; } }

/* Boton verde (por ejemplo "Seguir mirando" del ingreso a la tienda): mismo boton relleno de Material con otro color */
.btn-verde {
    --md-filled-button-container-color: #2e7d32;
    --md-filled-button-label-text-color: #ffffff;
    --md-filled-button-hover-label-text-color: #ffffff;
    --md-filled-button-focus-label-text-color: #ffffff;
    --md-filled-button-pressed-label-text-color: #ffffff;
}