:root {
    --ink: #14213d;
    --muted: #64748b;
    --paper: #f7f8fc;
    --card: #ffffff;
    --accent: #f59e0b;
    --line: #e5e7eb;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--paper);
    color: var(--ink);
}
.topbar {
    min-height: 70px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 6vw;
}
.brand { font-weight: 800; font-size: 1.25rem; color: var(--ink); text-decoration: none; }
nav { display: flex; gap: 22px; }
nav a { color: var(--ink); text-decoration: none; font-weight: 600; }
.container { width: min(1180px, 90vw); margin: 0 auto; padding: 48px 0; }
.hero {
    min-height: 390px;
    padding: 70px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #14213d, #243b67);
    color: white;
}
.hero h1 { font-size: clamp(2.2rem, 5vw, 4.4rem); max-width: 800px; line-height: 1.03; margin: 12px 0 20px; }
.hero p { font-size: 1.15rem; max-width: 650px; color: #dbeafe; }
.eyebrow { letter-spacing: .14em; font-weight: 800; font-size: .78rem; color: var(--accent); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.button {
    border: 0; border-radius: 12px; padding: 12px 18px;
    text-decoration: none; font-weight: 700; cursor: pointer;
}
.primary { background: var(--accent); color: #111827; }
.secondary { background: white; color: var(--ink); }
.stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 18px; margin: 24px 0 48px;
}
.stats article {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 18px; padding: 24px;
}
.stats strong { display: block; font-size: 2rem; }
.stats span { color: var(--muted); }
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 22px;
}
.product-card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 18px; overflow: hidden;
}
.product-card img, .image-placeholder {
    width: 100%; height: 220px; object-fit: contain;
}
.image-placeholder {
    display: grid; place-items: center; background: #e9eef7; color: var(--muted);
}
.product-body { padding: 18px; }
.product-body h3 { margin: 8px 0; }
.product-body p, .product-body small { color: var(--muted); }
.product-body strong { display: block; font-size: 1.2rem; margin: 14px 0; }
.whatsapp { color: #047857; font-weight: 700; text-decoration: none; }
.filters {
    display: grid; grid-template-columns: 1fr 240px auto;
    gap: 12px; margin: 24px 0 38px;
}
.filters input, .filters select {
    border: 1px solid var(--line); border-radius: 12px;
    padding: 12px; font: inherit; background: white;
}
.footer { text-align: center; padding: 30px; color: var(--muted); }
@media (max-width: 720px) {
    .topbar { align-items: flex-start; padding-top: 18px; padding-bottom: 18px; gap: 16px; }
    nav { gap: 10px; flex-wrap: wrap; }
    .hero { padding: 34px 24px; }
    .stats { grid-template-columns: 1fr; }
    .filters { grid-template-columns: 1fr; }
}

/* Versión 0.2 */
.alert{padding:14px 16px;border-radius:12px;margin-bottom:18px}.alert.success{background:#ecfdf5;color:#065f46}.alert.error{background:#fef2f2;color:#991b1b}
.auth-shell{min-height:65vh;display:grid;place-items:center}.auth-card,.panel-card{background:#fff;border:1px solid #e5e7eb;border-radius:22px;padding:30px;box-shadow:0 18px 50px rgba(20,33,61,.08)}.auth-card{width:min(460px,100%)}.auth-form,.field-group{display:grid;gap:14px}.field-group{gap:7px}.form-control,.auth-form input[type=file]{width:100%;padding:13px;border:1px solid #dbe1ea;border-radius:12px;background:#fff}.full-width{width:100%}.form-error,.error-list{color:#991b1b}
.dashboard-heading{background:linear-gradient(135deg,#14213d,#243b67);color:#fff;border-radius:24px;padding:36px;margin-bottom:24px}.dashboard-heading h1{font-size:clamp(2rem,4vw,3.4rem);margin:8px 0}.dashboard-heading p{color:#dbeafe}.compact-heading{padding:28px 32px}.dashboard-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:32px}.metric-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:22px}.metric-card span,.metric-card small{color:#64748b}.metric-card strong{display:block;font-size:2.2rem;margin:8px 0}.metric-card a{text-decoration:none;font-weight:700;color:#14213d}.warning-card{background:#fff7ed}.action-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.action-card{display:grid;gap:7px;background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:22px;text-decoration:none;color:#14213d}.action-icon{font-size:1.8rem}.table-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;overflow-x:auto}.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:15px 18px;text-align:left;border-bottom:1px solid #e5e7eb}.internal-search{display:grid;grid-template-columns:1fr auto auto;gap:12px;margin-bottom:28px}.internal-search input{padding:13px;border:1px solid #e5e7eb;border-radius:12px}.internal-product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}.internal-product-card{background:#fff;border:1px solid #e5e7eb;border-radius:20px;overflow:hidden}.internal-product-card img,.internal-product-card .image-placeholder{width:100%;height:240px;object-fit:cover}.internal-product-body{padding:20px}.product-meta-row{display:flex;gap:8px}.sku-badge,.category-badge{border-radius:999px;padding:6px 10px;font-size:.76rem;font-weight:800}.sku-badge{background:#e0e7ff;color:#3730a3}.category-badge{background:#ecfdf5;color:#065f46}.product-numbers{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}.product-numbers div{border:1px solid #e5e7eb;border-radius:14px;padding:14px}.wholesale-line{margin-bottom:16px;color:#64748b}.import-layout{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:24px}.result-card{margin-top:24px}
@media(max-width:900px){.dashboard-stats,.action-grid{grid-template-columns:repeat(2,1fr)}.import-layout{grid-template-columns:1fr}}@media(max-width:700px){.dashboard-stats,.action-grid,.internal-search{grid-template-columns:1fr}}
.toolbar-row{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:1rem}.toolbar-row .internal-search{flex:1;margin:0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.span-2{grid-column:span 2}.field-group input,.field-group select,.field-group textarea{width:100%;box-sizing:border-box;padding:.75rem;border:1px solid #d7dce3;border-radius:.55rem;background:#fff}.field-group label{display:block;font-weight:700;margin-bottom:.35rem}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.detail-grid dl{display:grid;grid-template-columns:140px 1fr;gap:.65rem}.detail-grid dt{font-weight:700}.detail-grid dd{margin:0}.status{display:inline-block;padding:.25rem .55rem;border-radius:999px;background:#e9edf2}.status.success{background:#dff4e5}.status.danger{background:#fde3e3}@media(max-width:760px){.form-grid,.detail-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.table-card{overflow:auto}}
/* Versión 0.6 · Cotizaciones */
.quote-header{margin-bottom:22px}.customer-summary{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}.customer-summary>div{padding:14px;border-radius:14px;background:#f8fafc;border:1px solid var(--line)}.customer-summary span,.quote-totals span{display:block;color:var(--muted);font-size:.85rem}.customer-summary strong{font-size:1.25rem}.quote-items{padding:0}.quote-items>.toolbar-row{padding:22px 24px 0}.quote-table-wrap{overflow:auto}.quote-table select{min-width:320px}.quote-table input{min-width:90px}.delete-cell{white-space:nowrap}.quote-totals{margin-left:auto;width:min(420px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;margin-top:22px}.quote-totals>div{display:flex;justify-content:space-between;padding:9px 0}.quote-totals .grand-total{border-top:2px solid var(--ink);margin-top:7px;padding-top:15px}.quote-totals .grand-total strong{font-size:1.6rem}.document-header{display:flex;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:18px;margin-bottom:24px}.document-header h2{margin:0}.document-total{margin-left:auto;width:min(360px,100%);text-align:right;padding-top:18px}.grand-total-line{font-size:1.35rem;border-top:2px solid var(--ink);padding-top:12px}.document-notes{margin-top:25px;padding:18px;background:#f8fafc;border-radius:14px}.quote-document{max-width:1000px;margin:auto}
@media print{.topbar,.footer,.no-print{display:none!important}.container{width:100%;padding:0}.panel-card,.table-card{box-shadow:none;border:0}.quote-document{padding:0}.data-table th,.data-table td{padding:8px;font-size:12px}}
@media(max-width:760px){.customer-summary{grid-template-columns:1fr}.quote-table select{min-width:240px}}

/* Panel gerencial v1.2 */
.dashboard-heading-row{display:flex;justify-content:space-between;gap:24px;align-items:flex-end}.rate-card{min-width:210px;padding:18px 22px;background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 10px 30px rgba(15,23,42,.06)}.rate-card span{display:block;color:#64748b;font-size:.84rem}.rate-card strong{display:block;margin-top:6px;font-size:1.35rem}.executive-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.operational-stats{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:14px}.metric-card.compact{min-height:auto;padding:18px}.metric-card.compact strong{font-size:1.75rem}.dashboard-two-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:22px 0}.panel-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:22px;box-shadow:0 12px 32px rgba(15,23,42,.05)}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.panel-title h2{margin:0;font-size:1.12rem}.panel-title a{font-size:.88rem}.bar-chart{height:260px;display:flex;gap:12px;align-items:flex-end;padding-top:25px}.bar-column{height:100%;flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}.bar-value{font-size:.72rem;color:#64748b;height:22px}.bar-track{height:190px;width:min(44px,75%);background:#eef2f7;border-radius:10px 10px 4px 4px;display:flex;align-items:flex-end;overflow:hidden}.bar-fill{width:100%;min-height:3px;background:linear-gradient(180deg,#2563eb,#0f4fb8);border-radius:10px 10px 0 0}.bar-label{font-size:.75rem;color:#475569;margin-top:8px;white-space:nowrap}.rank-list{display:flex;flex-direction:column;gap:10px}.rank-row{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid #eef2f7}.rank-row:last-child{border-bottom:0}.rank-number{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#eff6ff;color:#1d4ed8;font-weight:700}.rank-row strong,.rank-row small{display:block}.rank-row small{color:#64748b;margin-top:2px}.rank-row b{font-size:1.05rem}.table-panel{padding-bottom:8px}.table-panel .table-card{box-shadow:none;border:0}.overdue-row td{background:#fff7ed}.empty-state{color:#64748b;padding:24px 0}
@media(max-width:1050px){.executive-stats,.operational-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-two-columns{grid-template-columns:1fr}}@media(max-width:650px){.dashboard-heading-row{display:block}.rate-card{margin-top:16px}.executive-stats,.operational-stats{grid-template-columns:1fr}.bar-chart{gap:6px}.bar-value{font-size:.62rem}.bar-label{font-size:.65rem;transform:rotate(-25deg);margin-top:14px}}

/* Versión 1.4 · PWA y experiencia móvil */
.menu-toggle{display:none;border:1px solid rgba(255,255,255,.25);background:transparent;color:inherit;border-radius:10px;padding:8px 11px;font-size:1.25rem;cursor:pointer}.nav-install{border:0;border-radius:9px;padding:8px 11px;background:#fca311;color:#111827;font:inherit;font-weight:700;cursor:pointer}.connection-banner{position:sticky;top:0;z-index:20;margin:-8px 0 16px;padding:10px 14px;border-radius:10px;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;font-weight:700;text-align:center}
@media(max-width:860px){body{padding-bottom:env(safe-area-inset-bottom)}.topbar{display:grid;grid-template-columns:1fr auto;align-items:center}.menu-toggle{display:block}.topbar nav{display:none;grid-column:1/-1;flex-direction:column;align-items:stretch;width:100%;padding-top:12px}.topbar nav.is-open{display:flex}.topbar nav a,.topbar nav button{text-align:left;padding:11px 12px;border-radius:10px}.topbar nav a:hover{background:rgba(255,255,255,.08)}.container{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}.button{min-height:44px}.data-table th,.data-table td{padding:12px 10px}.toolbar-row{align-items:stretch}.toolbar-row .actions{width:100%}}
@media(display-mode:standalone){.topbar{padding-top:max(16px,env(safe-area-inset-top))}.nav-install{display:none!important}}
.smart-tools{display:flex;gap:.5rem;flex-wrap:wrap}.smart-tools input{flex:1;min-width:220px}.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}.muted{opacity:.7}
.internal-product-card {
    overflow: hidden;
}

.product-image-button {
    position: relative;
    display: block;
    width: 100%;
    height: 320px;
    padding: 0;
    border: 0;
    background: #f7f8fb;
    cursor: zoom-in;
    overflow: hidden;
}

.product-card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.25s ease;
}

.product-image-button:hover .product-card-image {
    transform: scale(1.03);
}

.image-zoom-label {
    position: absolute;
    right: 16px;
    bottom: 16px;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(10, 35, 77, 0.82);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.product-image-button:hover .image-zoom-label,
.product-image-button:focus-visible .image-zoom-label {
    opacity: 1;
    transform: translateY(0);
}

.product-number-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.product-number-box small {
    display: block;
}

.product-number-box strong {
    display: block;
    line-height: 1.15;
}

.secondary-price {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: #68758a;
}

.wholesale-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;
}

.product-image-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.product-image-modal.is-open {
    display: flex;
}

.product-image-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 12, 30, 0.82);
    backdrop-filter: blur(4px);
}

.product-image-modal-content {
    position: relative;
    z-index: 1;
    width: min(1000px, 94vw);
    max-height: 92vh;
    padding: 58px 24px 24px;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
    overflow: auto;
}

.product-image-modal-content h2 {
    margin: 0 50px 18px 0;
    color: #082552;
    font-size: clamp(1.3rem, 2vw, 2rem);
}

.product-image-modal-content img {
    display: block;
    width: 100%;
    max-height: 72vh;
    object-fit: contain;
    border-radius: 14px;
    background: #f5f6f8;
}

.product-image-modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #eef1f7;
    color: #082552;
    font-size: 31px;
    line-height: 1;
    cursor: pointer;
}

.product-image-modal-close:hover {
    background: #dfe5f0;
}

body.modal-open {
    overflow: hidden;
}

@media (max-width: 700px) {
    .product-image-button {
        height: 260px;
    }

    .product-image-modal {
        padding: 12px;
    }

    .product-image-modal-content {
        width: 100%;
        padding: 54px 14px 14px;
        border-radius: 16px;
    }
}
/* Ajuste definitivo de imágenes del catálogo */

.internal-product-card .product-image-wrapper {
    position: relative;
    width: 100%;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #ffffff;
    cursor: zoom-in;
}

.internal-product-card .product-image-wrapper .product-card-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 0;
}

.product-image-wrapper::after {
    content: "Ver imagen";
    position: absolute;
    right: 16px;
    bottom: 16px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(8, 37, 82, 0.88);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    pointer-events: none;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.product-image-wrapper:hover::after,
.product-image-wrapper:focus::after {
    opacity: 1;
    transform: translateY(0);
}

/* Ventana ampliada */

.image-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.82);
}

.image-modal.visible {
    display: flex !important;
}

.image-modal-box {
    position: relative;
    width: min(1000px, 95vw);
    max-height: 92vh;
    padding: 58px 20px 20px;
    overflow: auto;
    border-radius: 18px;
    background: #ffffff;
}

.image-modal-box img {
    width: 100% !important;
    height: auto !important;
    max-height: 75vh !important;
    object-fit: contain !important;
    display: block;
}

.image-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #e8edf5;
    color: #082552;
    font-size: 30px;
    cursor: pointer;
}

body.modal-open {
    overflow: hidden;
}

@media (max-width: 700px) {
    .internal-product-card .product-image-wrapper {
        height: 260px;
    }

    .product-image-wrapper::after {
        opacity: 1;
    }
}
.brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.brand-logo {
    display: block;
    width: auto;
    height: 58px;
    max-width: 150px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .brand-logo {
        height: 46px;
        max-width: 120px;
    }
}
.catalog-image-wrapper {
    cursor: pointer;
    overflow: hidden;
}

.catalog-image-wrapper .product-card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.25s ease;
}

.catalog-image-wrapper:hover .product-card-image,
.catalog-image-wrapper:focus .product-card-image {
    transform: scale(1.03);
}
.document-header-ou {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 2px solid #1f2937;
}

.document-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.document-logo {
    display: block;
    width: auto;
    height: 68px;
    max-width: 150px;
    object-fit: contain;
}

.document-company-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.document-company-info strong {
    font-size: 20px;
    color: #14213d;
}

.document-company-info span {
    font-size: 12px;
    color: #687386;
}

.document-reference {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 3px;
}

.document-reference strong {
    font-size: 13px;
    letter-spacing: 0.08em;
    color: #14213d;
}

.document-reference span {
    font-size: 20px;
    font-weight: 700;
}

.document-reference small {
    color: #687386;
}

@media print {
    .document-logo {
        height: 58px;
    }
}
.nav-alert-badge {
    display: inline-flex;
    min-width: 20px;
    height: 20px;
    margin-left: 5px;
    padding: 0 6px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #d92d20;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}