/* Hoja del cajón del carrito. Externa y no en línea porque NADA de esto se
   pinta hasta que alguien pulsa «agregar»: `<dialog class="cdw">` no existe en
   pantalla hasta el `showModal()`. Eran 11 KB (4 KB comprimidos) en el HTML de
   cada página de la tienda, pagados en el primer pintado de todas ellas.

   Mismo patrón que `plum.css` (preload + swap): no bloquea el primer pintado y
   llega mucho antes del primer clic. */
.cdw{border:0;padding:0;max-width:min(26rem,92vw);width:100%;max-height:100dvh;height:100dvh;
       margin:0 0 0 auto;background:var(--pl-surface-0);color:var(--pl-ink);
       box-shadow:-18px 0 48px rgba(var(--pl-shadow-brand-rgb,124,58,237),.16)}
  .cdw::backdrop{background:rgba(12,8,20,.44)}
  .cdw__caja{display:flex;flex-direction:column;height:100%}
  .cdw__cab{display:flex;align-items:center;gap:.75rem;padding:1.1rem 1.25rem;
            border-bottom:1px solid var(--pl-border)}
  .cdw__t{flex:1 1 auto;margin:0;font-size:1rem;font-weight:800;letter-spacing:-.01em}
  .cdw__x{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;
          background:none;color:var(--pl-ink-soft);cursor:pointer;border-radius:12px;font-size:1.05rem}
  .cdw__x:hover{color:var(--pl-ink);background:var(--pl-surface-2)}
  .cdw__x:focus-visible{outline:2px solid var(--pl-brand);outline-offset:2px}
  .cdw__cuerpo{flex:1 1 auto;overflow-y:auto;padding:1.1rem 1.25rem}

  .cdw-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
  .cdw-linea{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:.8rem;align-items:start}
  .cdw-ph{width:56px;height:56px;border-radius:10px;background:var(--pl-surface-2);
          display:flex;align-items:center;justify-content:center;overflow:hidden}
  .cdw-ph img{max-width:100%;max-height:100%;object-fit:contain}
  .cdw-cuerpo{display:flex;flex-direction:column;min-width:0}
  .cdw-nombre{font-weight:700;font-size:.86rem;line-height:1.3;color:var(--pl-ink);text-decoration:none;
              display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .cdw-nombre:hover{color:var(--pl-brand)}
  .cdw-meta{font-size:.78rem;color:var(--pl-ink-soft);margin-top:.2rem}

  /* Lo que se ACABA de agregar. El panel lista el carrito entero, asi que sin
     esta marca, con cinco cosas dentro, no confirma que entro lo correcto.
     Margen negativo + padding: el fondo respira sin mover la rejilla de las
     demas lineas. */
  .cdw-linea--nueva{margin:-.5rem -.6rem;padding:.5rem .6rem;border-radius:12px;
                    background:var(--pl-brand-soft)}
  .cdw-nuevo{align-self:flex-start;margin-top:.35rem;font-size:.68rem;font-weight:800;
             letter-spacing:.04em;text-transform:uppercase;color:var(--brand-on,#fff);
             background:var(--pl-brand);border-radius:999px;padding:.12rem .5rem}
  /* En oscuro `--pl-brand` aclara a #a78bfa y la etiqueta pierde contraste, asi
     que el fondo se fija en `--pl-brand-hover` (#7c3aed).
     El `color` HAY QUE fijarlo tambien, y ese es el detalle que se escapa:
     `--brand-on` en oscuro vale #16121f —casi negro, porque el sistema lo
     calcula para el brand CLARO— y dejarlo puesto da tinta oscura sobre fondo
     oscuro: medido, 3.23:1. Con blanco explicito sube a 5.7:1, igual que en
     claro. Medir con las transiciones desactivadas o `getComputedStyle`
     devuelve el color del tema anterior. */
  [data-theme="dark"] .cdw-nuevo{background:var(--pl-brand-hover,#7c3aed);color:#fff}
  .cdw-total{font-weight:800;font-size:.86rem;white-space:nowrap}

  /* Importe y «quitar», en columna a la derecha del renglón. La rejilla de
     `.cdw-linea` ya reserva esa tercera columna para el importe; el botón se
     mete DENTRO de ella en vez de abrir una cuarta, que estrecharía el nombre
     del equipo justo en el panel donde menos ancho hay. */
  .cdw-der{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem}
  .cdw-quitar-f{margin:0;line-height:0}
  .cdw-quitar{display:flex;align-items:center;justify-content:center;
    width:32px;height:32px;border:0;border-radius:50%;background:transparent;
    color:var(--pl-ink-soft);font-size:.9rem;cursor:pointer;
    transition:background .15s ease,color .15s ease}
  /* En tinta `soft` y no `faint`: medido sobre el cajón blanco, `faint` daba
     3,66:1 — pasa el mínimo de 3:1 de un icono, pero esto BORRA un renglón y
     hay que verlo sin buscarlo. `soft` sube a 8,6:1. */
  .cdw-quitar:hover{background:var(--pl-surface-2);color:var(--pl-danger,#b42318)}
  .cdw-quitar:focus-visible{outline:2px solid var(--pl-brand);outline-offset:2px}
  .cdw-quitar[disabled]{opacity:.5;cursor:default}

  /* En el teléfono el área que se toca sube a 44px, que es el mínimo del resto
     del sitio (`--cta-alto`), pero el CÍRCULO se queda en 32: una ✕ de 44px
     junto al importe pesa más de lo que debe pesar un «quitar», y engordarla
     de verdad además desalinearía el renglón. El área crece con un
     pseudo-elemento centrado, así que no mueve la maqueta.
     Medido: las áreas de dos renglones seguidos no llegan a tocarse — el
     hueco de la lista es de 16px y la ✕ vive en la mitad de abajo de su
     renglón. */
  @media (pointer:coarse),(max-width:767.98px){
    .cdw-quitar{position:relative}
    .cdw-quitar::before{content:'';position:absolute;top:50%;left:50%;
      width:44px;height:44px;transform:translate(-50%,-50%)}
  }
  .cdw-vacio{color:var(--pl-ink-soft);font-size:.9rem;margin:0 0 1rem}
  .cdw-pie{border-top:1px solid var(--pl-border);padding-top:1rem;margin-top:1.2rem}

  /* El panel vive en TODAS las páginas y `_ck.html` sólo se carga en el
     checkout: tomar prestadas sus clases dejaba el pie sin maquetar en la
     ficha y en el catálogo (medido: "Total" y el importe pegados, el botón
     como un enlace suelto). Estas clases son suyas y no dependen de nadie. */
  .cdw-fila{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:.9rem;color:var(--pl-ink-soft)}
  .cdw-fila strong{font-size:1.15rem;letter-spacing:-.02em;color:var(--pl-ink)}
  .cdw-nota{font-size:.78rem;color:var(--pl-ink-soft);margin:.4rem 0 0;line-height:1.5}
  .cdw-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;width:100%;
           min-height:var(--cta-alto-lg,52px);margin-top:1rem;background:var(--pl-brand);color:var(--brand-on,#fff);
           border:0;border-radius:var(--cta-radio,10px);font-weight:800;font-size:.95rem;text-decoration:none;
           cursor:pointer;transition:background-color .2s ease}
  .cdw-btn:hover{background:var(--pl-brand-hover,#6d28d9)}
  .cdw-btn:focus-visible{outline:2px solid var(--pl-ink);outline-offset:3px}
  .cdw-link{display:block;text-align:center;margin-top:.6rem;font-size:.85rem;font-weight:700;
            color:var(--pl-ink-soft);text-decoration:underline;text-underline-offset:3px;
            padding:.6rem 0;min-height:44px}
  .cdw-link:hover{color:var(--pl-brand)}

  /* Aviso de lo que acaba de entrar. `role="status"` lo anuncia sin robar el
     foco, que ya se lo lleva el panel. */
  /* Tinta neutra, verde SÓLO en el icono. `--pl-ok` (#16a34a) como color de
     TEXTO da 3.23:1 sobre la superficie clara — medido — y le tocan 4.5:1. Es
     el mismo criterio que ya se aplicó al aviso de condición del import: el
     color semántico va en el icono, nunca en el cuerpo del texto. */
  .cdw__aviso{display:flex;align-items:center;gap:.45rem;font-size:.85rem;font-weight:700;
              color:var(--pl-ink);padding:.6rem 1.25rem 0;margin:0}
  .cdw__aviso i{color:var(--pl-ok,#16a34a)}
  .cdw__aviso--err{color:var(--pl-err-ink,#8f1d1d)}
  .cdw__aviso--err i{color:var(--pl-err,#dc2626)}

  /* TRAMPA DE CASCADA: `.pl-nav-act__count` trae su propio `display`, así que
     `[hidden]` de la hoja del agente de usuario pierde. Se apaga aquí, con más
     especificidad y sin capa. Ver el mismo caso en _ck.html. */
  .pl-nav-act__count[hidden]{display:none}

  /* La foto en vuelo va por encima de la barra pegajosa (que es 50 en
     plum.css) y por debajo de nada más: cuando el cajón se abre, el <dialog>
     vive en la capa superior del navegador y ya no compite con esto. */
  .ck-vuelo{z-index:60;border-radius:14px}

  /* Esqueleto: sólo se ve si la red tarda más que el vuelo. Tres barras, no un
     girador — un girador dice "espera", un esqueleto dice "esto es lo que
     viene". */
  .cdw-esq{display:flex;flex-direction:column;gap:1rem}
  .cdw-esq span{display:block;height:56px;border-radius:10px;
                background:linear-gradient(90deg,var(--pl-surface-2) 25%,
                           var(--pl-surface) 37%,var(--pl-surface-2) 63%);
                background-size:400% 100%}

  /* ── El botón "Agregar al carrito" cuando ya lo está ──────────────────────
     Vale para los dos aspectos que tiene ese botón (el relleno de la ficha y
     el de contorno del hero): el estado los iguala a propósito, porque ya no
     es una acción primaria ni secundaria — es una respuesta.
     El fondo es un 12% de la marca sobre el blanco: el texto en
     `--pl-brand-hover` da 5.94:1 encima, medido sobre el color compuesto que
     pinta el navegador, por delante del 4.5:1 que pide AA.
     Nada de verde: introducir un color de "correcto" que no existe en el resto
     del sitio convierte la confirmación en un elemento de otra marca. */
  .cdw-listo{background:color-mix(in srgb, var(--pl-brand) 12%, #fff) !important;
             border-color:var(--pl-brand) !important;
             color:var(--pl-brand-hover,#6d28d9) !important;
             box-shadow:none !important}
  .cdw-listo i{color:var(--pl-brand)}

  /* Acuse de recibo, que no es lo mismo que confirmación. La marca de arriba
     llega cuando el servidor contesta (medido: ~600ms, lo que tarda el vuelo
     de la foto), y hasta entonces el dedo no tenía respuesta ninguna: el único
     movimiento pasaba lejos, camino del icono del carrito. `disabled` ya lo
     pone el JS para que nadie agregue dos veces de un doble clic, así que el
     estado ya existía; sólo no se veía. NO dice "listo" —eso sería prometer un
     resultado que todavía no está—, dice "te oí". */
  form[action$="/carrito/agregar"] button[disabled]{transform:scale(.97);opacity:.86;
      transition:transform .12s ease-out, opacity .12s ease-out}
  @media(prefers-reduced-motion:reduce){
    form[action$="/carrito/agregar"] button[disabled]{transform:none}
  }

  @media(prefers-reduced-motion:no-preference){
    /* El botón acusa el golpe: 340ms, misma curva de salida que el cajón y sin
       rebote. Sube un 4% y vuelve — es `transform`, así que no toca la
       maquetación ni empuja al botón de al lado. El check entra un pelo
       después, desde el centro, para que se lea como que APARECE en un botón
       que ya cambió y no como dos cosas a la vez.
       Con `prefers-reduced-motion` no hay recorrido: el color y el check ya
       están puestos por las reglas de arriba, que es la confirmación. */
    .cdw-listo{animation:cdwListo .34s cubic-bezier(.16,1,.3,1)}
    .cdw-listo i{animation:cdwCheck .3s cubic-bezier(.16,1,.3,1) 60ms backwards}
    @keyframes cdwListo{0%{transform:scale(.97)}55%{transform:scale(1.04)}100%{transform:none}}
    @keyframes cdwCheck{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

    /* Entrada: 380ms con salida exponencial, y el fondo entra con ella. Dawn
       —el tema de referencia de Shopify— usa 200ms con la curva `ease` por
       defecto del navegador y no anima el fondo en absoluto. Medido en su
       `component-cart-drawer.css` y su `base.css`. */
    .cdw[open]{animation:cdwEntra .38s cubic-bezier(.16,1,.3,1)}
    .cdw[open]::backdrop{animation:cdwFondo .3s ease-out}
    @keyframes cdwEntra{from{transform:translateX(100%)}to{transform:none}}
    @keyframes cdwFondo{from{opacity:0}to{opacity:1}}

    /* Las líneas entran en cascada. Tope de 8: a 45ms cada una son 360ms, y
       más allá la cascada deja de leerse como ritmo y empieza a leerse como
       lentitud. */
    .cdw-linea{animation:cdwLinea .34s cubic-bezier(.16,1,.3,1) backwards;
               animation-delay:calc(var(--i,0) * 45ms)}
    @keyframes cdwLinea{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

    .cdw-esq span{animation:cdwBrillo 1.1s ease-in-out infinite}
    @keyframes cdwBrillo{from{background-position:100% 0}to{background-position:0 0}}
  }