/* Estilos globales, parte 8 de 12: Punto de venta: encabezado editorial.
   Antes vivían en style.css. Las páginas cargan las 12 partes seguidas y
   en orden (la lista está al inicio de style.css): no cambies ese orden. */

/* ============================================================
   PUNTO DE VENTA — Header editorial minimalista
   Aplica a: ventas (POS), mesas (salón), pedidos (comandas),
             cotizaciones (cuaderno de propuestas).
   Sin recuadro oscuro, sin CTA, sin atajos visibles —
   solo turno + título + lede + cinta xicalcoliuhqui.
   ============================================================ */

.pos-header {
    position: relative;
    padding: 0.4rem 0 1.1rem;
    margin: 0 0 1.5rem;
    isolation: isolate;
}

/* Isologo terracota como watermark sutil, top-right del header */
.pos-header::after {
    content: "";
    position: absolute;
    top: -6px;
    right: 0;
    width: 86px;
    height: 86px;
    background-image: url("../img/isotipo-terracota.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}
.pos-header > * { position: relative; z-index: 1; }

.pos-header-folio {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin: 0 0 0.55rem;
}

.pos-header-titulo {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.8vw, 2.3rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.022em;
    color: var(--xt-carbon);
    margin: 0;
}

.pos-header-lede {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.93rem;
    line-height: 1.5;
    color: var(--xt-muted);
    margin: 0.4rem 0 0;
    max-width: 44rem;
}

.pos-header-greca {
    margin-top: 0.95rem;
    height: 10px;
    background-image: var(--xt-greca-soft);
    background-repeat: repeat-x;
    background-size: auto 10px;
    opacity: 0.55;
}

/* Strip de KPIs/folios — chips horizontales bajo el header */
.pos-folios {
    display: flex;
    gap: 0.5rem 0.85rem;
    flex-wrap: wrap;
    margin: 0 0 1.4rem;
}
/* Ficha editorial (ui-2): 4 px, borde completo de 1 px. El estado ya no es un
   borde grueso a la izquierda ni un fondo de color: es el cuadro de la ceja. */
.pos-folio {
    --pos-folio-marca: var(--xt-line-strong);
    flex: 1 1 140px;
    min-width: 130px;
    background: #FFFFFF;
    border: 1px solid var(--xt-line);
    border-radius: var(--ficha-radius, 4px);
    padding: 0.7rem 0.95rem;
    transition: border-color 0.15s ease;
}
.pos-folio.is-terracota { --pos-folio-marca: var(--xt-terracota); }
.pos-folio.is-jade      { --pos-folio-marca: var(--xt-jade); }
.pos-folio.is-carbon    { --pos-folio-marca: var(--xt-carbon); }
.pos-folio.is-ambar     { --pos-folio-marca: var(--xt-terracota-soft); }
.pos-folio-kicker {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin: 0 0 0.3rem;
}
.pos-folio-kicker::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.4rem;
    vertical-align: 0.05em;
    background: var(--pos-folio-marca);
}
.pos-folio-cifra {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.45rem;
    line-height: 1;
    color: var(--xt-carbon);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.pos-folio-meta {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    color: var(--xt-muted);
    margin: 0.3rem 0 0;
}

/* Pestañas de Mesas/Pedidos: la misma pestaña de la app (subrayado
   terracota de 3 px, MARCA-XTRYDE §12.5), con su contador. */
.pos-tabs {
    display: flex;
    gap: 0;
    margin: 0 0 1.25rem;
    border-bottom: 1px solid var(--xt-line);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pos-tabs::-webkit-scrollbar { display: none; }
.pos-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1rem;
    min-height: 44px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--xt-muted);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    margin-bottom: -1px;
    white-space: nowrap;
}
.pos-tab:hover { color: var(--xt-carbon); }
.pos-tab.is-active {
    color: var(--xt-carbon);
    border-bottom-color: var(--xt-terracota);
}
.pos-tab .pos-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.4rem;
    border-radius: var(--ficha-radius, 4px);
    background: var(--xt-terracota-dark, #BF360C);
    color: var(--xt-crema);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.pos-tab.is-active .pos-tab-badge { background: var(--xt-terracota-dark); color: var(--xt-crema); }

/* Sección editorial dentro de POS */
.pos-seccion {
    margin: 0 0 1.5rem;
}
.pos-seccion-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.6rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid var(--xt-line);
}
.pos-seccion-titulo {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--xt-carbon);
    margin: 0;
}
.pos-seccion-meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--xt-muted);
}

/* Ticket editorial — carrito POS y cuenta de mesa */
.pos-ticket {
    background: var(--xt-crema);
    border-radius: 12px;
    padding: 1.1rem 1.15rem 1.25rem;
    box-shadow: var(--ficha-sombra);
    position: relative;
    scroll-margin-top: 80px;
}
.pos-ticket::before,
.pos-ticket::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 8px;
    background-image: radial-gradient(circle at 6px 4px, transparent 4px, var(--xt-crema-2) 4px);
    background-size: 12px 8px;
    background-repeat: repeat-x;
}
.pos-ticket::before { top: -1px; }
.pos-ticket::after  { bottom: -1px; transform: rotate(180deg); }
.pos-ticket-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px dashed var(--xt-line);
}
.pos-ticket-titulo {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--xt-carbon);
    margin: 0;
}
.pos-ticket-folio {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--xt-muted);
}
.pos-ticket-total {
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1;
    color: var(--xt-terracota);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
}

@media (max-width: 720px) {
    .pos-folio { flex-basis: calc(50% - 0.5rem); }
}

/* Móvil estrecho: 3 chips equiparten ancho en una sola fila para evitar
   layout asimétrico 2+1 con el tercer chip estirado a 100%. */
@media (max-width: 640px) {
    .pos-folios { flex-wrap: nowrap; gap: 0.45rem; }
    .pos-folio {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.55rem 0.7rem;
    }
    /* Con letra legible (0.75rem) el título baja de renglón en lugar de
       cortarse con "…": "PRECIO PENDIENTE" se lee completo en 3 columnas. */
    .pos-folio-kicker {
        font-size: 0.75rem;
        letter-spacing: 0.06em;
        line-height: 1.25;
        overflow-wrap: break-word;
    }
    .pos-folio-cifra { font-size: 1.15rem; }
    .pos-folio-meta {
        font-size: 0.75rem;
        line-height: 1.3;
    }
}

/* Cotizaciones tiene 4 cuadros de conteo: el nowrap compartido de arriba
   (pensado para 3 chips en mesas/pedidos) los mete en UNA sola fila en telefono
   y aplasta/trunca los labels ("EN BORRA...", "CERRADAS...") encimando el numero
   decorativo. Los acomodamos en 2x2 con aire. (bug movil cotizaciones 2026-07-08) */
@media (max-width: 640px) {
    #cotizaciones-root .pos-folios {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    #cotizaciones-root .pos-folio {
        flex: initial;
        min-width: 0;
        padding: 0.6rem 0.8rem;
    }
    /* El numero decorativo (01/02/03/04) choca con el label en poco ancho. */
    #cotizaciones-root .pos-folio[data-folio-num]::after { content: none; }
    #cotizaciones-root .pos-folio-kicker { white-space: normal; font-size: 0.75rem; }
    #cotizaciones-root .pos-folio-cifra { font-size: 1.4rem; }
    #cotizaciones-root .pos-folio-meta { white-space: normal; }
}

/* Modal alto con footer fijo: el cuerpo scrollea y los botones quedan SIEMPRE
   visibles. Antes, en telefonos cortos el boton de confirmar caia bajo el fold
   y "no se veia en la pantalla" (ej. modal de anticipo). Reusable para modales
   con mucho contenido. (bug movil cotizaciones 2026-07-08) */
.cot-modal-scroll {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
    overflow: hidden;
}
.cot-modal-scroll .cot-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.cot-modal-scroll .cot-modal-footer {
    flex: 0 0 auto;
    border-top: 1px solid var(--color-borde, #E7DED2);
    background: white;
}
@media (max-width: 639px) {
    /* El bottom-sheet ya limita max-height; el scroll debe vivir en el cuerpo
       (no en .modal-contenido) para que el footer no se desplace. */
    .cot-modal-scroll { overflow: hidden !important; }
}

/* Catálogo del POS: el override global "grid-cols-2 → 1 columna" en móvil
   (línea ~900) está pensado para formularios. Para grids de cards (catálogo,
   menú, listados de tarjetas) queremos mantener 2 columnas en teléfono. */
@media (max-width: 639px) {
    #lista-productos.grid-cols-2,
    .grid-cards-mobile-2.grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Ticket/carrito en móvil: menos padding y sin sticky (estorba al scrollear
   un catálogo largo arriba). */
@media (max-width: 1023px) {
    .pos-ticket { padding: 0.95rem 1rem 1.1rem; }
    .pos-ticket.sticky { position: static !important; top: auto !important; }
}

/* Escritorio (>=1024px): el ticket es sticky dentro de su columna. Sin tope de
   altura, con muchos productos en el carrito crecía mas alto que la pantalla y
   el boton "Cobrar" del fondo quedaba fuera de vista e inalcanzable (habia que
   reducir el zoom). Lo acotamos a la altura visible y dejamos que SOLO la lista
   de items haga scroll interno; total, metodo de pago y el boton Cobrar quedan
   fijos y siempre visibles, sin importar cuantos productos haya. */
@media (min-width: 1024px) {
    .pos-ticket.sticky {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 2rem);
    }
    .pos-ticket.sticky > #carrito-items {
        flex: 1 1 auto;
        min-height: 3rem;
        max-height: none;
    }
    .pos-ticket.sticky > :not(#carrito-items) {
        flex-shrink: 0;
    }
}