/**
 * DECORO PEDIDOS EXPRESS — Style PRO v2.0
 * Diseño tipo app nativa: bottom sheets, barra fija, FAB, modal cliente
 */

/* ====
   VARIABLES
==== */
:root {
    --c-primary:       #793879;
    --c-primary-dark:  #5a2a5a;
    --c-primary-light: #9b4d9b;
    --c-accent:        #c5a059;
    --c-accent-dark:   #a8863e;
    --c-bg:            #f2f2f7;
    --c-surface:       #ffffff;
    --c-surface-2:     #f8f8f8;
    --c-border:        #e0e0e0;
    --c-text:          #1a1a1a;
    --c-text-2:        rgba(102,102,102,.78);
    --c-success:       #34c759;
    --c-error:         #ff3b30;
    --c-warning:       #ff9500;
    --c-info:          #007aff;

    --font:            'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono:       'Courier New', monospace;

    --radius-sm:       6px;
    --radius:          12px;
    --radius-lg:       20px;
    --radius-full:     999px;

    --shadow-sm:       0 1px 4px rgba(0,0,0,.08);
    --shadow:          0 4px 16px rgba(0,0,0,.12);
    --shadow-lg:       0 8px 32px rgba(0,0,0,.18);

    --transition:      .22s cubic-bezier(.4,0,.2,1);

    /* Altura de la barra de acciones fija */
    --bar-h:           68px;
}

/* ====
   RESET & BASE
==== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font);
    background: var(--c-bg);
    color: var(--c-text);
    line-height: 1.6;
    font-size: 16px;
    /* espacio para barra fija inferior */
    padding-bottom: calc(var(--bar-h) + 16px);
}

/* ====
   CONTENEDOR
==== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ====
   HEADER — APP BAR
==== */
.header {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: var(--shadow);
}

.header-compact{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 0;
    min-height:60px;
}
.header-title{ display:flex; flex-direction:column; gap:2px; }
.logo{
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 1.1;
}
.subtitle{
    font-size: .8rem;
    color: rgba(255,255,255,.85);
    font-weight: 700;
    line-height: 1.1;
}
/* Utilidad: visible solo en desktop */
.desktop-only{ display: inline-flex; }
@media (max-width: 1024px){ .desktop-only{ display:none !important; } }

.app-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    min-height: 60px;
}

/* Marca */
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.brand-logo {
    height: 34px;
    width: auto;
    border-radius: 8px;
    background: rgba(255,255,255,.15);
    padding: 4px;
}

.brand-title {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: .5px;
    line-height: 1.2;
}

.brand-subtitle {
    font-size: .8rem;
    color: rgba(255,255,255,.85);
    font-weight: 600;
}

/* Botón "Cómo funciona" (modo app) */
.btn-como-funciona {
    padding: 8px 12px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: .85rem;
    border: 1.5px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.12);
    color: #fff;
    cursor: pointer;
    transition: var(--transition);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.btn-como-funciona:hover { background: rgba(255,255,255,.18); }
.btn-como-funciona.btn-pendiente { border-color: rgba(197,160,89,.8); box-shadow: 0 0 0 3px rgba(197,160,89,.15); }
.btn-como-funciona.btn-visto { opacity: .85; }

/* ====
   MAIN CONTENT
==== */
.main-content { padding: 20px 0 24px; }

/* ====
   CARDS
==== */
.card {
    background: var(--c-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid var(--c-border);
}

.card-header {
    background: var(--c-primary);
    color: #fff;
    padding: 18px 20px;
    border-bottom: 3px solid var(--c-accent);
}

.card-header h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.card-header .text-muted {
    color: rgba(255,255,255,.7);
    font-size: .85rem;
}

.card-body { padding: 20px; }

/* ====
   BADGES
==== */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: .8rem;
    font-weight: 600;
    background: var(--c-border);
    color: var(--c-text);
}

.badge-primary { background: var(--c-accent); color: #fff; }

.productos-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* ====
   FORMULARIOS
==== */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.form-group { margin-bottom: 16px; }

.form-group label {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: 6px;
    color: var(--c-text);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 1rem;
    background: var(--c-surface);
    color: var(--c-text);
    transition: var(--transition);
    -webkit-appearance: none;
    appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(121,56,121,.15);
}

.form-group textarea { resize: vertical; min-height: 80px; }

.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23793879' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.text-muted { color: var(--c-text-2); font-size: .85rem; }

.honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important; height: 1px !important;
    opacity: 0 !important;
}

/* ====
   BÚSQUEDA
==== */
.search-box {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.search-box input {
    flex: 1;
    padding: 12px 16px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-full);
    font-size: .95rem;
    background: var(--c-surface-2);
    transition: var(--transition);
}

.search-box input:focus {
    outline: none;
    border-color: var(--c-primary);
    background: var(--c-surface);
    box-shadow: 0 0 0 3px rgba(121,56,121,.12);
}

/* ====
   FILTROS COMPACTOS (botones tipo pill con dropdown)
==== */
.filtros-compactos {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.filtro-compacto {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    user-select: none;
    white-space: nowrap;
}

.filtro-compacto:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
    background: rgba(121,56,121,.05);
}

.filtro-compacto.filtro-activo {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}

.filtro-compacto .filtro-arrow {
    font-size: .7rem;
    transition: transform var(--transition);
}

.filtro-compacto.abierto .filtro-arrow {
    transform: rotate(180deg);
}

.filtro-label { font-weight: 400; opacity: .75; }
.filtro-valor { font-weight: 700; }

/* Botón limpiar filtros */
.btn-limpiar-filtros {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    border-radius: var(--radius-full);
    border: 1.5px solid #ffc0c0;
    background: #fff5f5;
    color: #c0392b;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.btn-limpiar-filtros:hover {
    background: #ffecec;
    border-color: #ff9b9b;
}

/* ====
   TABLA DE PRODUCTOS (ESCRITORIO)
==== */
.table-container {
    overflow-x: auto;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
}

.productos-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--c-surface);
}

.productos-table thead {
    background: var(--c-primary);
    color: #fff;
    position: sticky;
    top: 60px; /* altura del header */
    z-index: 10;
}

.productos-table th {
    padding: 13px 10px;
    text-align: left;
    font-weight: 600;
    font-size: .9rem;
    border-bottom: 3px solid var(--c-accent);
}

.productos-table th.cantidad-col { text-align: center; width: 120px; }

.productos-table tbody tr {
    border-bottom: 1px solid var(--c-border);
    transition: background var(--transition);
}

.productos-table tbody tr:hover { background: rgba(197,160,89,.08); }

.productos-table td {
    padding: 11px 10px;
    font-size: .9rem;
    vertical-align: middle;
}

.productos-table td input[type="number"] {
    width: 80px;
    padding: 8px;
    text-align: center;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: .95rem;
    font-weight: 600;
    transition: var(--transition);
    background: var(--c-surface);
}

.productos-table td input[type="number"]:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(121,56,121,.12);
}

/* resaltar cuando tiene valor */
.input-cantidad.con-valor {
    border-color: var(--c-success) !important;
    box-shadow: 0 0 0 3px rgba(52,199,89,.12);
}

/* ====
   CARDS DE PRODUCTOS (MÓVIL/TABLET)
==== */
.cards-productos-container {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.producto-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.producto-card-header {
    padding: 14px 16px 10px;
    border-bottom: 1px dashed rgba(0,0,0,.08);
}

.producto-nombre {
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 6px;
}

.producto-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: .82rem;
    color: var(--c-text-2);
}

.cantidad-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px 14px;
}

.cantidad-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: 2px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-primary);
    font-size: 1.4rem;
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition);
}

.cantidad-btn:hover { border-color: var(--c-primary); background: rgba(121,56,121,.06); }
.cantidad-btn:active { transform: scale(.97); }

.input-cantidad-card {
    width: 80px;
    padding: 10px 8px;
    text-align: center;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 700;
    background: var(--c-surface);
    transition: var(--transition);
}

.input-cantidad-card:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(121,56,121,.12);
}

/* ====
   ALERTS
==== */
.alert {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
    background: var(--c-surface-2);
    font-weight: 600;
}
.alert-info { border-color: rgba(0,122,255,.25); background: rgba(0,122,255,.08); }
.alert-danger { border-color: rgba(255,59,48,.25); background: rgba(255,59,48,.08); }
.alert-warning { border-color: rgba(255,149,0,.25); background: rgba(255,149,0,.08); }

/* ====
   BOTONES
==== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--radius-full);
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.btn:active { transform: translateY(1px); }

.btn-sm { padding: 10px 12px; font-size: .9rem; }

.btn-success { background: var(--c-success); color: #fff; }
.btn-success:hover { filter: brightness(.95); }

.btn-secondary { background: var(--c-border); color: var(--c-text); }
.btn-secondary:hover { filter: brightness(.96); }

.btn-info { background: var(--c-info); color: #fff; }
.btn-info:hover { filter: brightness(.95); }

.btn-danger { background: var(--c-error); color: #fff; }
.btn-danger:hover { filter: brightness(.95); }

/* ====
   LOADER / SPINNER
==== */
.spinner {
    border: 4px solid var(--c-border);
    border-top: 4px solid var(--c-accent);
    border-radius: 50%;
    width: 48px; height: 48px;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(197,160,89,.6); }
    70%  { box-shadow: 0 0 0 10px rgba(197,160,89,0); }
    100% { box-shadow: 0 0 0 0 rgba(197,160,89,0); }
}

/* ====
   MODAL GENÉRICO
==== */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 700;
    background: rgba(0,0,0,.6);
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn .25s;
}

.modal.activo,
.modal[style*="flex"] { display: flex; }

.modal-content {
    position: relative;
    background: var(--c-surface);
    border-radius: var(--radius);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: slideDown .28s cubic-bezier(.4,0,.2,1);
}

@keyframes slideDown {
    from { transform: translateY(-40px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

.modal-header {
    background: var(--c-primary);
    color: #fff;
    padding: 18px 22px;
    border-bottom: 3px solid var(--c-accent);
    border-radius: var(--radius) var(--radius) 0 0;
}

.modal-header h2 { font-size: 1.2rem; font-weight: 700; }

.modal-body { padding: 22px; }

.modal-footer {
    padding: 16px 22px;
    border-top: 1px solid var(--c-border);
}

.modal-close {
    position: absolute;
    right: 16px;
    top: 12px;
    font-size: 1.8rem;
    color: rgba(255,255,255,.8);
    cursor: pointer;
    transition: var(--transition);
    line-height: 1;
    background: none;
    border: none;
}

.modal-close:hover { color: #fff; transform: rotate(90deg); }

.info-box {
    background: var(--c-bg);
    padding: 18px;
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--c-accent);
}

.info-box h4 { color: var(--c-primary); margin: 14px 0 8px; }
.info-box ul, .info-box ol { margin-left: 20px; margin-bottom: 12px; }
.info-box li { margin-bottom: 6px; }

.warning-box {
    background: #fff3cd;
    padding: 14px;
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--c-warning);
    margin: 16px 0;
}

.warning-box h4 { color: #856404; margin-bottom: 8px; }

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

/* ====
   MODAL CLIENTE (lateral en desktop, bottom sheet en mobile)
==== */
#modal-cliente .modal-content {
    max-width: 520px;
}

/* ====
   TIPO ENTREGA — SEGMENTED CONTROL
==== */
.tipo-entrega-segment {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.segment-btn {
    flex: 1;
    padding: 10px 8px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--c-border);
    background: var(--c-surface);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--c-text);
}

.segment-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }

.segment-btn-activo {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}

/* ====
   SECCIÓN FINALIZAR
==== */
.finalizar-section { text-align: center; margin: 32px 0 0; }

/* ====
   TICKET
==== */
.ticket-section {
    background: var(--c-surface);
    padding: 40px 0;
    margin-top: 24px;
}

.ticket-actions { text-align: center; margin-bottom: 32px; }
.ticket-actions h2 { color: var(--c-success); margin-bottom: 8px; }

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    max-width: 760px;
    margin: 24px auto;
}

.ticket-impresion {
    max-width: 302px;
    margin: 0 auto;
    background: #fff;
    border: 2px dashed var(--c-border);
    padding: 20px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.4;
}

.ticket-header { text-align: center; border-bottom: 2px solid var(--c-primary); padding-bottom: 10px; margin-bottom: 10px; }
.ticket-header h1 { font-size: 22px; font-weight: bold; letter-spacing: 3px; }
.ticket-header p { font-size: 11px; margin: 4px 0 0; }

.ticket-info, .ticket-cliente, .ticket-productos, .ticket-total, .ticket-observaciones { margin-bottom: 10px; }
.ticket-info p, .ticket-cliente p, .ticket-total p, .ticket-observaciones p { margin: 3px 0; word-wrap: break-word; }

.ticket-divider { margin: 8px 0; color: var(--c-text-2); font-size: 10px; }

.ticket-productos table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.ticket-productos table th { text-align: left; border-bottom: 1px solid var(--c-text-2); padding: 3px 0; font-size: 11px; }
.ticket-productos table td { padding: 3px 0; font-size: 11px; vertical-align: top; }
.ticket-productos table td:last-child { text-align: right; }

.ticket-footer { text-align: center; border-top: 2px solid var(--c-primary); padding-top: 10px; margin-top: 10px; }
.ticket-footer p { margin: 3px 0; font-size: 10px; }

/* ====
   BARRA DE ACCIONES FIJA (BOTTOM BAR)
==== */
.barra-acciones {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 300;
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    box-shadow: 0 -4px 20px rgba(0,0,0,.12);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--bar-h);
    /* safe area para iPhone */
    padding-bottom: max(10px, env(safe-area-inset-bottom));
}

.barra-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    padding: 8px 4px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--c-text-2);
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.barra-btn:hover { background: var(--c-bg); color: var(--c-primary); }

.barra-btn .barra-icon {
    font-size: 1.3rem;
    line-height: 1;
}

.barra-btn-finalizar {
    flex: 2;
    background: var(--c-accent);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 10px 8px;
    font-size: .82rem;
}

.barra-btn-finalizar:hover { background: var(--c-accent-dark); color: #fff; }

/* Badge carrito */
.badge-carrito {
    position: absolute;
    top: 2px;
    right: calc(50% - 22px);
    background: var(--c-error);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

.badge-carrito.oculto { display: none; }

/* ====
   FAB SCROLL
==== */
.fab-scroll {
    position: fixed;
    right: 16px;
    bottom: calc(var(--bar-h) + 16px);
    z-index: 290;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--c-primary);
    color: #fff;
    border: none;
    box-shadow: var(--shadow);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    opacity: 0;
    pointer-events: none;
    transform: scale(.8);
}

.fab-scroll.visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.fab-scroll:hover { background: var(--c-primary-dark); transform: scale(1.08); }
.fab-scroll:active { transform: scale(.95); }

/* ====
   FOOTER
==== */
.footer {
    background: var(--c-primary);
    color: #fff;
    text-align: center;
    padding: 18px 0;
    margin-top: 24px;
}

.footer p { margin: 4px 0; font-size: .9rem; }
.version { font-size: .8rem; color: var(--c-accent); }

/* ====
   RESPONSIVE — TABLET (≤ 1024px) → Cards
==== */
@media screen and (max-width: 1024px) {
    .table-container { display: none; }
    .cards-productos-container { display: flex; }
}

/* ====
   RESPONSIVE — MOBILE (≤ 768px)
==== */
@media screen and (max-width: 768px) {
    .container { padding: 0 12px; }
    .card-body { padding: 14px; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .search-box { flex-direction: column; }
    .actions-grid { grid-template-columns: 1fr; }
    .modal-content { margin: 0; border-radius: var(--radius) var(--radius) 0 0; }

    .brand-logo { height: 28px; }
    .brand-title { font-size: 1.1rem; }
    .brand-subtitle { font-size: .75rem; }
    .btn-como-funciona { font-size: .78rem; padding: 7px 11px; }

    /* Bottom sheet ocupa más pantalla en mobile */
    .bottom-sheet { max-height: 88vh; }
}

/* ====
   RESPONSIVE — SMALL (≤ 480px)
==== */
@media screen and (max-width: 480px) {
    .filtros-compactos { gap: 6px; }
    .filtro-compacto { font-size: .8rem; padding: 7px 11px; }
    .barra-btn { font-size: .68rem; }
    .barra-btn .barra-icon { font-size: 1.2rem; }
}

/* ====
   IMPRESIÓN
==== */
@media print {
    body * { visibility: hidden; }
    #ticket-impresion, #ticket-impresion * { visibility: visible; }
    #ticket-impresion {
        position: absolute; left: 0; top: 0;
        width: 80mm; max-width: 80mm;
        margin: 0; padding: 5mm; border: none;
    }
    @page { size: 80mm auto; margin: 0; }
    body { margin: 0; padding: 0; }
    .no-print { display: none !important; }
    .ticket-impresion { font-size: 11px; background: white; }
    .ticket-header h1 { font-size: 20px; }
    .ticket-productos table { page-break-inside: avoid; }
}

/* =========================================================
   HISTORIAL Y TRACKING (Pantalla 3) — NUEVO
   Cards blancas, radius 16px, airy padding, badges suaves
========================================================= */
.historial-section {
    margin-top: 22px;
    padding: 0 0 10px;
}

.historial-header-top {
    padding: 18px 4px 10px;
}

.historial-title {
    color: var(--c-primary);
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.historial-subtitle {
    color: rgba(26,26,26,.65);
    font-size: .92rem;
}

.historial-container {
    display: flex;
    flex-direction: column;
    gap: 20px; /* mínimo 20px entre tarjetas */
    padding: 10px 0 6px;
}

.historial-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.historial-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.historial-id {
    font-weight: 800;
    color: var(--c-text);
}

.historial-fecha {
    font-size: .9rem;
    color: rgba(26,26,26,.65);
    margin-top: 2px;
}

.historial-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-top: 10px;
    font-size: .95rem;
}

.historial-meta strong { color: var(--c-primary); }

.historial-actions {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Badge estado (pendiente/entregado) */
.badge-estado {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge-pendiente {
    background: #fff3e0;
    color: #e67e22;
    border-color: rgba(230,126,34,.25);
}

.badge-entregado {
    background: #d4edda;
    color: #155724;
    border-color: rgba(21,87,36,.20);
}

/* Botón reordenar dorado */
.btn-reordenar {
    background: var(--c-accent);
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition);
}

.btn-reordenar:hover {
    background: var(--c-accent-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.btn-reordenar:active {
    transform: translateY(0);
}

/* Loader del botón WhatsApp (se aplica sobre .btn-info) */
.btn-loading {
    opacity: .75;
    pointer-events: none;
    position: relative;
}

.btn-loading::after {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.45);
    border-top-color: #fff;
    display: inline-block;
    margin-left: 10px;
    vertical-align: -2px;
    animation: spin .9s linear infinite;
}


/* =========================================================
   COMPAT & FIXES (PRODUCCIÓN SEGURA)
   - Alinea HTML↔CSS↔JS (clases reales del DOM/JS)
   - No cambia IDs, solo añade alias/estilos faltantes
========================================================= */

/* Header: el HTML usa .app-header */
.app-header { 
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: var(--shadow);
}

/* Alias para estructura real del header */
.header-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-actions { display: flex; align-items: center; gap: 10px; }

/* Toggle del formulario (solo desktop) */
.btn-toggle-panel { opacity: .95; }
@media (max-width: 1024px) { .btn-toggle-panel { display: none !important; } }

/* Modo app: por defecto, ocultar paneles tradicionales para dar foco a productos */
body.app-mode #seccion-cliente,
body.app-mode #seccion-validacion { display: none; }

body.app-mode.show-desktop-panels #seccion-cliente,
body.app-mode.show-desktop-panels #seccion-validacion { display: block; }

/* Sticky buscador+filtros para que el área de productos sea foco permanente */
.search-sticky-wrapper {
    position: sticky;
    top: 60px;
    z-index: 150;
    background: var(--c-bg);
    padding: 10px 0;
    margin: -6px 0 10px;
    border-bottom: 1px solid rgba(0,0,0,.04);
}

/* Bottom bar: el HTML usa .accion-btn (alias de .barra-btn) */
.accion-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    padding: 10px 6px;
    min-height: 48px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--c-text-2);
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.accion-btn:hover { background: var(--c-bg); color: var(--c-primary); }

.accion-icon { font-size: 1.35rem; line-height: 1; }
.accion-label { line-height: 1.05; }

/* Finalizar: botón primario */
.accion-btn-finalizar {
    flex: 2;
    background: var(--c-accent);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 10px 8px;
    font-size: .84rem;
}
.accion-btn-finalizar:hover { background: var(--c-accent-dark); color: #fff; }

/* Badges: carrito y alerta */
.accion-badge {
    position: absolute;
    top: 3px;
    right: calc(50% - 22px);
    background: var(--c-error);
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}
.accion-badge-alerta { background: var(--c-warning); color: #fff; }

/* Resaltado temporal en botón Seguridad (JS: .accion-btn-alerta) */
.accion-btn-alerta {
    animation: pulse-ring 1.2s infinite;
}

/* FAB: el JS ahora usa .visible */
.fab-scroll { will-change: transform, opacity; }

/* Overlay/sheets: JS usa overlay-visible y sheet-open */
.sheet-overlay.overlay-visible { display: block; }
.bottom-sheet.sheet-open { display: flex; }

/* Items de sheet: JS usa radio checked (no usa .seleccionado) */
.sheet-item input { display: none; }
.sheet-item-text { font-size: .95rem; color: var(--c-text); flex: 1; }
.sheet-item input:checked ~ .sheet-item-check {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}
.sheet-item input:checked ~ .sheet-item-text {
    font-weight: 700;
    color: var(--c-primary);
}

/* Modales tipo bottom sheet: HTML usa modal-bottom + modal-sheet + header/footer específicos */
.modal-bottom { align-items: flex-end; padding: 0; }
.modal-bottom .modal-content {
    width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: calc(92vh - env(safe-area-inset-bottom));
    overflow: hidden; /* evita doble scroll */
}
@media (min-width: 1025px) {
    .modal-bottom { align-items: center; padding: 20px; }
    .modal-bottom .modal-content { border-radius: var(--radius); max-height: 90vh; }
}

.modal-header-sheet {
    background: var(--c-primary);
    color: #fff;
    padding: 12px 18px 10px;
    border-bottom: 3px solid var(--c-accent);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.modal-header-sheet h3 { font-size: 1.05rem; font-weight: 800; }

.modal-close-sheet {
    position: absolute;
    right: 14px;
    top: 10px;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: none;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.modal-close-sheet:hover { background: rgba(255,255,255,.22); }

.modal-body-scroll {
    padding: 18px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.modal-footer-sheet {
    display: grid;
    gap: 10px;
    padding: 14px 18px 18px;
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
}

/* Animación de sheet en modales (JS: .sheet-open) */
.modal-sheet {
    transform: translateY(14px);
    opacity: .98;
    transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s cubic-bezier(.4,0,.2,1);
}
.modal-sheet.sheet-open { transform: translateY(0); opacity: 1; }

/* Forms en modal: grid compacto */
.form-row-modal {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 520px) { .form-row-modal { grid-template-columns: 1fr; } }

.select-touch { padding: 12px 14px; border-radius: var(--radius-sm); }
.input-seguridad { font-weight: 800; font-size: 1.05rem; text-align: center; }
.seguridad-info { font-size: .86rem; color: rgba(255,255,255,.8); }

/* Errores de validación (JS: .campo-requerido-error / .input-error-shake / .error-seguridad-msg) */
.campo-requerido-error input,
.campo-requerido-error select,
.campo-requerido-error textarea {
    border-color: var(--c-error) !important;
    box-shadow: 0 0 0 3px rgba(255,59,48,.14) !important;
}
.error-seguridad-msg {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: #fff5f5;
    border: 1px solid #ffc0c0;
    color: #c0392b;
    font-size: .9rem;
    font-weight: 700;
}

@keyframes input-shake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
    100% { transform: translateX(0); }
}
.input-error-shake { animation: input-shake .6s; }

/* Toast: mensaje copiado */
#mensaje-copiado {
    display: none;
    position: fixed;
    left: 50%;
    bottom: calc(var(--bar-h) + 14px);
    transform: translateX(-50%);
    z-index: 999;
    background: rgba(0,0,0,.82);
    color: #fff;
    padding: 10px 14px;
    border-radius: var(--radius-full);
    font-size: .88rem;
    box-shadow: var(--shadow);
}

/* Body: asegurar que la barra inferior nunca tape contenido (safe-area incluido) */
body {
    padding-bottom: calc(var(--bar-h) + max(16px, env(safe-area-inset-bottom)));
}


/* Botón limpiar filtros (HTML usa .filtro-limpiar) */
.filtro-limpiar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    border: 1.5px solid #ffc0c0;
    background: #fff5f5;
    color: #c0392b;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}
.filtro-limpiar:hover { background: #ffecec; border-color: #ff9b9b; }

/* Search input en sheets (si existe) */
.sheet-search-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-full);
    font-size: .9rem;
    background: var(--c-bg);
    transition: var(--transition);
}
.sheet-search-input:focus { outline: none; border-color: var(--c-primary); background: var(--c-surface); }

/* =========================================================
   UI REAL DEL DOM (index.php) — FIXES APK NATIVA
   - bottom-nav / chips / sheets (modal-sheet) / cards / modales app
   - NO toca IDs ni rompe flujos
========================================================= */

/* Bloqueo de scroll cuando hay modal abierto (JS: body.modal-open) */
body.modal-open{
    overflow: hidden;
    overscroll-behavior: contain;
}

/* Shell */
.app-shell{ min-height: 100vh; }

/* Paneles inline (solo si el usuario activa "Paneles") */
.panel-inline{ margin-bottom: 16px; }

/* Chips (filtros-bar) */
.filters-bar{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.chip{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    user-select: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.chip:hover{
    border-color: var(--c-primary);
    color: var(--c-primary);
    background: rgba(121,56,121,.05);
}
.chip:active{ transform: translateY(1px); }
.chip--active{
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}
.chip--clear{
    border-color: #ffc0c0;
    background: #fff5f5;
    color: #c0392b;
    font-weight: 900;
}
.chip--clear:hover{
    background: #ffecec;
    border-color: #ff9b9b;
    color: #a8271c;
}

/* =========================================================
   Bottom nav real (index.php)
========================================================= */
.bottom-nav{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 300;
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    box-shadow: 0 -4px 20px rgba(0,0,0,.12);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--bar-h);
    padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.bottom-nav__btn{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    min-height: 48px;
    padding: 8px 4px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--c-text-2);
    font-size: .72rem;
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.bottom-nav__btn:hover{ background: var(--c-bg); color: var(--c-primary); }
.bottom-nav__btn:active{ transform: translateY(1px); }

.bottom-nav__icon{ font-size: 1.3rem; line-height: 1; }
.bottom-nav__label{ line-height: 1.05; }

.bottom-nav__btn--primary{
    flex: 2;
    background: var(--c-accent);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 10px 8px;
    font-size: .82rem;
}
.bottom-nav__btn--primary:hover{ background: var(--c-accent-dark); color: #fff; }

.bottom-nav__badge{
    position: absolute;
    top: 2px;
    right: calc(50% - 22px);
    background: var(--c-error);
    color: #fff;
    font-size: .65rem;
    font-weight: 900;
    min-width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

/* =========================================================
   Modal app sizes (index.php usa modal-content--app / --wide)
========================================================= */
.modal-content--app{ max-width: 680px; }
.modal-content--wide{ max-width: 980px; }

/* =========================================================
   Sheets (modales de filtros) — index.php usa .modal.modal-sheet + .sheet-content
========================================================= */
.modal.modal-sheet{
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    transform: none;
    opacity: 1;
}
@media (min-width: 1025px){
    .modal.modal-sheet{ align-items: center; padding: 20px; }
}
.modal-sheet .sheet-content{
    width: 100%;
    max-width: 720px;
    background: var(--c-surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: calc(92vh - env(safe-area-inset-bottom));
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transform: translateY(16px);
    opacity: .98;
    transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s cubic-bezier(.4,0,.2,1);
}
.modal-sheet.is-open .sheet-content,
.modal-sheet.sheet-open .sheet-content{
    transform: translateY(0);
    opacity: 1;
}

/* Header de sheet con colores DECORO */
.modal-sheet .sheet-header{
    background: var(--c-primary);
    color: #fff;
    padding: 12px 18px 10px;
    border-bottom: 3px solid var(--c-accent);
}
.modal-sheet .sheet-header h3{
    font-size: 1.05rem;
    font-weight: 900;
}
.modal-sheet .sheet-close{
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: none;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: 1.4rem;
}
.modal-sheet .sheet-close:hover{ background: rgba(255,255,255,.22); color:#fff; }

.modal-sheet .sheet-body{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.modal-sheet .sheet-list{
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Items reales del sheet (JS: .sheet-item > button.sheet-item__btn.is-active) */
.modal-sheet .sheet-item{
    padding: 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.modal-sheet .sheet-item__btn{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border: none;
    background: transparent;
    color: var(--c-text);
    font-size: .98rem;
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition);
    text-align: left;
}
.modal-sheet .sheet-item__btn:hover{
    background: rgba(121,56,121,.06);
    color: var(--c-primary);
}
.modal-sheet .sheet-item__btn:focus{
    outline: none;
    box-shadow: 0 0 0 3px rgba(121,56,121,.15) inset;
}
.modal-sheet .sheet-item__btn.is-active{
    background: rgba(121,56,121,.10);
    color: var(--c-primary);
}
.modal-sheet .sheet-item__btn.is-active::after{
    content: "✓";
    font-weight: 900;
    color: var(--c-primary);
}

/* =========================================================
   Tabla/cards — index.php usa #productos-table-wrap y #productos-cards.productos-cards
========================================================= */
#productos-table-wrap{
    overflow-x: auto;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
}
.productos-cards{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 600px){ .productos-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px){ .productos-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Subestructura real de cards (JS: producto-card__*) */
.producto-card__top{
    padding: 14px 14px 10px;
    border-bottom: 1px dashed rgba(0,0,0,.08);
}
.producto-card__title{
    font-weight: 900;
    font-size: 1rem;
    color: var(--c-text);
    line-height: 1.25;
}
.producto-card__sku{
    margin-top: 6px;
    font-size: .84rem;
    color: var(--c-text-2);
}
.producto-card__meta{
    margin-top: 10px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.badge-outline{
    background: transparent;
    border: 1px solid rgba(121,56,121,.25);
    color: var(--c-primary);
}
.producto-card__bottom{
    padding: 10px 14px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Controles cantidad reales (JS: .qty-btn / .qty-input) */
.qty-btn{
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: 2px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-primary);
    font-size: 1.4rem;
    font-weight: 900;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.qty-btn:hover{ border-color: var(--c-primary); background: rgba(121,56,121,.06); }
.qty-btn:active{ transform: scale(.96); }

.qty-btn--sm{ width: 36px; height: 36px; font-size: 1.15rem; }

.qty-input{
    width: 86px;
    padding: 10px 8px;
    text-align: center;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 900;
    background: var(--c-surface);
    transition: var(--transition);
}
.qty-input:focus{
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(121,56,121,.12);
}
.input-cantidad.con-valor{ border-color: var(--c-success) !important; box-shadow: 0 0 0 3px rgba(52,199,89,.12); }

/* =========================================================
   Carrito modal / Finalizar modal (JS genera HTML con estas clases)
========================================================= */
.carrito-list{ display:flex; flex-direction:column; gap: 10px; }
.carrito-item{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
    background: var(--c-bg);
}
.carrito-item__title{ font-weight: 900; color: var(--c-text); }
.carrito-item__meta{ margin-top: 6px; display:flex; gap: 6px; flex-wrap:wrap; }
.carrito-tag{
    font-size: .75rem;
    font-weight: 800;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    padding: 3px 8px;
    border-radius: var(--radius-full);
    color: var(--c-text-2);
}
.carrito-item__qty{ display:flex; align-items:center; gap: 8px; }
.carrito-item__qtynum{ min-width: 34px; text-align:center; font-weight: 900; }

.finalizar-resumen{
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: 12px;
}
.finalizar-resumen__row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
}
.finalizar-lista__box{
    margin-top: 12px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: 12px;
}
.finalizar-lista__box ul{ margin-left: 18px; }