/* ==============================
   RESET
   ============================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ==============================
   PALETA RENATA ALOYS · CÁLIDA
   ============================== */

:root {
  --bg: #f3eee7;
  --bg-soft: #f8f2eb;

  --card: #fff7f1;
  --card-soft: #fff3ea;

  --text: #4e433c;
  --text-strong: #2b2521;
  --muted: #7a6a5f;

  --accent: #de9a74;
  --accent-hover: #cf875e;
  --accent-soft: #f7dcc9;
  --accent-very-soft: #fff0e5;

  --lilac: #8b83f6;
  --lilac-soft: #ebe8ff;

  --border: #efc4aa;
  --border-soft: #eadbd0;

  --white: #ffffff;
  --shadow-soft: rgba(120, 84, 58, 0.08);
}

/* ==============================
   BASE
   ============================== */

html {
  scroll-behavior: smooth;
}

body,
body.dark-mode {
  font-family: "Montserrat", sans-serif;
  background: var(--bg) !important;
  color: var(--text) !important;
  padding: 0 16px;
}

h1,
h2,
h3,
h4,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4 {
  color: var(--accent) !important;
}

h1 {
  font-size: 37px;
  font-weight: 600;
  line-height: 1.2;
}

h2 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
}

p,
li,
span,
label,
body.dark-mode p,
body.dark-mode li,
body.dark-mode span,
body.dark-mode label {
  color: var(--muted) !important;
}

p {
  font-size: 17px;
  line-height: 1.7;
}

a {
  color: inherit;
}

.content-narrow {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ==============================
   HEADER
   ============================== */

.header,
body.dark-mode .header {
  width: 100%;
  padding: 22px 7%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: transparent !important;
}

.nav,
.header .nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 52px !important;
}

.nav a,
.logo a,
.social-icons a,
body.dark-mode .nav a,
body.dark-mode .logo a,
body.dark-mode .social-icons a {
  color: var(--text-strong) !important;
  text-decoration: none;
}

.nav a {
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  white-space: nowrap !important;
  font-size: 18px;
  font-weight: 500;
}

.nav a:first-child {
  margin: 0 !important;
}

.nav a::before,
.nav a::after {
  content: none !important;
  display: none !important;
}

.nav a:hover,
body.dark-mode .nav a:hover {
  color: var(--accent) !important;
}

.logo a {
  font-family: "Quicksand", sans-serif;
  font-size: 47px;
  font-weight: 300;
  letter-spacing: 1px;
  line-height: 1;
}

.header-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}

.social-icons {
  display: none !important;
}

/* ==============================
   SWITCH
   ============================== */

.theme-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  margin-right: 18px;
}

.theme-switch input {
  display: none;
}

.slider {
  position: absolute;
  inset: 0;
  background: #d8c8bd;
  border-radius: 999px;
  cursor: pointer;
  transition: 0.3s;
}

.slider::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  background: #fffaf6;
  border-radius: 50%;
  transition: 0.3s;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

.theme-switch input:checked + .slider {
  background: var(--accent);
}

.theme-switch input:checked + .slider::before {
  transform: translateX(24px);
}

@media (min-width: 801px) {
  .theme-switch {
    width: 32px !important;
    height: 18px !important;
    margin-left: 2px !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  .slider::before {
    width: 14px !important;
    height: 14px !important;
    left: 2px !important;
    top: 2px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.18) !important;
  }

  .theme-switch input:checked + .slider::before {
    transform: translateX(14px) !important;
  }
}

/* ==============================
   BOTONES
   ============================== */

.cta-button,
.button,
button.cta-button {
  display: inline-block;
  background: var(--accent) !important;
  color: #fffaf7 !important;
  text-decoration: none;
  padding: 17px 44px;
  border-radius: 40px;
  font-size: 17px;
  font-weight: 700;
  border: 1.5px solid var(--accent) !important;
  transition: 0.2s ease;
  cursor: pointer;
}

.cta-button:hover,
.button:hover,
button.cta-button:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

.button.secondary,
.small-button.secondary {
  background: transparent !important;
  color: var(--accent) !important;
  border: 1.5px solid var(--accent) !important;
}

.button.secondary:hover,
.small-button.secondary:hover {
  background: var(--accent-very-soft) !important;
}

/* ==============================
   TARJETAS / CÁPSULAS GENERALES
   ============================== */

.admin-card,
.consulta-card,
.service-card,
.card,
.capsula,
.testimonial-card,
.booking-form,
.form-section,
.calendar-box,
.hours-box,
.booking-summary,
.message-card,
.stat-card,
.reserva-card,
.data-block,
.login-card,
.consultas-note,
.empty-state,
body.dark-mode .admin-card,
body.dark-mode .consulta-card,
body.dark-mode .service-card,
body.dark-mode .card,
body.dark-mode .capsula,
body.dark-mode .testimonial-card,
body.dark-mode .booking-form,
body.dark-mode .form-section,
body.dark-mode .calendar-box,
body.dark-mode .hours-box,
body.dark-mode .booking-summary,
body.dark-mode .message-card,
body.dark-mode .stat-card,
body.dark-mode .reserva-card,
body.dark-mode .data-block,
body.dark-mode .login-card,
body.dark-mode .consultas-note,
body.dark-mode .empty-state {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 10px 24px var(--shadow-soft);
}

/* Herencia de texto dentro de tarjetas */
.admin-card p,
.consulta-card p,
.service-card p,
.card p,
.capsula p,
.testimonial-card p,
.booking-form p,
.form-section p,
.calendar-box p,
.hours-box p,
.booking-summary p,
.message-card p,
.stat-card p,
.reserva-card p,
.data-block p,
.login-card p,
.consultas-note p,
body.dark-mode .admin-card p,
body.dark-mode .consulta-card p,
body.dark-mode .service-card p,
body.dark-mode .card p,
body.dark-mode .capsula p,
body.dark-mode .testimonial-card p,
body.dark-mode .booking-form p,
body.dark-mode .form-section p,
body.dark-mode .calendar-box p,
body.dark-mode .hours-box p,
body.dark-mode .booking-summary p,
body.dark-mode .message-card p,
body.dark-mode .stat-card p,
body.dark-mode .reserva-card p,
body.dark-mode .data-block p,
body.dark-mode .login-card p,
body.dark-mode .consultas-note p {
  color: var(--muted) !important;
}

.admin-card h1,
.admin-card h2,
.admin-card h3,
.consulta-card h1,
.consulta-card h2,
.consulta-card h3,
.service-card h1,
.service-card h2,
.service-card h3,
.card h1,
.card h2,
.card h3,
.capsula h1,
.capsula h2,
.capsula h3,
.testimonial-card h1,
.testimonial-card h2,
.testimonial-card h3,
body.dark-mode .admin-card h1,
body.dark-mode .admin-card h2,
body.dark-mode .admin-card h3,
body.dark-mode .consulta-card h1,
body.dark-mode .consulta-card h2,
body.dark-mode .consulta-card h3,
body.dark-mode .service-card h1,
body.dark-mode .service-card h2,
body.dark-mode .service-card h3,
body.dark-mode .card h1,
body.dark-mode .card h2,
body.dark-mode .card h3,
body.dark-mode .capsula h1,
body.dark-mode .capsula h2,
body.dark-mode .capsula h3,
body.dark-mode .testimonial-card h1,
body.dark-mode .testimonial-card h2,
body.dark-mode .testimonial-card h3 {
  color: var(--accent) !important;
}

/* Hover suave para tarjetas */
.consulta-card:hover,
.service-card:hover,
.card:hover,
.capsula:hover,
.testimonial-card:hover {
  background: var(--card-soft) !important;
  border-color: #e7b18e !important;
  transform: translateY(-2px);
  transition: all 0.2s ease;
}

/* ==============================
   SECCIÓN CONSULTAS / HOME CARDS
   ============================== */

.consultas-grid,
.services-grid,
.cards-grid {
  gap: 28px;
}

.consulta-card,
.service-card,
.capsula {
  border-radius: 32px !important;
}

.consulta-card .price,
.consulta-price {
  color: var(--text-strong) !important;
}

.consulta-card .duration,
.consulta-card strong {
  color: var(--text-strong) !important;
}

/* Por si alguna sección tenía fondo negro directo */
.consultas-page,
.page,
.container,
main,
section {
  color: var(--text);
}

/* ==============================
   FORMULARIOS
   ============================== */

input,
textarea,
select,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background: #fffaf6 !important;
  border: 1px solid var(--border) !important;
  color: var(--text-strong) !important;
}

input::placeholder,
textarea::placeholder {
  color: #a08b7d;
}

.field label,
body.dark-mode .field label {
  color: var(--text-strong) !important;
}

/* ==============================
   ESTADOS / MENSAJES
   ============================== */

.status.disponible,
.message.ok {
  background: var(--accent-very-soft) !important;
  color: var(--accent) !important;
}

.status.bloqueada {
  background: rgba(130, 130, 130, 0.16) !important;
  color: #555 !important;
}

.status.reservada {
  background: rgba(26, 135, 84, 0.12) !important;
  color: #198754 !important;
}

.message.error {
  background: rgba(176, 0, 32, 0.1) !important;
  color: #b00020 !important;
}

/* ==============================
   CALENDARIO
   ============================== */

.calendar-day.available,
.hour-button {
  background: var(--accent-very-soft) !important;
  color: var(--accent) !important;
  border-color: var(--border) !important;
}

.calendar-day.selected,
.hour-button.selected {
  background: var(--accent) !important;
  color: #ffffff !important;
  border-color: var(--accent) !important;
}

.calendar-day,
.calendar-weekdays span,
.calendar-top h3,
body.dark-mode .calendar-day,
body.dark-mode .calendar-weekdays span,
body.dark-mode .calendar-top h3 {
  color: var(--text) !important;
}

/* ==============================
   FOOTER
   ============================== */

.footer,
body.dark-mode .footer {
  margin-top: 0;
  padding: 36px 20px;
  text-align: center;
  border-top: 1px solid var(--border-soft) !important;
  background: var(--bg) !important;
  color: var(--muted) !important;
}

.footer-links {
  margin-bottom: 14px;
  font-size: 15px;
}

.footer-links a,
.footer-copy,
body.dark-mode .footer-links a,
body.dark-mode .footer-copy {
  color: var(--muted) !important;
  text-decoration: none;
  margin: 0 8px;
}

.footer-links a:hover,
body.dark-mode .footer-links a:hover {
  color: var(--accent) !important;
}

.footer-copy {
  font-size: 14px;
}

/* ==============================
   PÁGINAS INTERIORES
   ============================== */

.legal-container,
.faq-container,
.how-container,
.thank-you,
.support-page,
main.container,
main > form.card {
  margin-top: 56px !important;
}

.legal-container h1,
.faq-container h1,
.how-container h1,
.thank-you h1,
.support-page h1,
main.container .hero h1,
.form-title {
  font-size: 47px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
  margin-bottom: 18px !important;
}

.intro,
.form-intro,
main.container .hero p,
.support-page > p,
.thank-you > p {
  font-size: 20px !important;
  line-height: 1.7 !important;
}

/* ==============================
   ADMIN
   ============================== */

.admin-header h1,
.admin-card h2,
.reserva-title h2,
body.dark-mode .admin-header h1,
body.dark-mode .admin-card h2,
body.dark-mode .reserva-title h2 {
  color: var(--accent) !important;
}

.admin-header p,
.reserva-title p,
.data-block span,
.data-block p,
body.dark-mode .admin-header p,
body.dark-mode .reserva-title p,
body.dark-mode .data-block span,
body.dark-mode .data-block p {
  color: var(--muted) !important;
}

/* ==============================
   RESPONSIVE
   ============================== */

@media (max-width: 800px) {
  body {
    padding: 0 14px;
  }

  h1 {
    font-size: 34px;
  }

  h2 {
    font-size: 23px;
  }

  p {
    font-size: 16px;
  }

  .header {
    position: relative;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 7% 10px;
    text-align: center;
  }

  .nav,
  .header .nav {
    justify-content: center !important;
    gap: 36px !important;
  }

  .nav a {
    font-size: 18px;
  }

  .logo {
    order: -1;
  }

  .logo a {
    font-size: 47px;
    line-height: 1;
  }

  .header .header-right,
  .header-right,
  .theme-switch {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  .footer-links {
    line-height: 1.8;
  }

  .legal-container,
  .faq-container,
  .how-container,
  .thank-you,
  .support-page,
  main.container,
  main > form.card {
    margin-top: 28px !important;
  }

  .legal-container h1,
  .faq-container h1,
  .how-container h1,
  .thank-you h1,
  .support-page h1,
  main.container .hero h1,
  .form-title {
    font-size: 38px !important;
    line-height: 1.2 !important;
    margin-bottom: 14px !important;
  }

  .intro,
  .form-intro,
  main.container .hero p,
  .support-page > p,
  .thank-you > p {
    font-size: 18px !important;
    line-height: 1.55 !important;
  }
}