/* ====================================================================
   COMPRO Tienda — Estilos locales (sin CDN, reemplaza Tailwind)
   ==================================================================== */

/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box;border:0 solid #e2e8f0;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;line-height:1.5;tab-size:4}
body{margin:0;line-height:inherit;color:#1e293b;background:#f8fafc;font-family:'Outfit','Roboto',system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
button{font-family:inherit;font-size:100%;line-height:inherit;color:inherit;margin:0;padding:0;background:transparent;cursor:pointer;border:0}
input,select,textarea{font-family:inherit;font-size:100%;line-height:inherit;color:inherit;margin:0;padding:0}
input,button,select,textarea{outline:none}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
table{border-collapse:collapse;border-spacing:0}

/* ============ COLOR VARIABLES ============ */
:root{
  --brand-50:#f0f5fa;--brand-100:#e1ecf4;--brand-200:#c3d8e9;--brand-300:#a5c5df;
  --brand-400:#699ecb;--brand-500:#2d78b8;--brand-600:#0058b8;--brand-700:#004899;
  --brand-800:#00387a;--brand-900:#002a5c;
  --accent-50:#fdf2f2;--accent-100:#fce5e5;--accent-200:#f9cbcb;--accent-300:#f6b1b1;
  --accent-400:#f07e7e;--accent-500:#ea4a4a;--accent-600:#e31837;--accent-700:#c1142e;
  --accent-800:#9f1126;--accent-900:#830e20;
  --slate-50:#f8fafc;--slate-100:#f1f5f9;--slate-200:#e2e8f0;--slate-300:#cbd5e1;
  --slate-400:#94a3b8;--slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;
  --slate-800:#1e293b;--slate-900:#0f172a;
  --amber-50:#fffbeb;--amber-200:#fde68a;--amber-300:#fcd34d;--amber-500:#f59e0b;
  --amber-600:#d97706;--amber-700:#b45309;--amber-900:#78350f;
  --green-300:#86efac;--green-500:#22c55e;--green-600:#16a34a;--green-700:#15803d;
}

/* ============ CUSTOM (no Tailwind) ============ */
.scrollbar-hide::-webkit-scrollbar{display:none}
.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}
.custom-scrollbar::-webkit-scrollbar{height:6px}
.custom-scrollbar::-webkit-scrollbar-track{background:var(--slate-100);border-radius:4px}
.custom-scrollbar::-webkit-scrollbar-thumb{background:var(--brand-300);border-radius:4px}
.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--brand-400)}
.custom-scrollbar{scrollbar-width:thin;scrollbar-color:var(--brand-300) var(--slate-100)}
.drawer{transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.drawer.open{transform:translateX(0)}
.backdrop{opacity:0;pointer-events:none;transition:opacity .25s}
.backdrop.open{opacity:1;pointer-events:auto}
.modal{opacity:0;pointer-events:none;transition:opacity .2s}
.modal.open{opacity:1;pointer-events:auto}
.modal-content{transform:translateY(20px) scale(.97);transition:transform .25s cubic-bezier(.4,0,.2,1)}
.modal.open .modal-content{transform:translateY(0) scale(1)}
.product-card{transition:all .2s ease; border: 2px solid transparent}
.product-card:hover{transform:translateY(-2px); border-color: var(--brand-500); box-shadow: 0 10px 20px -5px rgba(0, 42, 92, 0.15)}
.toast{transform:translateY(20px);opacity:0;transition:all .3s}
.toast.show{transform:translateY(0);opacity:1}
.cat-pill{flex: 0 0 auto; white-space: nowrap}
.cat-pill.active{background:#1e3a8a;color:#fff;box-shadow:0 4px 12px -2px rgba(30,58,138,.4)}
.tab-btn.active{background:#1e3a8a;color:#fff}
.price-cell:focus{outline:2px solid #2563eb;outline-offset:-2px;background:#eff6ff}
.price-cell.changed{background:#fef3c7}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.bump{animation:bump .35s ease}
@keyframes pop{0%{transform:scale(.85)}100%{transform:scale(1)}}
.pop{animation:pop .2s ease}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.header-scrolled{box-shadow:0 4px 12px -4px rgba(0,0,0,.1)}
.pb-safe{padding-bottom:calc(env(safe-area-inset-bottom) + 1rem)}
.sticky-thead th{position:sticky;top:0;background:#f8fafc;z-index:1}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}

/* ============ CATEGORY CARDS ============ */
.category-card{background-color:#fff;border-radius:.75rem;padding:.75rem;border:2px solid var(--slate-200);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.375rem;transition:all .2s;flex-shrink:0;min-width:110px}
.category-card:hover{box-shadow:0 4px 10px -1px rgba(0, 42, 92, 0.1);transform:translateY(-2px); border-color: var(--brand-500)}
.category-card-icon{font-size:1.75rem}
.category-card-name{font-weight:700;font-size:.875rem;color:var(--brand-900);line-height:1.15}
.category-card-count{font-size:.7rem;color:var(--slate-500)}

/* ============ LAYOUT ============ */
.block{display:block}.inline-block{display:inline-block}.inline{display:inline}
.flex{display:flex}.inline-flex{display:inline-flex}
.grid{display:grid}.hidden{display:none}
.table-cell{display:table-cell}
.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.shrink-0{flex-shrink:0}
.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}
.col-span-full{grid-column:1 / -1}
.aspect-square{aspect-ratio:1/1}
.object-contain{object-fit:contain}.object-cover{object-fit:cover}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}

.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}

/* Spaces between children */
.space-y-1>*+*{margin-top:.25rem}
.space-y-2>*+*{margin-top:.5rem}
.space-y-3>*+*{margin-top:.75rem}
.space-y-4>*+*{margin-top:1rem}

/* ============ POSITION ============ */
.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}
.inset-0{inset:0}
.inset-y-0{top:0;bottom:0}
.top-0{top:0}.top-3{top:.75rem}.top-1\.5{top:.375rem}
.right-0{right:0}.right-2{right:.5rem}.right-3{right:.75rem}.right-1\.5{right:.375rem}
.left-0{left:0}.left-3{left:.75rem}.left-1\/2{left:50%}
.bottom-0{bottom:0}.bottom-6{bottom:1.5rem}
.-top-1{top:-.25rem}.-right-1{right:-.25rem}
.z-10{z-index:10}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}
.z-\[100\]{z-index:100}

.-translate-x-1\/2{transform:translateX(-50%)}

/* ============ SIZING ============ */
.w-4{width:1rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-10{width:2.5rem}
.w-12{width:3rem}.w-16{width:4rem}.w-20{width:5rem}.w-24{width:6rem}.w-28{width:7rem}
.w-auto{width:auto}.w-full{width:100%}
.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}
.h-9{height:2.25rem}.h-10{height:2.5rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-20{height:5rem}
.h-full{height:100%}
.min-w-0{min-width:0}
.min-w-\[20px\]{min-width:20px}.min-w-\[24px\]{min-width:24px}.min-w-\[180px\]{min-width:180px}
.max-w-sm{max-width:24rem}.max-w-md{max-width:28rem}.max-w-lg{max-width:32rem}
.max-w-2xl{max-width:42rem}.max-w-7xl{max-width:80rem}
.max-h-\[70vh\]{max-height:70vh}.max-h-\[92vh\]{max-height:92vh}

/* ============ SPACING ============ */
.p-0{padding:0}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}
.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-8{padding:2rem}
.px-1{padding-left:.25rem;padding-right:.25rem}
.px-1\.5{padding-left:.375rem;padding-right:.375rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}
.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}
.pl-10{padding-left:2.5rem}.pr-9{padding-right:2.25rem}

.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}.mt-12{margin-top:3rem}.mt-auto{margin-top:auto}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}
.ml-auto{margin-left:auto}.ml-4{margin-left:1rem}
.mx-auto{margin-left:auto;margin-right:auto}
.-mx-1{margin-left:-.25rem;margin-right:-.25rem}

/* ============ COLORS - TEXT ============ */
.text-white{color:#fff}
.text-slate-300{color:var(--slate-300)}
.text-slate-400{color:var(--slate-400)}
.text-slate-500{color:var(--slate-500)}
.text-slate-600{color:var(--slate-600)}
.text-slate-700{color:var(--slate-700)}
.text-slate-800{color:var(--slate-800)}
.text-slate-900{color:var(--slate-900)}
.text-brand-100{color:var(--brand-100)}
.text-brand-200{color:var(--brand-200)}
.text-brand-300{color:var(--brand-300)}
.text-brand-700{color:var(--brand-700)}
.text-brand-900{color:var(--brand-900)}
.text-accent-300{color:var(--accent-300)}
.text-accent-600{color:var(--accent-600)}
.text-accent-700{color:var(--accent-700)}
.text-amber-500{color:var(--amber-500)}
.text-amber-700{color:var(--amber-700)}
.text-amber-900{color:var(--amber-900)}
.text-green-300{color:var(--green-300)}
.text-green-600{color:var(--green-600)}

/* ============ COLORS - BG ============ */
.bg-white{background-color:#fff}
.bg-transparent{background-color:transparent}
.bg-slate-50{background-color:var(--slate-50)}
.bg-slate-100{background-color:var(--slate-100)}
.bg-slate-300{background-color:var(--slate-300)}
.bg-brand-700{background-color:var(--brand-700)}
.bg-brand-900{background-color:var(--brand-900)}
.bg-accent-50{background-color:var(--accent-50)}
.bg-accent-600{background-color:var(--accent-600)}
.bg-amber-50{background-color:var(--amber-50)}
.bg-amber-500{background-color:var(--amber-500)}
.bg-green-600{background-color:var(--green-600)}
.bg-black\/50{background-color:rgba(0,0,0,.5)}
.bg-black\/60{background-color:rgba(0,0,0,.6)}
.bg-white\/10{background-color:rgba(255,255,255,.1)}
.bg-white\/90{background-color:rgba(255,255,255,.9)}
.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-from,transparent),var(--tw-gradient-via,transparent),var(--tw-gradient-to,transparent))}
.from-brand-900{--tw-gradient-from:var(--brand-900)}
.via-brand-800{--tw-gradient-via:var(--brand-800)}
.to-brand-700{--tw-gradient-to:var(--brand-700)}

/* ============ BORDERS ============ */
.border{border-width:1px;border-style:solid}
.border-2{border-width:2px;border-style:solid}
.border-t{border-top-width:1px;border-top-style:solid}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-transparent{border-color:transparent}
.border-slate-100{border-color:var(--slate-100)}
.border-slate-200{border-color:var(--slate-200)}
.border-slate-300{border-color:var(--slate-300)}
.border-brand-800{border-color:var(--brand-800)}
.border-accent-200{border-color:var(--accent-200)}
.border-accent-600{border-color:var(--accent-600)}
.border-amber-200{border-color:var(--amber-200)}
.border-amber-300{border-color:var(--amber-300)}
.border-white\/20{border-color:rgba(255,255,255,.2)}

.rounded{border-radius:.25rem}
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-full{border-radius:9999px}
.rounded-l-full{border-top-left-radius:9999px;border-bottom-left-radius:9999px}
.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}
.rounded-t-2xl{border-top-left-radius:1rem;border-top-right-radius:1rem}

/* ============ TYPOGRAPHY ============ */
.text-\[10px\]{font-size:10px;line-height:1.3}
.text-\[11px\]{font-size:11px;line-height:1.3}
.text-\[13px\]{font-size:13px;line-height:1.3}
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-5xl{font-size:3rem;line-height:1}
.text-6xl{font-size:3.75rem;line-height:1}
.text-7xl{font-size:4.5rem;line-height:1}

.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

.text-left{text-align:left}
.text-center{text-align:center}
.text-right{text-align:right}

.leading-none{line-height:1}
.leading-tight{line-height:1.25}
.uppercase{text-transform:uppercase}
.tracking-wide{letter-spacing:.025em}
.tracking-widest{letter-spacing:.1em}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ============ EFFECTS ============ */
.shadow{--shadow-color:rgba(0,0,0,.1);box-shadow:0 1px 3px 0 var(--shadow-color),0 1px 2px -1px var(--shadow-color)}
.shadow-md{--shadow-color:rgba(0,0,0,.1);box-shadow:0 4px 6px -1px var(--shadow-color),0 2px 4px -2px var(--shadow-color)}
.shadow-lg{--shadow-color:rgba(0,0,0,.1);box-shadow:0 10px 15px -3px var(--shadow-color),0 4px 6px -4px var(--shadow-color)}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.shadow-card{box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04)}
.hover\:shadow-hover:hover{box-shadow:0 10px 25px -5px rgba(30,58,138,.15),0 8px 10px -6px rgba(30,58,138,.1)}
.shadow-green-600\/30{--shadow-color:rgba(22,163,74,.3)}
.shadow-accent-600\/30{--shadow-color:rgba(220,38,38,.3)}

.backdrop-blur{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* ============ OVERFLOW & SCROLL ============ */
.overflow-hidden{overflow:hidden}
.overflow-auto{overflow:auto}
.overflow-y-auto{overflow-y:auto}
.overflow-x-auto{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}

/* ============ TRANSITIONS ============ */
.transition{transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.transition-shadow{transition-property:box-shadow;transition-duration:.15s}

/* ============ INTERACTIVITY ============ */
.cursor-pointer{cursor:pointer}
.cursor-not-allowed{cursor:not-allowed}
.pointer-events-none{pointer-events:none}
.pointer-events-auto{pointer-events:auto}
.resize-none{resize:none}
.opacity-50{opacity:.5}

.outline-none{outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

.accent-brand-700{accent-color:var(--brand-700)}

/* ============ HOVER ============ */
.hover\:bg-slate-50:hover{background-color:var(--slate-50)}
.hover\:bg-slate-100:hover{background-color:var(--slate-100)}
.hover\:bg-slate-200:hover{background-color:var(--slate-200)}
.hover\:bg-accent-700:hover{background-color:var(--accent-700)}
.hover\:bg-brand-800:hover{background-color:var(--brand-800)}
.hover\:bg-green-700:hover{background-color:var(--green-700)}
.hover\:bg-amber-600:hover{background-color:var(--amber-600)}
.hover\:text-white:hover{color:#fff}
.hover\:text-slate-700:hover{color:var(--slate-700)}
.hover\:text-slate-900:hover{color:var(--slate-900)}
.hover\:text-brand-700:hover{color:var(--brand-700)}
.hover\:text-brand-900:hover{color:var(--brand-900)}
.hover\:text-accent-600:hover{color:var(--accent-600)}
.hover\:text-accent-700:hover{color:var(--accent-700)}

/* ============ FOCUS ============ */
.focus\:bg-white:focus{background-color:#fff}
.focus\:border-brand-500:focus{border-color:var(--brand-500)}
.focus\:border-amber-500:focus{border-color:var(--amber-500)}
.focus\:ring-2:focus{box-shadow:0 0 0 2px var(--brand-200)}
.focus\:ring-brand-200:focus{box-shadow:0 0 0 2px var(--brand-200)}

/* ============ ACTIVE ============ */
.active\:scale-90:active{transform:scale(.9)}
.active\:scale-95:active{transform:scale(.95)}
.active\:scale-\[\.99\]:active{transform:scale(.99)}

/* ============ PEER (custom checkbox toggle) ============ */
/* After pseudo content for the toggle */
.after\:content-\[\'\'\]::after{content:''}
.after\:absolute::after{position:absolute}
.after\:top-0\.5::after{top:.125rem}
.after\:left-0\.5::after{left:.125rem}
.after\:bg-white::after{background:#fff}
.after\:rounded-full::after{border-radius:9999px}
.after\:h-4::after{height:1rem}
.after\:w-4::after{width:1rem}
.after\:transition::after{transition:transform .2s ease}
/* Peer states */
.peer:checked ~ .peer-checked\:bg-green-500{background-color:var(--green-500)}
.peer:checked ~ .peer-checked\:after\:translate-x-4::after{transform:translateX(1rem)}

/* ============ RESPONSIVE ============ */
@media (min-width:640px){
  .sm\:block{display:block}
  .sm\:hidden{display:none}
  .sm\:inline{display:inline}
  .sm\:flex{display:flex}
  .sm\:table-cell{display:table-cell}
  .sm\:items-center{align-items:center}
  .sm\:rounded-2xl{border-radius:1rem}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sm\:max-w-md{max-width:28rem}
  .sm\:max-w-lg{max-width:32rem}
  .sm\:gap-4{gap:1rem}
  .sm\:px-4{padding-left:1rem;padding-right:1rem}
  .sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}
  .sm\:p-3{padding:.75rem}
  .sm\:p-4{padding:1rem}
  .sm\:p-5{padding:1.25rem}
  .sm\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}
  .sm\:text-xs{font-size:.75rem}
  .sm\:text-sm{font-size:.875rem;line-height:1.25rem}
  .sm\:text-lg{font-size:1.125rem;line-height:1.75rem}
  .sm\:text-xl{font-size:1.25rem;line-height:1.75rem}
  .sm\:text-2xl{font-size:1.5rem;line-height:2rem}
  .sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}
}
@media (min-width:768px){
  .md\:flex{display:flex}
  .md\:table-cell{display:table-cell}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1024px){
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* ============ FORM CONTROLS (extra polish) ============ */
input[type=text],input[type=tel],input[type=number],input[type=search],input[type=password],input[type=email],
textarea,select{
  display:block;width:100%;background:#fff;color:var(--slate-800);
  font-size:.875rem;line-height:1.5;
}
input[type=search]::-webkit-search-cancel-button{appearance:none}

/* Code element default */
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;background:var(--slate-100);padding:1px 6px;border-radius:4px}

/* Container helper used by max-w-7xl wrapper */
.max-w-7xl{margin-left:auto;margin-right:auto}