/* ==========================================================================
   CompuNube — vistas de la tienda de prueba (app/storefront-view.css)
   Sólo lo que usan, dentro de index.html: #store (storefront preview),
   #checkout (pago de prueba), carrito (#cart-drawer + #overlay) y modal de
   producto (#product-modal). Lo extraído de la vieja styles.css; el resto se
   eliminó. La tienda usa sus tokens --store-* (los pone app.js con el tema
   detectado); el carrito, el modal y el checkout usan los tokens cn- de
   app/system.css. El header/footer temático vive en storefront/chrome.css.
   ========================================================================== */

/* Storefront: tokens aislados del chrome de CompuNube */
.storefront {
  --store-primary: #087b70; --store-secondary: #087b70; --store-accent: #087b70;
  --store-header: #fff; --store-header-fg: #181818; --store-bg: #fff; --store-text: #181818; --store-muted: #666;
  --store-radius: 8px; --store-density: 1; --store-display: Georgia, serif; --store-body: Arial, sans-serif;
  background: var(--store-bg); color: var(--store-text); min-height: 100vh; font-family: var(--store-body); color-scheme: light;
}
.storefront h1, .storefront h2, .storefront h3 { letter-spacing: normal; text-wrap: balance; }
.store-header { min-height: calc(78px * var(--store-density)); padding: 15px clamp(20px, 5vw, 75px); display: flex; align-items: center; gap: 36px; border-bottom: 1px solid color-mix(in srgb, var(--store-header-fg) 18%, transparent); background: var(--store-header); color: var(--store-header-fg); }
.store-brand { font: 700 1.4rem var(--store-display); color: var(--store-header-fg); text-decoration: none; display: flex; align-items: center; }
.store-brand img { max-height: 45px; max-width: 180px; object-fit: contain; }
.store-brand img:not([hidden]) + span { display: none; }
.store-header nav { display: flex; gap: 25px; }
.store-header nav a { color: var(--store-header-fg); text-decoration: none; }
.store-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.store-actions button { min-height: 40px; border: 0; background: var(--store-primary); color: #fff; padding: 0 14px; border-radius: var(--store-radius); font: 600 .95rem var(--store-body); cursor: pointer; }
.store-search { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; border: 1px solid color-mix(in srgb, var(--store-header-fg) 45%, transparent); border-radius: var(--store-radius); padding: 0 10px; }
.store-search:focus-within { outline: 2px solid var(--store-primary); outline-offset: 1px; }
.store-search input { -webkit-appearance: none; appearance: none; border: 0; outline: 0; width: 110px; min-height: 36px; padding: 0; background: transparent; color: var(--store-header-fg); font: 400 .95rem var(--store-body); }
.store-search input::-webkit-search-decoration, .store-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.store-search input::placeholder { color: color-mix(in srgb, var(--store-header-fg) 65%, transparent); opacity: 1; }
/* minmax(0, …) + min-width: 0: un nombre largo se parte en vez de ensanchar la columna y quedar recortado por el overflow. */
.store-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 620px; background: color-mix(in srgb, var(--store-primary) 10%, var(--store-bg, #f6f3ed)); color: var(--store-text); overflow: hidden; }
.hero-text { min-width: 0; padding: clamp(60px, 9vw, 130px) clamp(25px, 7vw, 105px); display: flex; flex-direction: column; justify-content: center; }
.hero-text h1 { font: 600 clamp(2.6rem, 6vw, 6rem)/.95 var(--store-display); letter-spacing: -.04em; text-transform: capitalize; overflow-wrap: break-word; hyphens: auto; }
.hero-text p { max-width: 430px; color: var(--store-muted); }
/* El color de marca puede ser claro y el fondo del hero es una mezcla con él: el texto va con --store-text
   (contrasta con --store-bg en cualquier tema) y el color de marca queda en el subrayado. */
.hero-text > a { align-self: flex-start; color: var(--store-text); font-weight: 700; margin-top: 25px; text-decoration: underline; text-decoration-color: var(--store-primary); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hero-text > a:hover { text-decoration-thickness: 3px; }
.store-kicker { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; }
.hero-collage { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: calc(24px * var(--store-density)); }
.hero-collage > * { width: 100%; height: 100%; object-fit: cover; border-radius: var(--store-radius); min-height: 0; }
/* La imagen grande suele ser un banner con texto: contain la muestra entera (cover le cortaba los costados). */
.hero-collage > img:first-child { object-fit: contain; background: color-mix(in srgb, var(--store-primary) 6%, var(--store-bg, #fff)); }
.hero-collage > *:first-child { grid-row: 1 / 3; }
.catalog-head { padding: calc(75px * var(--store-density)) clamp(20px, 6vw, 90px) 30px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.catalog-head h2 { font: 600 clamp(2.2rem, 4vw, 4rem) var(--store-display); }
.catalog-head .eyebrow { margin: 0 0 8px; text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; font-weight: 700; color: var(--store-primary); }
.catalog-tools { display: flex; gap: 18px; align-items: center; color: var(--store-muted); }
.catalog-tools select { -webkit-appearance: none; appearance: none; min-height: 40px; padding: 0 36px 0 12px; border: 1px solid #8a8a8a; border-radius: var(--store-radius); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center / 14px; color: #181818; font: 400 .95rem var(--store-body); cursor: pointer; }
.catalog-tools select:focus-visible { outline: 2px solid var(--store-primary); outline-offset: 1px; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(28px * var(--store-density)) 16px; padding: 0 clamp(20px, 6vw, 90px) 90px; }
.product-card { cursor: pointer; }
.product-image { position: relative; aspect-ratio: .82; background: #f1f0ec; border-radius: var(--store-radius); overflow: hidden; }
.product-image > img, .product-image > .placeholder { width: 100%; height: 100%; object-fit: cover; }
.placeholder { display: grid; place-items: center; font: 600 4rem var(--store-display); color: var(--store-primary); }
.quick-add { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--store-primary); color: #fff; font-size: 1.4rem; cursor: pointer; }
.sale { position: absolute; left: 10px; top: 10px; background: var(--store-primary); color: #fff; padding: 5px 9px; border-radius: 99px; font-size: .7rem; }
.product-meta { padding: 14px 2px; }
.product-meta small { color: var(--store-muted); }
.product-meta h3 { font: 600 1.05rem var(--store-body); margin: 4px 0 7px; }
.product-meta strong { color: var(--store-primary); }
.empty-state { text-align: center; padding: 60px; }
.about-strip { background: var(--store-primary); color: #fff; padding: 70px clamp(20px, 7vw, 100px); }
.about-strip p { opacity: .8; }
.about-strip strong { font: 600 clamp(2rem, 4vw, 4rem)/1.1 var(--store-display); max-width: 900px; display: block; }
.reviews { color: var(--store-primary); }
.storefront :focus-visible { outline: 2px solid var(--store-primary); outline-offset: 2px; }

/* Carrito (drawer) */
.overlay { position: fixed; inset: 0; background: var(--cn-scrim); z-index: 50; }
.drawer { position: fixed; right: 0; top: 0; bottom: 0; z-index: 60; width: min(460px, 100vw); padding: var(--cn-space-6); background: var(--cn-surface); color: var(--cn-ink); box-shadow: var(--cn-shadow-3); transform: translateX(105%); transition: transform .25s var(--cn-ease); visibility: hidden; }
.drawer.open { transform: none; visibility: visible; }
.drawer-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.drawer-head h2 { font-size: var(--cn-step-3); }
.drawer-head .cn-eyebrow { margin-bottom: 4px; }
.cart-item { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--cn-line); }
.cart-item img, .cart-item .placeholder { width: 58px; height: 58px; object-fit: cover; border-radius: 8px; font-size: 1.4rem; }
.cart-empty { text-align: center; padding: 60px 0; }
.cart-empty h3 { font-size: var(--cn-step-1); color: var(--cn-ink-2); }
.cart-footer { position: absolute; left: var(--cn-space-6); right: var(--cn-space-6); bottom: var(--cn-space-6); display: grid; gap: 10px; }
.cart-footer .total { display: flex; justify-content: space-between; font-size: var(--cn-step-1); }
.cart-footer small, .stub-label { display: block; text-align: center; color: var(--cn-ink-2); font-size: var(--cn-step--1); }

/* Modal de producto */
.product-modal { position: fixed; width: min(900px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--cn-radius-card); background: var(--cn-surface); color: var(--cn-ink); box-shadow: var(--cn-shadow-3); overflow: auto; }
.product-modal::backdrop { background: var(--cn-scrim); }
.product-modal > .cn-close { position: absolute; right: 14px; top: 14px; z-index: 2; margin: 0; background: var(--cn-surface); }
.modal-layout { display: grid; grid-template-columns: 1fr 1fr; }
.modal-media { height: 600px; background: var(--cn-surface-2); }
.modal-media > * { width: 100%; height: 100%; object-fit: cover; }
.modal-info { padding: 64px 44px; display: flex; flex-direction: column; gap: 20px; }
.modal-info h2 { font-size: var(--cn-step-3); }
.modal-price { font-size: var(--cn-step-2); font-variant-numeric: tabular-nums; }
.modal-info p { color: var(--cn-ink-2); }

/* Pago de prueba (checkout sandbox) */
.checkout-view { min-height: calc(100vh - 65px); display: grid; place-items: center; padding: var(--cn-space-6) var(--cn-gutter); }
.checkout-card { width: min(480px, 100%); padding: clamp(24px, 5vw, 44px); display: grid; gap: var(--cn-space-4); background: var(--cn-surface); border: 1px solid var(--cn-line); border-radius: var(--cn-radius-card); box-shadow: var(--cn-shadow-2); }
.checkout-card h1 { font-size: var(--cn-step-3); }
.checkout-card p { color: var(--cn-ink-2); }
.mp-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: #007EB5; color: #fff; font-weight: 700; }
.checkout-summary { display: flex; justify-content: space-between; padding: 18px 0; border-block: 1px solid var(--cn-line); font-size: var(--cn-step-1); }
.checkout-summary strong { font-variant-numeric: tabular-nums; }
.back-link { justify-self: center; }

@media (max-width: 900px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .store-hero { grid-template-columns: minmax(0, 1fr); }
  .hero-collage { min-height: 400px; }
}
@media (max-width: 640px) {
  .store-header { flex-wrap: wrap; gap: 12px; }
  .store-header nav { display: none; }
  .store-actions { width: 100%; }
  .store-search { flex: 1; }
  .store-search input { width: 100%; }
  .store-hero { min-height: auto; }
  .hero-text { padding: 56px 20px; }
  .hero-text h1 { font-size: clamp(2.4rem, 12vw, 3.4rem); }
  .hero-collage { min-height: 280px; }
  .catalog-head { align-items: start; flex-direction: column; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 12px; gap: 22px 10px; }
  .product-meta h3 { font-size: .9rem; }
  .modal-layout { grid-template-columns: 1fr; }
  .modal-media { height: 280px; }
  .modal-info { padding: 28px 20px; }
  .drawer { padding: var(--cn-space-5); }
  .cart-footer { left: var(--cn-space-5); right: var(--cn-space-5); bottom: var(--cn-space-5); }
}