/* pages.css
   Estilos específicos por página/plantilla (Auth, Client, Pro, Perfil)
   Mantiene mobile-first y solo lo “page-level” (lo común va en components.css)
*/

/* -------------------------------------------------------------- */
/* Global page helpers                                             */
/* -------------------------------------------------------------- */

.page {
  padding: var(--s-5) 0;
}

.page-title {
  font-size: var(--fs-6);
  margin: 0 0 var(--s-4);
}

.page-subtitle {
  margin: 0 0 var(--s-5);
  color: var(--muted);
  font-size: var(--fs-3);
}

.section {
  margin-top: var(--s-6);
}

.section-title {
  font-size: var(--fs-5);
  margin: 0 0 var(--s-4);
}

.muted {
  color: var(--muted);
}

/* -------------------------------------------------------------- */
/* Auth pages (login / register)                                  */
/* -------------------------------------------------------------- */

.auth-wrap {
  min-height: calc(100vh - var(--tap));
  display: grid;
  place-items: center;
  padding: var(--s-6) var(--s-4);
}

.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-2);
  padding: var(--s-6);
}

.auth-card .page-title {
  font-size: var(--fs-5);
  margin-bottom: var(--s-3);
}

.auth-card .page-subtitle {
  margin-bottom: var(--s-5);
}

.auth-actions {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.auth-actions .btn {
  width: 100%;
}

/* Links secundarios (password reset / register) */
.auth-links {
  margin-top: var(--s-4);
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-size: var(--fs-2);
}

/* -------------------------------------------------------------- */
/* Client: listado solicitudes (my-requests)                       */
/* -------------------------------------------------------------- */

.client-requests {
  display: grid;
  gap: var(--s-4);
}

.client-requests-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.client-requests-header .btn {
  min-width: 180px;
}

@media (max-width: 480px) {
  .client-requests-header .btn {
    width: 100%;
  }
}

/* Detail modal: layout interno */
.request-detail {
  display: grid;
  gap: var(--s-4);
}

.request-detail__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}

.request-detail__photos img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: var(--r-2);
  border: var(--border-w) solid var(--border);
}

@media (min-width: 481px) {
  .request-detail__photos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .request-detail__photos img {
    height: 130px;
  }
}

@media (min-width: 769px) {
  .request-detail__photos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .request-detail__photos img {
    height: 140px;
  }
}

/* Quotes list dentro del detalle */
.request-quotes {
  display: grid;
  gap: var(--s-4);
}

/* -------------------------------------------------------------- */
/* Pro: Leads (trabajos abiertos)                                  */
/* -------------------------------------------------------------- */

.pro-leads-header {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

/* Filtros: en móvil una columna, en desktop 2–3 */
.lead-filters {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
}

@media (min-width: 769px) {
  .lead-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }
}

/* Caja eligibilidad dentro del modal */
.lead-eligibility {
  border-radius: var(--r-2);
  border: var(--border-w) solid var(--border);
  background: rgba(15, 23, 42, 0.03);
  padding: var(--s-4);
  color: var(--text);
}

/* Quote form dentro del modal */
.quote-form {
  display: grid;
  gap: var(--s-4);
}

/* En desktop: 2 columnas para precio/plazo */
@media (min-width: 769px) {
  .quote-form__grid {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------- */
/* Pro: Mis ofertas (quotes)                                       */
/* -------------------------------------------------------------- */

.quotes-header {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.quotes-filters {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  padding-bottom: var(--s-2);
  -webkit-overflow-scrolling: touch;
}

.quotes-filters button {
  /* puedes usar .tab o .chip directamente en HTML */
}

.quote-item {
  display: grid;
  gap: var(--s-3);
}

/* -------------------------------------------------------------- */
/* Perfil (usuario + empresa)                                      */
/* -------------------------------------------------------------- */

.profile-wrap {
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 1025px) {
  .profile-wrap {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.profile-card {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-1);
  padding: var(--s-6);
}

.profile-card__title {
  font-size: var(--fs-5);
  margin: 0 0 var(--s-4);
}

.profile-card__subtitle {
  color: var(--muted);
  margin: 0 0 var(--s-5);
}

/* -------------------------------------------------------------- */
/* Header/Nav spacing: evitar que bottom-nav tape contenido en móvil */
/* -------------------------------------------------------------- */

.has-bottom-nav {
  padding-bottom: calc(var(--tap) + var(--s-6));
}

@media (min-width: 1025px) {
  .has-bottom-nav {
    padding-bottom: 0;
  }
}
/* =========================================================
   LANDING (index)
   Pegar al FINAL de pages.css
========================================================= */

body.landing.is-loading .landing-main {
  visibility: hidden; /* evita parpadeo si rediriges por rol */
}

.landing-main { padding-bottom: var(--s-8); }

.landing-header .landing-nav {
  display: none;
  gap: var(--s-3);
  margin-right: var(--s-3);
}
.landing-header .nav-link {
  color: var(--muted);
  font-weight: var(--fw-medium);
  font-size: var(--fs-2);
}
.landing-header .nav-link:hover { color: var(--text); text-decoration: none; }

@media (min-width: 1025px) {
  .landing-header .landing-nav { display: flex; }
}

/* Hero premium */
.hero-premium {
  position: relative;
  padding: var(--s-8) 0;
}

.hero-premium .hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1000px 400px at 20% 10%, rgba(37,99,235,0.18), transparent 60%),
    radial-gradient(900px 420px at 80% 20%, rgba(124,58,237,0.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.65), rgba(246,247,251,1));
  pointer-events: none;
}

.hero-premium .hero-inner {
  position: relative;
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1025px) {
  .hero-premium .hero-inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--s-8);
    align-items: center;
  }
}

.hero-copy h1 {
  letter-spacing: -0.02em;
}

.hero-subtitle {
  font-size: var(--fs-4);
  color: var(--muted);
  max-width: 56ch;
}

.hero-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.kicker-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px 12px;
  border-radius: 999px;
  border: var(--border-w) solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.70);
  box-shadow: var(--shadow-1);
  font-size: var(--fs-2);
  color: var(--text);
}

.hero-ctas {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin: var(--s-4) 0 var(--s-5);
}

.hero-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin: var(--s-4) 0;
}

@media (min-width: 481px) {
  .hero-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.metric {
  background: rgba(255,255,255,0.75);
  border: var(--border-w) solid rgba(15,23,42,0.10);
  border-radius: var(--r-3);
  padding: var(--s-4);
  box-shadow: var(--shadow-1);
}

.metric-value { font-size: 22px; font-weight: var(--fw-bold); line-height: 1.1; }
.metric-label { color: var(--muted); font-size: var(--fs-2); margin-top: 6px; }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-4);
  color: var(--muted);
  font-size: var(--fs-2);
}

.trust-item { display: inline-flex; align-items: center; gap: var(--s-2); }

/* Hero widget card */
.hero-widget .card-header p { margin: 0; }
.quick-form { display: grid; gap: var(--s-4); }

.field-row {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 481px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

.fineprint { font-size: var(--fs-2); }

/* Sections */
.section-head {
  margin-bottom: var(--s-5);
}
.section-alt {
  background: rgba(15,23,42,0.03);
  border-top: var(--border-w) solid rgba(15,23,42,0.06);
  border-bottom: var(--border-w) solid rgba(15,23,42,0.06);
  padding: var(--s-7) 0;
}

.center-cta {
  margin-top: var(--s-6);
  display: flex;
  justify-content: center;
}

/* Service cards */
.service-card {
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.service-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  text-decoration: none;
}
.service-icon { font-size: 26px; margin-bottom: var(--s-2); }
.linkish { color: var(--primary); font-weight: var(--fw-semibold); }

/* Steps */
.step-num {
  width: 40px; height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(37,99,235,0.12);
  border: 1px solid rgba(37,99,235,0.18);
  font-weight: var(--fw-bold);
  margin-bottom: var(--s-3);
}

/* FAQ */
.faq { display: grid; gap: var(--s-3); max-width: 860px; }
.faq-item {
  border-radius: var(--r-3);
  border: var(--border-w) solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.80);
  box-shadow: var(--shadow-1);
  padding: var(--s-4);
}
.faq-item summary {
  cursor: pointer;
  font-weight: var(--fw-semibold);
}
.faq-item p { margin-top: var(--s-3); }

/* CTA split */
.cta-split {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 1025px) {
  .cta-split { grid-template-columns: 1fr 1px 1fr; align-items: center; }
  .cta-divider { width: 1px; height: 100%; background: rgba(15,23,42,0.10); }
}