/* =======================================================================
   Armador de packs Bukana — hoja de estilo de /arma-tu-pack
   Se sirve como ir.attachment publico en /bukana/armador/armador.css
   (no va dentro de la ir.ui.view: asi se edita sin tocar la vista y no
   hay que escapar nada en el XML).

   Adaptado de Generales/Marca/Armador/armador.template.html (diseno
   aprobado por Nicolas el 2026-08-15). Dos cambios respecto del prototipo:

   1. TODO va scopeado bajo .bk-arm / .bk-arm-home. El prototipo pintaba
      sobre :root y body; aca eso pisaria la cabecera, el pie y el carro
      de la tienda.
   2. Se saco el bloque prefers-color-scheme:dark. El tema de bukana.cl
      (Graphene) es solo claro: un armador oscuro entre una cabecera y un
      pie blancos se ve roto. Para devolverlo, copiar el bloque
      :root[data-theme="dark"] del prototipo y apuntarlo a .bk-arm.
   ======================================================================= */

@font-face{
  font-family:"BukanaOutfit";
  src:url("/bukana/armador/outfit.ttf") format("truetype");
  font-weight:100 900;
  font-display:swap;
}

/* ---- Tokens (Espuma Clara / Carbon / Oceano / Ambar de identidadvisual) -- */
.bk-arm,
.bk-arm-home{
  --ground:#F3F2EF;
  --surface:#FBFAF8;
  --surface-2:#EAE7E0;
  --ink:#0F0F12;
  --ink-2:#57544C;
  --ink-3:#8C8981;
  --line:#DEDBD3;
  --line-fuerte:#C7C3B9;

  --core:#0D6D6E;
  --cervecia:#4A00FF;
  --smash:#5E8C1E;
  --accent:#C25E00;
  --accent-solido:#FF8A00;
  --accent-ink:#0F0F12;

  --alerta:#A33B12;
  --sombra:0 1px 2px rgba(15,15,18,.06), 0 8px 24px -12px rgba(15,15,18,.18);
  --radio:14px;

  background:var(--ground);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:350;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.bk-arm *,
.bk-arm-home *{box-sizing:border-box}

.bk-arm h1,.bk-arm h2,.bk-arm h3,
.bk-arm-home h1,.bk-arm-home h2,.bk-arm-home h3{
  font-family:"BukanaOutfit",system-ui,sans-serif;
  text-wrap:balance;
  margin:0;
}

.bk-arm .mono,
.bk-arm-home .mono{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
}

.bk-arm .eyebrow,
.bk-arm-home .eyebrow{
  font-family:"BukanaOutfit",system-ui,sans-serif;
  font-weight:700;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
}

.bk-arm :where(button,a,[tabindex]):focus-visible,
.bk-arm-home :where(button,a,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:6px;
}

/* ---- Estructura -------------------------------------------------------- */
.bk-arm .envoltura{
  max-width:1240px;
  margin:0 auto;
  padding:28px 20px 0;
}

.bk-arm .cabecera{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}
.bk-arm .marca{display:flex;align-items:center;gap:10px}
.bk-arm .marca .logo{
  font-family:"BukanaOutfit",sans-serif;
  font-weight:800;
  font-size:1rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.bk-arm .marca .sep{color:var(--ink-3)}
.bk-arm h1{
  font-weight:800;
  font-size:clamp(2rem,5.5vw,3.1rem);
  letter-spacing:-.03em;
  line-height:1.02;
}
.bk-arm .bajada{
  color:var(--ink-2);
  max-width:56ch;
  font-size:1rem;
  margin:0;
}

.bk-arm .columnas{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  padding:24px 0 0;
}
@media (min-width:1000px){
  .bk-arm .columnas{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
}

/* ---- Selector de tamano ------------------------------------------------ */
.bk-arm .tamanos{
  display:flex;
  gap:8px;
  padding:6px;
  background:var(--surface-2);
  border-radius:999px;
  width:fit-content;
  max-width:100%;
}
.bk-arm .tamano{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--ink-2);
  font:inherit;
  cursor:pointer;
  padding:9px 18px;
  border-radius:999px;
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.15;
  transition:background .18s ease,color .18s ease;
}
.bk-arm .tamano strong{
  font-family:"BukanaOutfit",sans-serif;
  font-weight:800;
  font-size:1.12rem;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.bk-arm .tamano span{font-size:.72rem;color:var(--ink-3)}
.bk-arm .tamano[aria-pressed="true"]{
  background:var(--ink);
  color:var(--ground);
  box-shadow:var(--sombra);
}
.bk-arm .tamano[aria-pressed="true"] span{color:var(--ground);opacity:.72}

/* ---- Progreso ---------------------------------------------------------- */
.bk-arm .progreso{margin:22px 0 18px}
.bk-arm .progreso-fila{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  margin-bottom:9px;
}
.bk-arm .cuenta{font-family:"BukanaOutfit",sans-serif;font-weight:700;font-size:1.05rem}
.bk-arm .cuenta em{font-style:normal;color:var(--ink-3);font-weight:500}
.bk-arm .pista{color:var(--ink-3);font-size:.85rem;text-align:right}
.bk-arm .barra{
  height:5px;
  background:var(--surface-2);
  border-radius:999px;
  overflow:hidden;
}
.bk-arm .barra > i{
  display:block;
  height:100%;
  width:0;
  background:var(--accent-solido);
  border-radius:999px;
  transition:width .32s cubic-bezier(.22,.9,.3,1);
}

/* ---- Barra de confianza ------------------------------------------------ */
.bk-arm .confianza{
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  padding:12px 16px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radio);
  font-size:.83rem;
  color:var(--ink-2);
}
.bk-arm .confianza b{color:var(--ink);font-weight:600}

/* ---- Atajos ------------------------------------------------------------ */
.bk-arm .atajos{margin:24px 0 8px}
.bk-arm .atajos-lista{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.bk-arm .atajo{
  appearance:none;
  cursor:pointer;
  font:inherit;
  font-size:.87rem;
  padding:8px 15px;
  border-radius:999px;
  border:1px solid var(--line-fuerte);
  background:var(--surface);
  color:var(--ink);
  transition:border-color .16s ease,transform .16s ease;
}
.bk-arm .atajo:hover{border-color:var(--ink-3);transform:translateY(-1px)}
.bk-arm .atajo.limpiar{border-style:dashed;color:var(--ink-2)}

/* ---- Grupos por linea -------------------------------------------------- */
.bk-arm .grupo{margin-top:34px}
.bk-arm .grupo-cabecera{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.bk-arm .punto{width:9px;height:9px;border-radius:50%;background:var(--tono);flex:none}
.bk-arm .grupo h2{font-weight:700;font-size:1.02rem;letter-spacing:.01em}
.bk-arm .grupo-nota{color:var(--ink-3);font-size:.83rem;margin-left:auto;text-align:right}

.bk-arm .grilla{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:14px;
}

/* ---- Tarjeta de lata --------------------------------------------------- */
.bk-arm .lata{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radio);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.bk-arm .lata:hover{transform:translateY(-2px);box-shadow:var(--sombra)}
.bk-arm .lata[data-elegida="si"]{
  border-color:var(--tono);
  box-shadow:0 0 0 1px var(--tono), var(--sombra);
}
.bk-arm .lata[data-agotada="si"]{opacity:.42}
.bk-arm .lata[data-agotada="si"] .foto{filter:grayscale(1)}

.bk-arm .foto{
  aspect-ratio:218/300;
  overflow:hidden;
  background:var(--surface-2);
}
.bk-arm .foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
  display:block;
}

.bk-arm .info{
  padding:11px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:3px;
  flex:1;
}
.bk-arm .nombre{
  font-family:"BukanaOutfit",sans-serif;
  font-weight:700;
  font-size:.93rem;
  line-height:1.18;
  letter-spacing:-.005em;
}
.bk-arm .estilo{font-size:.76rem;color:var(--ink-3);line-height:1.3}
.bk-arm .datos{display:flex;gap:6px;align-items:center;margin-top:5px;font-size:.7rem;flex-wrap:wrap}
.bk-arm .abv{color:var(--tono);font-weight:600;letter-spacing:.02em}
.bk-arm .abv[data-falta="si"]{color:var(--ink-3);font-weight:400}
.bk-arm .aviso-stock{color:var(--alerta);font-size:.7rem;font-weight:600}

.bk-arm .control{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:9px 12px;
  border-top:1px solid var(--line);
  background:var(--surface);
}
.bk-arm .paso{
  appearance:none;
  cursor:pointer;
  width:34px;height:34px;
  flex:none;
  border-radius:50%;
  border:1px solid var(--line-fuerte);
  background:transparent;
  color:var(--ink);
  font-size:1.05rem;
  line-height:1;
  display:grid;
  place-items:center;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.bk-arm .paso:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:var(--ground)}
.bk-arm .paso:disabled{opacity:.3;cursor:not-allowed}
.bk-arm .paso.sumar{border-color:var(--tono);color:var(--tono)}
.bk-arm .paso.sumar:hover:not(:disabled){background:var(--tono);border-color:var(--tono);color:var(--surface)}
.bk-arm .qty{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
  font-size:.95rem;
  font-weight:600;
  min-width:1.2ch;
  text-align:center;
}
.bk-arm .qty[data-cero="si"]{color:var(--ink-3);font-weight:400}

/* ---- Bandeja ----------------------------------------------------------- */
.bk-arm .bandeja{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radio);
  padding:18px;
  box-shadow:var(--sombra);
}
@media (min-width:1000px){
  .bk-arm .bandeja{position:sticky;top:22px}
}
.bk-arm .bandeja h2{font-weight:700;font-size:1.02rem;margin-bottom:2px}
.bk-arm .bandeja .sub{color:var(--ink-3);font-size:.8rem;margin-bottom:15px}

.bk-arm .ranuras{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:6px;
  margin-bottom:16px;
}
.bk-arm .ranura{
  appearance:none;
  padding:0;
  aspect-ratio:1/2.1;
  border-radius:5px;
  border:1px dashed var(--line-fuerte);
  background:var(--surface-2);
  overflow:hidden;
  position:relative;
  cursor:default;
}
.bk-arm .ranura[data-llena="si"]{
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
}
.bk-arm .ranura img{width:100%;height:100%;object-fit:cover;display:block}
.bk-arm .ranura[data-llena="si"]::after{
  content:"\00d7";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(15,15,18,.62);
  color:#F3F2EF;
  font-size:1.1rem;
  opacity:0;
  transition:opacity .16s ease;
}
.bk-arm .ranura[data-llena="si"]:hover::after,
.bk-arm .ranura[data-llena="si"]:focus-visible::after{opacity:1}

.bk-arm .cuentas{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:14px 0;
  border-top:1px solid var(--line);
  font-size:.87rem;
}
.bk-arm .linea-cuenta{display:flex;justify-content:space-between;gap:12px}
.bk-arm .linea-cuenta span{color:var(--ink-2)}
.bk-arm .linea-cuenta b{font-weight:600}
.bk-arm .ahorro{color:var(--core);font-weight:600}
.bk-arm .total{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding-top:11px;
  border-top:1px solid var(--line);
}
.bk-arm .total .rot{font-family:"BukanaOutfit",sans-serif;font-weight:700;font-size:.95rem}
.bk-arm .total .cifra{
  font-family:"BukanaOutfit",sans-serif;
  font-weight:800;
  font-size:1.85rem;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

.bk-arm .cta{
  appearance:none;
  width:100%;
  margin-top:14px;
  padding:14px 16px;
  border:0;
  border-radius:10px;
  font-family:"BukanaOutfit",sans-serif;
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
  background:var(--accent-solido);
  color:var(--accent-ink);
  transition:filter .16s ease;
}
.bk-arm .cta:hover:not(:disabled){filter:brightness(1.07)}
.bk-arm .cta:disabled{background:var(--surface-2);color:var(--ink-3);cursor:not-allowed}
.bk-arm .cta[data-cargando="si"]{opacity:.7;cursor:progress}

.bk-arm .resumen-lista{
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid var(--line);
  font-size:.82rem;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.bk-arm .resumen-lista:empty{display:none}
.bk-arm .resumen-fila{display:flex;justify-content:space-between;gap:10px;color:var(--ink-2)}
.bk-arm .resumen-fila b{color:var(--ink);font-weight:600}

/* Aviso de error del carro (no existia en el prototipo) */
.bk-arm .aviso{
  margin-top:12px;
  padding:10px 12px;
  border-left:3px solid var(--alerta);
  background:rgba(163,59,18,.07);
  color:var(--alerta);
  font-size:.82rem;
  border-radius:0 8px 8px 0;
}
.bk-arm .aviso:empty{display:none}

/* ---- Barra movil ------------------------------------------------------- */
.bk-arm .barra-movil{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:1020;
  background:var(--surface);
  border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  gap:14px;
  box-shadow:0 -8px 28px -18px rgba(0,0,0,.5);
}
@media (min-width:1000px){.bk-arm .barra-movil{display:none}}
.bk-arm .barra-movil .mini{display:flex;gap:3px;flex:1;min-width:0}
.bk-arm .barra-movil .mini i{
  flex:1;
  max-width:20px;
  aspect-ratio:1/2.1;
  border-radius:3px;
  border:1px dashed var(--line-fuerte);
  background:var(--surface-2);
  overflow:hidden;
}
.bk-arm .barra-movil .mini i.llena{border:0;background-size:cover;background-position:center}
.bk-arm .barra-movil .cifra{
  font-family:"BukanaOutfit",sans-serif;
  font-weight:800;
  font-size:1.1rem;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.bk-arm .barra-movil .cta{width:auto;margin:0;padding:11px 18px;font-size:.9rem;white-space:nowrap}

.bk-arm .espaciador{height:86px}
@media (min-width:1000px){.bk-arm .espaciador{height:32px}}

/* ---- Nota de datos ----------------------------------------------------- */
.bk-arm .nota{
  margin:36px 0 0;
  padding:15px 17px;
  border-left:3px solid var(--accent);
  background:var(--surface);
  border-radius:0 var(--radio) var(--radio) 0;
  font-size:.84rem;
  color:var(--ink-2);
  max-width:70ch;
}
.bk-arm .nota b{color:var(--ink);font-weight:600}

.bk-arm .volver{
  appearance:none;
  border:0;
  background:transparent;
  font:inherit;
  color:var(--ink-3);
  cursor:pointer;
  padding:0;
  font-size:.85rem;
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:14px;
  text-decoration:none;
}
.bk-arm .volver:hover{color:var(--ink)}

.bk-arm [hidden],
.bk-arm-home [hidden]{display:none !important}

/* =======================================================================
   Bloque de entrada (fragmento para la portada) — NO publicado todavia
   ======================================================================= */
.bk-arm-home .cinta{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 20px;
  background:var(--ink);
  color:var(--ground);
  font-size:.8rem;
  justify-content:center;
  flex-wrap:wrap;
}
.bk-arm-home .cinta b{font-weight:600}
.bk-arm-home .cinta .marca-mini{
  font-family:"BukanaOutfit",sans-serif;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.bk-arm-home .home{max-width:1240px;margin:0 auto;padding:56px 20px 80px}
.bk-arm-home .home-intro{max-width:64ch}
.bk-arm-home .home h2{
  font-weight:800;
  font-size:clamp(2.1rem,6vw,3.5rem);
  letter-spacing:-.035em;
  line-height:1.02;
  margin:12px 0 14px;
}
.bk-arm-home .bajada{color:var(--ink-2);font-size:1.05rem;margin:0;max-width:56ch}

.bk-arm-home .opciones{display:grid;grid-template-columns:1fr;gap:16px;margin-top:38px}
@media (min-width:720px){.bk-arm-home .opciones{grid-template-columns:repeat(2,1fr)}}

.bk-arm-home .opcion{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:26px 24px 24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  cursor:pointer;
  text-align:left;
  font:inherit;
  color:inherit;
  text-decoration:none;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
  overflow:hidden;
}
.bk-arm-home .opcion:hover{transform:translateY(-3px);border-color:var(--ink-3);box-shadow:var(--sombra)}
.bk-arm-home .opcion .cantidad{
  font-family:"BukanaOutfit",sans-serif;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.bk-arm-home .opcion .precio{
  font-family:"BukanaOutfit",sans-serif;
  font-weight:800;
  font-size:clamp(2.6rem,8vw,3.6rem);
  letter-spacing:-.035em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.bk-arm-home .opcion .unidad{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.83rem;
  color:var(--ink-3);
  margin-top:2px;
}
.bk-arm-home .opcion .accion{
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:"BukanaOutfit",sans-serif;
  font-weight:700;
  font-size:.95rem;
  color:var(--accent);
}
.bk-arm-home .opcion .accion .flecha{transition:transform .18s ease}
.bk-arm-home .opcion:hover .accion .flecha{transform:translateX(4px)}
.bk-arm-home .opcion .etiqueta{
  position:absolute;
  top:16px;right:16px;
  background:var(--accent-solido);
  color:var(--accent-ink);
  font-family:"BukanaOutfit",sans-serif;
  font-weight:700;
  font-size:.66rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:999px;
}
.bk-arm-home .opcion .latitas{display:flex;gap:3px;margin-top:16px;height:44px}
.bk-arm-home .opcion .latitas i{
  width:15px;
  border-radius:3px;
  background:var(--surface-2);
  border:1px solid var(--line-fuerte);
}
.bk-arm-home .home-detalle{
  margin-top:30px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 26px;
  font-size:.87rem;
  color:var(--ink-2);
}
.bk-arm-home .home-detalle b{color:var(--ink);font-weight:600}

@media (prefers-reduced-motion:reduce){
  .bk-arm *,.bk-arm-home *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}