/* ════════════════════════════════════════════════════════════════
   DALUNA — CAPA DE ARMONIZACIÓN (tienda + perfil)
   ────────────────────────────────────────────────────────────────
   Cargar SIEMPRE la ÚLTIMA, después de estilos.css,
   daluna-refresh.css y tailwind.css.
   Su trabajo: que TODAS las tarjetas, secciones, botones y
   formularios usen el mismo ritmo, sin tocar los archivos viejos.
   Los !important de aquí son temporales: existen para ganar a los
   887 !important de daluna-refresh.css hasta que se limpien.
   ════════════════════════════════════════════════════════════════ */

/* ── 1 · FONDO Y TEXTO BASE ─────────────────────────────────────
   estilos.css fuerza body beige con !important; lo corregimos a
   la crema de marca. */
body {
  background-color: var(--dl-bg) !important;
  color: var(--dl-ink-soft) !important;
  font-family: var(--dl-sans) !important;
  font-size: var(--dl-fs-base) !important;
  line-height: 1.6;
}

h1, h2, h3 { color: var(--dl-ink); }
h1 { font-size: var(--dl-fs-2xl); line-height: 1.1; }
h2 { font-size: var(--dl-fs-xl);  line-height: 1.15; }
h3 { font-size: var(--dl-fs-lg);  line-height: 1.25; }

/* ── 2 · RITMO DE SECCIÓN ───────────────────────────────────────
   Un solo espaciado vertical para todas las secciones grandes.
   Sustituye la mezcla de 3rem/4rem/5rem/6rem dispersa. */
main > section,
.section,
section[id] {
  padding-block: var(--dl-section) !important;
}
main > section + section,
.section + .section {
  padding-top: var(--dl-section-sm) !important;
}

/* Contenedor de página coherente */
.container,
.wrap,
main > section > .inner {
  width: min(1180px, 100% - clamp(2rem, 6vw, 5rem));
  margin-inline: auto;
}

/* ── 3 · SISTEMA ÚNICO DE TARJETA ───────────────────────────────
   Todas las variantes (.card, .cookie-card, .order-card,
   .addr-card, .modal-card) heredan la MISMA base: superficie,
   borde, radio, sombra, padding y hover. Cada variante conserva
   solo lo que la distingue. */
.card,
.cookie-card,
.order-card,
.addr-card,
.producto-card,
.item-card {
  background: var(--dl-surface) !important;
  border: 1px solid var(--dl-line) !important;
  border-radius: var(--dl-r-lg) !important;
  box-shadow: var(--dl-shadow-soft) !important;
  padding: var(--dl-sp-5) !important;
  transition:
    transform var(--dl-t) var(--dl-ease),
    box-shadow var(--dl-t) var(--dl-ease),
    border-color var(--dl-t) var(--dl-ease);
}

@media (hover: hover) {
  .card:hover,
  .cookie-card:hover,
  .order-card:hover,
  .addr-card:hover,
  .producto-card:hover,
  .item-card:hover {
    transform: translateY(-4px);
    border-color: var(--dl-line-2) !important;
    box-shadow: var(--dl-shadow-card) !important;
  }
}

/* Las tarjetas con imagen a sangre no llevan padding arriba:
   la imagen ocupa el borde y el contenido interior sí respira. */
.card:has(.card-media),
.cookie-card:has(.card-media),
.cookie-card:has(img:first-child) {
  padding: 0 !important;
  overflow: hidden;
}
.card:has(.card-media) > :not(.card-media, img),
.cookie-card:has(.card-media) > :not(.card-media, img),
.cookie-card:has(img:first-child) > :not(img) {
  padding-inline: var(--dl-sp-5);
}
.card:has(.card-media) > :last-child,
.cookie-card:has(.card-media) > :last-child,
.cookie-card:has(img:first-child) > :last-child {
  padding-bottom: var(--dl-sp-5);
}

/* Grid de catálogo con gap único */
.cards-grid,
.catalog-grid,
.productos-grid,
[class*="grid-cookies"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
  gap: var(--dl-sp-5) !important;
}

/* ── 4 · BOTONES COHERENTES ─────────────────────────────────────
   Dos variantes: primario (relleno malva) y fantasma (borde).
   Target táctil mínimo 44px siempre. */
.btn,
button[class*="btn"],
a[class*="btn"] {
  min-height: var(--dl-touch);
  border-radius: var(--dl-r-pill);
  font-family: var(--dl-sans);
  transition: all var(--dl-t) var(--dl-ease);
}

.btn-primary,
.btn.btn-dark,
.btn-comprar {
  background: var(--dl-malva-500) !important;
  color: var(--dl-surface) !important;
  border: 1px solid var(--dl-malva-500) !important;
}
.btn-primary:hover,
.btn.btn-dark:hover,
.btn-comprar:hover {
  background: var(--dl-malva-700) !important;
  border-color: var(--dl-malva-700) !important;
  transform: translateY(-1px);
}

.btn-ghost,
.btn.btn-outline {
  background: transparent !important;
  color: var(--dl-ink) !important;
  border: 1px solid var(--dl-line-3) !important;
}
.btn-ghost:hover,
.btn.btn-outline:hover {
  border-color: var(--dl-ink) !important;
}

/* ── 5 · FORMULARIOS ────────────────────────────────────────────
   Inputs con la misma altura, radio y focus en todo el sitio. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
select,
textarea {
  min-height: var(--dl-touch);
  padding: var(--dl-sp-3) var(--dl-sp-4);
  background: var(--dl-surface);
  border: 1px solid var(--dl-line-2);
  border-radius: var(--dl-r);
  font-family: var(--dl-sans);
  font-size: var(--dl-fs-base);
  color: var(--dl-ink);
  transition: border-color var(--dl-t-fast), box-shadow var(--dl-t-fast);
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--dl-malva-500);
  box-shadow: var(--dl-focus);
}

/* ── 6 · IMÁGENES QUE NO ROMPEN LAYOUT ─────────────────────────── */
img { max-width: 100%; height: auto; display: block; }
.card img,
.cookie-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

/* ── 7 · MODALES ────────────────────────────────────────────────── */
.modal-card,
[class*="modal"] [class*="card"] {
  background: var(--dl-surface) !important;
  border-radius: var(--dl-r-xl) !important;
  box-shadow: var(--dl-shadow-lift) !important;
  padding: var(--dl-sp-6) !important;
}

/* ── 8 · MÓVIL ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .card,
  .cookie-card,
  .order-card,
  .addr-card {
    padding: var(--dl-sp-4) !important;
    border-radius: var(--dl-r) !important;
  }
  .modal-card {
    padding: var(--dl-sp-5) !important;
    border-radius: var(--dl-r-lg) !important;
  }
  .cards-grid,
  .catalog-grid,
  .productos-grid {
    gap: var(--dl-sp-4) !important;
  }
}