/* ── Dashboard (inicio tras login) ────────────────────────────────────────────
   Mismo lenguaje que el landing: niebla, tinta, líneas finas, un acento azul.
   ───────────────────────────────────────────────────────────────────────── */

.db { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4rem); }
.db > * { min-width: 0; }

/* Saludo + composición rápida */
.db-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
  padding: clamp(1.5rem, 4vw, 2.8rem);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.db-hero__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.db-hero__lines path { fill: none; stroke: var(--color-primary); stroke-width: 1; opacity: .35; vector-effect: non-scaling-stroke; }
.db-hero__lines circle { fill: var(--color-primary); opacity: .6; }
.db-hero > *:not(svg) { position: relative; }

.db-title { font-size: clamp(2rem, 4.5vw, 3.2rem); margin: 0; }
.db-sub { margin: .6rem 0 1.6rem; color: var(--color-text-muted); font-size: var(--text-md); }

.db-compose {
  display: flex;
  gap: .5rem;
  padding: .4rem .4rem .4rem 1.2rem;
  border-radius: var(--radius-full);
  background: var(--color-bg-input);
  box-shadow: inset 0 0 0 1px var(--color-border);
  transition: box-shadow var(--transition-fast);
}
.db-compose:focus-within { box-shadow: inset 0 0 0 1px var(--color-primary), 0 0 0 4px var(--color-primary-glow); }
.db-compose input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-md);
  color: var(--color-text);
}
.db-compose input::placeholder { color: var(--color-text-dim); }

.db-ideas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.db-idea {
  padding: .4rem .85rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.db-idea:hover { color: var(--color-primary); border-color: var(--color-primary); }

.db-credits {
  justify-self: end;
  text-align: right;
  display: grid;
  gap: .3rem;
}
.db-credits__value { font: 300 clamp(2.4rem, 5vw, 3.4rem)/1 var(--font-display); letter-spacing: -0.03em; }
.db-credits__label { color: var(--color-text-muted); font-size: var(--text-sm); }
.db-credits .btn { justify-self: end; margin-top: .6rem; }

/* Encabezado de sección */
.db-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.db-head h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0; }
.db-head a { font-size: var(--text-sm); }

/* Herramientas */
.db-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.db-tool {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-night);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}
.db-tool:hover { color: #fff; }
.db-tool img, .db-tool video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .8s cubic-bezier(.2, .7, .1, 1);
}
.db-tool:hover img, .db-tool:hover video { transform: scale(1.04); }
.db-tool::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(19, 24, 38, .82) 0%, rgba(19, 24, 38, .15) 55%, rgba(19, 24, 38, 0) 100%);
}
.db-tool__body { position: absolute; left: 1.3rem; right: 1.3rem; bottom: 1.2rem; }
.db-tool__title { font: 300 1.45rem/1.15 var(--font-display); margin: 0; color: #fff; }
.db-tool__text { margin: .35rem 0 0; font-size: var(--text-sm); color: rgba(255, 255, 255, .8); }
.db-tool__price {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: .25rem .65rem;
  border-radius: var(--radius-full);
  background: rgba(245, 247, 250, .88);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}
.db-soon { margin-top: 1rem; font-size: var(--text-sm); color: var(--color-text-muted); }
.db-soon strong { color: var(--color-text); font-weight: var(--font-medium); }

/* Creaciones recientes */
.db-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; }
.db-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  display: grid;
  place-items: center;
  text-decoration: none;
  color: var(--color-text-muted);
}
.db-thumb img, .db-thumb video { width: 100%; height: 100%; object-fit: cover; }
.db-thumb__meta {
  position: absolute;
  left: .5rem;
  bottom: .5rem;
  padding: .2rem .55rem;
  border-radius: var(--radius-full);
  background: rgba(245, 247, 250, .9);
  color: var(--color-text);
  font-size: .7rem;
}
.db-thumb--status { font-size: var(--text-sm); text-align: center; padding: 1rem; }
.db-thumb--status.is-failed { color: var(--color-error); }
.db-empty {
  padding: 2.4rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-xl);
  text-align: center;
  color: var(--color-text-muted);
  display: grid;
  gap: 1rem;
  justify-items: center;
}

/* Inspiración: tira horizontal */
.db-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 260px);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .8rem;
  scrollbar-width: thin;
}
.db-card { scroll-snap-align: start; display: grid; gap: .7rem; }
.db-card__img { aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-card); }
.db-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .1, 1); }
.db-card:hover .db-card__img img { transform: scale(1.04); }
.db-card__tag { font-size: var(--text-xs); color: var(--color-primary); }
.db-card__title { font-weight: var(--font-semi); margin: .1rem 0 0; }
.db-card__prompt {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.db-card .btn { justify-self: start; }

@media (max-width: 860px) {
  .db-hero { grid-template-columns: 1fr; }
  .db-hero__lines { display: none; }
  .db-credits { justify-self: start; text-align: left; }
  .db-credits .btn { justify-self: start; }
  .db-tools { grid-template-columns: 1fr; }
  .db-compose { flex-direction: column; border-radius: var(--radius-xl); padding: .8rem; }
  .db-compose .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .db-tool img, .db-tool video, .db-card__img img { transition: none; }
}