/* Carrito de Sophia · estilos propios (los de Tailwind están en tailwind.css) */
/* Cuadros de números sin flechitas: más espacio para los dígitos */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
/* ===== Tipografía estilo Apple: fuente del sistema, números alineados ===== */
html { -webkit-tap-highlight-color: transparent; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif; background: linear-gradient(180deg, #fff1f5 0px, #f5f5f7 280px) no-repeat, #f5f5f7; color: #1d1d1f; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-numeric: tabular-nums; }
h1, h2 { letter-spacing: -0.02em; }
h3 { letter-spacing: -0.01em; }
.text-xl, .text-2xl, .text-3xl, .text-4xl { letter-spacing: -0.02em; line-height: 1.1; }
.text-\[10px\], .text-\[9px\] { letter-spacing: 0.01em; }
button, [role="button"], summary, a, label, select, input, textarea { touch-action: manipulation; }

/* ===== Respuesta inmediata al presionar (al tocar, no al soltar) ===== */
button:not(:disabled), [role="button"], summary, label.cursor-pointer, a[href^="https://wa.me"] {
  transition-property: transform, background-color, border-color, color, box-shadow, opacity;
  transition-duration: 120ms, 150ms, 150ms, 150ms, 150ms, 150ms;
  transition-timing-function: ease-out;
}
button:not(:disabled):active, [role="button"]:active, summary:active, label.cursor-pointer:active, a[href^="https://wa.me"]:active { transform: scale(0.97); transition-duration: 60ms; }
.tab-btn:active { transform: scale(0.95); }

/* ===== Cabecera translúcida (material) con borde que aparece al desplazar ===== */
.fluid-header { background: rgba(255,255,255,0.72) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid transparent !important; box-shadow: none !important; transition: box-shadow 200ms ease, border-color 200ms ease; }
.fluid-header.is-scrolled { border-bottom-color: rgba(15,23,42,0.08) !important; box-shadow: 0 8px 24px -16px rgba(15,23,42,0.35) !important; }

/* ===== Pestañas con indicador que se desliza ===== */
.fluid-tabs { position: relative; }
.fluid-tab-indicator { position: absolute; left: 0; top: 0; width: 0; border-radius: 0.75rem; background: linear-gradient(135deg, #e11d5b 0%, #be1249 100%); box-shadow: 0 6px 16px -6px rgba(225,29,91,0.55); pointer-events: none; z-index: 0; will-change: transform, width; }
.fluid-tabs .tab-btn { position: relative; z-index: 1; }
.fluid-tabs .tab-btn.active { background: transparent !important; box-shadow: none !important; color: #fff; }
.fluid-tabs .tab-btn.active:hover { background: transparent !important; }

/* ===== Ventanas: velo que se atenúa + hoja inferior en celular ===== */
/* El velo es una capa propia: se atenúa en el compositor (sin desenfoque animado, que es lento en celular) */
.fluid-modal { background-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overscroll-behavior: contain; }
.fluid-scrim { position: fixed; inset: 0; z-index: -1; background: rgba(15,23,42,0.5); pointer-events: none; }
.fluid-modal > div:first-child { will-change: transform, opacity; }
.fluid-grabber { display: none; }
@media (max-width: 639px) {
  .fluid-modal.fluid-sheet { align-items: flex-start !important; padding: 0 !important; }
  .fluid-modal.fluid-sheet > div:first-child { position: relative; margin: auto 0 0 0 !important; width: 100% !important; max-width: none !important; border-radius: 22px 22px 0 0 !important; border-bottom: 0 !important; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -10px 40px -10px rgba(15,23,42,0.35) !important; }
  .fluid-modal.fluid-sheet .fluid-grabber { display: block; position: absolute; top: 7px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 999px; background: rgba(255,255,255,0.85); box-shadow: 0 0 0 0.5px rgba(15,23,42,0.25); z-index: 5; }
  .fluid-modal.fluid-sheet .fluid-sheet-handle { touch-action: none; cursor: grab; }
  /* La hoja ocupa solo el área visible (sobre el teclado): encabezado y pie fijos, el medio se desplaza.
     --vv-h / --vv-top los calcula fluido.js con visualViewport. */
  .fluid-modal.fluid-sheet { top: var(--vv-top, 0px) !important; bottom: auto !important; height: var(--vv-h, 100dvh) !important; overflow: hidden !important; }
  .fluid-modal.fluid-sheet > div:first-child { display: flex !important; flex-direction: column !important; margin: auto 0 0 0 !important; max-height: calc(var(--vv-h, 100dvh) - 8px) !important; }
  .fluid-modal.fluid-sheet > div:first-child > * { flex-shrink: 0; }
  .fluid-modal.fluid-sheet .fluid-sheet-body { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .fluid-modal.fluid-sheet .fluid-sheet-shrink { flex-shrink: 1 !important; min-height: 0 !important; overflow-y: auto !important; }
  /* Casillas con letra de 16 px: así el celular no hace zoom al escribir (eso deformaba la app) */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea { font-size: 16px !important; }
}

/* ===== Avisos y menús como material translúcido ===== */
.fluid-toast { background: rgba(28,28,30,0.88); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 12px 32px -12px rgba(0,0,0,0.45); }
.fluid-popover { background: rgba(255,255,255,0.9); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); }
details[open] > div.absolute { transform-origin: top right; animation: fluidMenuIn 320ms cubic-bezier(0.2, 0.9, 0.25, 1); }
@keyframes fluidMenuIn { from { opacity: 0; transform: scale(0.94) translateY(-4px); } to { opacity: 1; transform: none; } }


/* ===== Barra lateral (tablet/PC), barra superior y barra inferior (celular) ===== */
:root { --sb-w: 76px; --sb-w-open: 252px; --bb-h: 64px; }
.app-sidebar { display: none; }
.app-bottombar { display: none; }
@media (min-width: 640px) {
  body { padding-left: var(--sb-w); transition: padding-left 380ms var(--fluid-ease, cubic-bezier(0.2,0.9,0.25,1)); }
  body.sb-expanded { padding-left: var(--sb-w-open); }
  .app-sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 35; width: var(--sb-w); display: flex; flex-direction: column; gap: 2px; padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); overflow-y: auto; overflow-x: hidden;
    background: rgba(255,255,255,0.78); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-right: 1px solid rgba(15,23,42,0.08);
    transition: width 380ms var(--fluid-ease, cubic-bezier(0.2,0.9,0.25,1)); scrollbar-width: none; }
  .app-sidebar::-webkit-scrollbar { display: none; }
  body.sb-expanded .app-sidebar { width: var(--sb-w-open); }
}
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 2px 4px 12px; min-height: 52px; }
.sb-brand img { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; box-shadow: 0 2px 8px rgba(0,0,0,0.15); background: #fff; flex-shrink: 0; }
.sb-brand b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -0.02em; color: #1d1d1f; white-space: nowrap; }
.sb-brand small { display: block; font-size: 11px; color: #64748b; font-weight: 500; white-space: nowrap; }
.sb-nav { position: relative; display: flex; flex-direction: column; gap: 2px; }
.sb-sec { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: #64748b; text-transform: uppercase; padding: 12px 10px 4px; white-space: nowrap; }
.sb-item { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 12px; color: #334155; font-size: 14px; font-weight: 600; text-align: left; white-space: nowrap; }
.sb-item:hover { background: rgba(15,23,42,0.05); }
.sb-ic { width: 26px; text-align: center; font-size: 18px; flex-shrink: 0; }
.sb-badge { margin-left: auto; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: rgba(15,23,42,0.08); color: #334155; }
.sb-nav .sb-item.active { color: #fff; background: transparent !important; box-shadow: none !important; }
.sb-nav .sb-item.active:hover { background: transparent; }
.sb-nav .sb-item.active .sb-badge { background: rgba(255,255,255,0.25); color: #fff; }
.sb-group-head { color: #64748b; font-size: 13px; }
.sb-group-head > .sb-label:not(.sb-chev) { flex: 1; }
.sb-group-head .sb-badge { margin-left: 0; }
.sb-chev { margin-left: 6px; font-size: 11px; color: #94a3b8; transition: transform 240ms ease; }
.sb-group-head[aria-expanded="true"] .sb-chev { transform: rotate(180deg); }
.sb-group-head[aria-expanded="true"] [data-sb-group-badge] { display: none; }
.sb-group-head.has-active { color: #be1249; background: #fff1f5; }
.sb-group { display: none; flex-direction: column; gap: 2px; }
.sb-group.open { display: flex; }
/* Grupos desplegados: bloque gris con borde, para diferenciarlos de Principal */
.sb-group-head { margin-top: 6px; border: 1px solid transparent; }
.sb-group-head[aria-expanded="true"] { background: #eef2f7; border-color: #e2e8f0; border-bottom-color: transparent; border-radius: 12px 12px 0 0; color: #334155; font-weight: 700; }
.sb-group.open { background: #eef2f7; border: 1px solid #e2e8f0; border-top: 0; border-radius: 0 0 12px 12px; padding: 2px 4px 6px; box-shadow: inset 0 6px 8px -8px rgba(15,23,42,0.25); }
.sb-group.open .sb-item:not(.active):hover { background: #e2e8f0; }
body.sb-expanded .sb-group .sb-item { padding-left: 22px; }
body.sb-expanded .sb-group .sb-item .sb-ic { font-size: 16px; }
.sb-grow { flex: 1; min-height: 12px; }
.sb-sync { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; border-radius: 12px; background: #ecfdf5; color: #065f46; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sb-sync[data-state="local"], .sb-sync[data-state="saving"] { background: #f0f9ff; color: #075985; }
.sb-sync[data-state="error"] { background: #fffbeb; color: #92400e; }
.sb-dot { width: 9px; height: 9px; border-radius: 999px; background: #10b981; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(16,185,129,0.18); }
[data-cloud-badge][data-state="error"] .sb-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.2); }
[data-cloud-badge][data-state="local"] .sb-dot, [data-cloud-badge][data-state="saving"] .sb-dot { background: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,0.2); }
.sb-toggle { display: flex; align-items: center; gap: 10px; min-height: 40px; margin-top: 6px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(15,23,42,0.1); background: #fff; color: #475569; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sb-toggle-ic { width: 18px; text-align: center; font-size: 15px; transition: transform 380ms var(--fluid-ease, ease); }
/* Barra angosta: solo iconos */
body:not(.sb-expanded) .app-sidebar .sb-label { display: none; }
body:not(.sb-expanded) .app-sidebar .sb-item, body:not(.sb-expanded) .app-sidebar .sb-sync, body:not(.sb-expanded) .app-sidebar .sb-toggle { justify-content: center; padding: 0; }
body:not(.sb-expanded) .app-sidebar .sb-brand { justify-content: center; padding-left: 0; padding-right: 0; }
body:not(.sb-expanded) .app-sidebar .sb-badge { position: absolute; top: 1px; right: -2px; margin: 0; padding: 0 5px; font-size: 10px; background: #e2e8f0; }
body:not(.sb-expanded) .app-sidebar .sb-toggle-ic { transform: rotate(180deg); }
body:not(.sb-expanded) .app-sidebar .sb-nav { margin-top: 8px; }
.sb-indicator { position: absolute; left: 0; top: 0; width: 100%; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #e11d5b 0%, #be1249 100%); box-shadow: 0 6px 16px -6px rgba(225,29,91,0.55); pointer-events: none; z-index: 0; will-change: transform, height; }
/* Celular: barra inferior fija, como las apps de iPhone */
@media (max-width: 639px) {
  body { padding-bottom: calc(var(--bb-h) + env(safe-area-inset-bottom)); }
  .app-bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: space-around; align-items: stretch; height: calc(var(--bb-h) + env(safe-area-inset-bottom)); padding: 4px 4px env(safe-area-inset-bottom);
    background: rgba(255,255,255,0.82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid rgba(15,23,42,0.08); }
  #toastContainer { bottom: calc(var(--bb-h) + 10px + env(safe-area-inset-bottom)) !important; }
}
.bb-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #64748b; font-size: 10px; font-weight: 700; border-radius: 14px; }
.bb-ic { position: relative; font-size: 22px; line-height: 1; opacity: 0.7; transition: transform 300ms var(--fluid-ease, ease), opacity 200ms; }
.bb-item.active { color: #e11d5b; }
.bb-item.active .bb-ic { opacity: 1; transform: translateY(-1px) scale(1.1); }
.bb-badge { position: absolute; top: -6px; left: 60%; min-width: 18px; padding: 0 5px; border-radius: 999px; background: #e11d5b; color: #fff; font-size: 10px; font-weight: 800; line-height: 15px; text-align: center; border: 1.5px solid #fff; font-style: normal; }
.bb-badge[data-zero="1"], .sb-badge[data-zero="1"], .tb-badge[data-zero="1"] { display: none; }
.tb-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e11d5b; color: #fff; font-size: 10px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; }
@media (prefers-reduced-transparency: reduce) { .app-sidebar, .app-bottombar { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ===== Accesibilidad: reducir movimiento / transparencia / más contraste ===== */
@media (prefers-reduced-motion: reduce) {
  button:active, [role="button"]:active, summary:active, label.cursor-pointer:active { transform: none !important; }
  details[open] > div.absolute { animation: none; }
  * { scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .fluid-header { background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .fluid-toast { background: #1c1c1e; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .fluid-popover { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .fluid-header { background: #fff !important; border-bottom-color: #1d1d1f !important; }
  .fluid-toast { background: #000; border: 1px solid #fff; }
}
details > summary::-webkit-details-marker { display: none; }
.custom-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 6px; }
.custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.catalog-scrollbar { overflow-y: scroll !important; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; }
.catalog-scrollbar::-webkit-scrollbar { width: 10px; height: 10px; }
.catalog-scrollbar::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 8px; }
.catalog-scrollbar::-webkit-scrollbar-thumb { background: #e11d5b; border-radius: 8px; border: 2px solid #e2e8f0; }
.catalog-scrollbar::-webkit-scrollbar-thumb:hover { background: #be1249; }
@media print {
  body * { visibility: hidden; }
  #modalDigitalCatalog, #modalDigitalCatalog * { visibility: visible; }
  #modalDigitalCatalog { position: absolute; left: 0; top: 0; width: 100%; border: none !important; box-shadow: none !important; background: white !important; }
  #catalogScrollViewport, #catalogProductsGrid { max-height: none !important; overflow: visible !important; height: auto !important; }
  button, input, select, label { display: none !important; }
}
.tab-btn.active { background: linear-gradient(135deg, #e11d5b 0%, #be1249 100%); color: #ffffff; box-shadow: 0 4px 12px rgba(225, 29, 91, 0.25); }

/* ---------- Inventario: barra "Ir al carrito" (queda pegada al pie mientras se recorre el inventario) ---------- */
.inv-cartbar { position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 560px; margin: 16px auto 0; padding: 10px 10px 10px 16px; border-radius: 18px; background: #1f2937; color: #fff; box-shadow: 0 14px 30px -12px rgba(15, 23, 42, 0.55); }
.inv-cartbar[hidden] { display: none; }
.inv-cartbar-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.inv-cartbar-count { font-size: 12px; font-weight: 700; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-cartbar-total { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.inv-cartbar-info { flex: 1; }
.inv-cartbar-clear { flex-shrink: 0; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.inv-cartbar-clear:hover { background: rgba(255, 255, 255, 0.12); }
.inv-cartbar-clear:active { transform: scale(0.97); }
.inv-cartbar-btn { flex-shrink: 0; min-height: 44px; padding: 0 16px; border-radius: 12px; background: #e11d5b; color: #fff; font-size: 14px; font-weight: 800; white-space: nowrap; }
.inv-cartbar-btn:hover { background: #be1249; }
.inv-cartbar-btn:active { transform: scale(0.97); }
body.has-inv-cartbar:has(#tabView-inventario:not(.hidden)) #toastContainer { bottom: 92px !important; }   /* los avisos suben para no tapar la barra */
@media (max-width: 639px) {
  /* En celular la barra queda fija sobre el menú inferior */
  .inv-cartbar { position: fixed; left: 12px; right: 12px; bottom: calc(var(--bb-h) + 10px + env(safe-area-inset-bottom)); margin: 0; max-width: none; }
  body.has-inv-cartbar #tabView-inventario { padding-bottom: 84px; }
  body.has-inv-cartbar:has(#tabView-inventario:not(.hidden)) #toastContainer { bottom: calc(var(--bb-h) + 84px + env(safe-area-inset-bottom)) !important; }
}

/* ---------- Inventario: aviso de foto que aún no se subió a Google Drive ---------- */
.foto-local-chip { position: absolute; left: 8px; right: 8px; bottom: 34px; padding: 3px 8px; border-radius: 999px; background: rgba(254, 243, 199, 0.96); color: #92400e; font-size: 10px; font-weight: 800; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }

/* ---------- Inventario: buscador fijo bajo la barra superior ---------- */
.inv-search-sticky { position: sticky; top: 57px; z-index: 25; margin-left: -6px; margin-right: -6px; padding: 8px 6px; background: var(--lienzo, #f5f5f7); }

/* ---------- Ventanas en pantallas bajas (tablet/PC): nunca más altas que la pantalla ----------
   El encabezado y los botones quedan fijos; solo se desplaza el contenido del medio. */
.fluid-modal:not(.fluid-sheet) { padding-top: 12px !important; padding-bottom: 12px !important; }
.fluid-modal:not(.fluid-sheet) > div:first-child { display: flex !important; flex-direction: column !important; max-height: calc(100dvh - 24px) !important; margin-top: auto !important; margin-bottom: auto !important; }
.fluid-modal:not(.fluid-sheet) > div:first-child > * { flex-shrink: 0; }
.fluid-modal:not(.fluid-sheet) .fluid-sheet-body { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; overscroll-behavior: contain; }
.fluid-modal:not(.fluid-sheet) .fluid-sheet-shrink { flex-shrink: 1 !important; min-height: 0 !important; overflow-y: auto !important; }
.fluid-modal:not(.fluid-sheet) .fluid-sheet-body > * { flex-shrink: 0; }   /* si el cuerpo es una columna flexible, sus bloques no se aplastan: se desplaza */