/* ─── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Variables de marca: SE INYECTAN desde templates/base.html (bloque <style>
   antes de este link), a partir de config/business.json. Esta hoja NO debe
   volver a declarar --primary/--bg/--ink/etc. — si lo hiciera, al cargarse
   después del bloque inline, sus valores ganarían la cascada y anularían
   silenciosamente el color de marca configurado (bug real detectado y
   corregido: así es como estaba antes, por eso el sitio público nunca
   reflejaba el color configurado). Solo viven aquí los tokens que el bloque
   inline NO inyecta. */
:root {
  --white:       #FFFFFF;
  --radius:      8px;
  --radius-lg:   16px;
  --shadow:      0 2px 12px rgba(0,0,0,.07);
  --shadow-md:   0 4px 24px rgba(0,0,0,.10);
}

html { font-size:16px; scroll-behavior:smooth; }

body {
  font-family:var(--font-body);
  font-weight:400;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ─── Header ─────────────────────────────────────────────────────────────
   Mismo lenguaje visual que el topbar/sidebar del Dashboard: fondo de marca
   (var(--primary)), texto claro, misma curva de transición (--ease) que usa
   admin.css para sus estados hover.
   ──────────────────────────────────────────────────────────────────────── */
.site-header {
  background:var(--primary);
  position:sticky; top:0; z-index:100;
  box-shadow: var(--shadow-sm);
}
.nav-inner {
  max-width:1200px; margin:0 auto; padding:0 2rem;
  height:64px; display:flex; align-items:center; justify-content:space-between;
  gap: 1.5rem;
}
.logo {
  display:flex; align-items:center; gap:.6rem;
  color:#fff;
  font-family:var(--font-display); font-size:1.35rem; font-weight:600; letter-spacing:.02em;
  flex-shrink: 0;
}
.logo:hover { text-decoration:none; }
.logo-mark  { color:#fff; font-size:1.1rem; }
.logo-img   { height:44px; width:auto; display:block; }

.nav-links   { list-style:none; display:flex; align-items:center; gap:.4rem; }
.nav-links a {
  display:inline-flex; align-items:center;
  color:rgba(255,255,255,.82); font-size:.85rem; font-weight:550;
  letter-spacing:.02em;
  padding:.55rem .9rem; border-radius:var(--radius-sm);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.nav-links a:hover,
.nav-links a.active {
  color:#fff; background:rgba(255,255,255,.14); text-decoration:none;
}
.nav-admin {
  margin-left:.4rem;
  background:#fff !important; color:var(--primary) !important;
  font-weight:600 !important; border-radius:var(--radius-sm);
}
.nav-admin:hover { background:rgba(255,255,255,.9) !important; }

/* ─── Flash ──────────────────────────────────────────── */
.flash {
  max-width:1100px; margin:1.5rem auto 0; padding:1rem 1.5rem;
  border-radius:var(--radius); font-size:.9rem;
}
.flash--success { background:var(--success-lt); color:var(--success); border:1px solid #b8d4c0; }
.flash--error   { background:#fdecea; color:#b94040; border:1px solid #f4c4c4; }

/* ─── Layout ─────────────────────────────────────────── */
.main-content  { flex:1; padding-bottom:4rem; }
.section       { max-width:1100px; margin:0 auto; padding:4rem 2rem; }
.section--alt  { background:var(--white); max-width:100%; }
.section--alt > * { max-width:1100px; margin-left:auto; margin-right:auto; }
.section--narrow { max-width:680px; }
.section-header { margin-bottom:2.5rem; }
.section-header h2 {
  font-family:var(--font-display); font-size:2.2rem; font-weight:300;
  color:var(--ink); margin-bottom:.35rem;
}
.section-header p { color:var(--ink-lt); }
.section-actions { margin-bottom:1.5rem; }

/* ─── Hero ─────────────────────────────────────────────────────────────────
   Fondo neutro (var(--bg)), igual que el fondo general del panel en modo
   claro — el color de marca se reserva para la cabecera y los acentos,
   igual que en el Dashboard.
   ──────────────────────────────────────────────────────────────────────── */
.hero { background:var(--bg); padding:6rem 2rem 5rem; text-align:center; }
.hero-content { max-width:600px; margin:0 auto; }
.hero-eyebrow {
  font-size:.8rem; text-transform:uppercase; letter-spacing:.15em;
  color:var(--primary); margin-bottom:1rem; font-weight:600;
}
.hero-title {
  font-family:var(--font-display);
  font-size:clamp(2.8rem, 6vw, 4.5rem);
  font-weight:300; line-height:1.15; color:var(--ink); margin-bottom:1.25rem;
}
.hero-title em { font-style:italic; color:var(--primary); }
.hero-sub { color:var(--ink-mid); font-size:1.05rem; margin-bottom:2.5rem; }

/* Botones: ver static/css/shared.css (mismo componente que el Dashboard) */

/* ─── Services grid ──────────────────────────────────── */
.services-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1.25rem;
}
.service-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.5rem;
  display:flex; flex-direction:column; justify-content:space-between; gap:1rem;
  box-shadow:var(--shadow); transition:box-shadow .2s, transform .2s;
}
.service-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.service-card__name { font-family:var(--font-display); font-size:1.2rem; font-weight:600; color:var(--ink); margin-bottom:.4rem; }
.service-card__desc { font-size:.875rem; color:var(--ink-lt); }
.service-card__footer { display:flex; justify-content:space-between; align-items:center; }
.service-card__duration { font-size:.8rem; color:var(--ink-lt); }
.service-card__price { font-size:1.1rem; font-weight:600; color:var(--primary); }

/* ─── Table ──────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.data-table th,
.data-table td { padding:.75rem 1rem; text-align:left; border-bottom:1px solid var(--border); }
.data-table th {
  font-size:.75rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-lt); background:var(--bg); font-weight:500;
}
.data-table tbody tr:hover { background:var(--bg); }
.id-cell     { color:var(--ink-lt); font-size:.8rem; }
.notas-cell  { color:var(--ink-lt); max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.actions-cell { white-space:nowrap; display:flex; gap:.4rem; }
.row--inactive td { opacity:.55; }

/* ─── Badge ──────────────────────────────────────────── */
.badge {
  display:inline-block; padding:.2rem .7rem; border-radius:20px;
  font-size:.75rem; font-weight:500; text-transform:capitalize;
}
.badge--pending   { background:#FEF3C7; color:#92600A; }
.badge--confirmed { background:var(--success-lt); color:var(--success); }
.badge--completed { background:#e8f4fd; color:#1a6fa8; }
.badge--cancelled { background:#fdecea; color:#b94040; }

/* ─── Empty state ────────────────────────────────────── */
.empty-state { text-align:center; padding:3rem 1rem; color:var(--ink-lt); }
.empty-state p { margin-bottom:1.25rem; }
.empty-state-inline { padding:1.5rem; text-align:center; color:var(--ink-lt); font-size:.9rem; }

/* ─── Forms ──────────────────────────────────────────── */
.booking-form {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:2.5rem; box-shadow:var(--shadow);
}
.form-group { border:none; padding:0; margin-bottom:2rem; }
.form-group legend {
  font-family:var(--font-display); font-size:1.3rem; font-weight:600;
  color:var(--ink); margin-bottom:1.25rem;
  padding-bottom:.5rem; border-bottom:1px solid var(--border); width:100%;
}
.field { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
label { font-size:.85rem; font-weight:500; color:var(--ink-mid); }
.required { color:var(--primary); }
.optional  { font-weight:400; color:var(--ink-lt); font-size:.8rem; }

input[type="text"], input[type="tel"], input[type="email"],
input[type="date"], input[type="time"], input[type="number"],
input[type="password"], select, textarea {
  padding:.7rem 1rem; border:1.5px solid var(--border);
  border-radius:var(--radius); font-family:var(--font-body); font-size:.95rem;
  color:var(--ink); background:var(--bg);
  transition:border-color .2s, box-shadow .2s; width:100%;
}
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}
textarea { resize:vertical; }
.form-footer { margin-top:.5rem; }
.form-note { margin-top:.75rem; font-size:.8rem; color:var(--ink-lt); text-align:center; }

/* ─── Confirmation ───────────────────────────────────── */
.confirmation { text-align:center; padding-top:5rem; padding-bottom:5rem; }
.confirmation__icon { font-size:2.5rem; color:var(--primary); margin-bottom:1.5rem; animation:pop .4s ease; }
@keyframes pop { 0% { transform:scale(.5); opacity:0; } 100% { transform:scale(1); opacity:1; } }
.confirmation__title { font-family:var(--font-display); font-size:2.5rem; font-weight:300; margin-bottom:.75rem; }
.confirmation__sub { color:var(--ink-mid); margin-bottom:2rem; }
.confirmation__detail {
  background:var(--primary-lt); border-radius:var(--radius-lg); padding:1.5rem 2rem;
  display:inline-flex; flex-direction:column; gap:.75rem; min-width:260px; margin-bottom:1.5rem;
}
.detail-row { display:flex; justify-content:space-between; gap:2rem; }
.detail-label { font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--primary); }
.detail-value { font-weight:600; color:var(--ink); }
.confirmation__note { font-size:.875rem; color:var(--ink-lt); margin-bottom:2rem; }
.confirmation__actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ─── Login box ──────────────────────────────────────── */
.login-box { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2.5rem; box-shadow:var(--shadow-md); width:100%; max-width:400px; }
.login-logo { text-align:center; margin-bottom:2rem; }
.login-logo h1 { font-family:var(--font-display); font-size:1.8rem; font-weight:300; }
.login-logo p { font-size:.85rem; color:var(--ink-lt); }

/* ─── Pagination ─────────────────────────────────────── */
.pagination { display:flex; gap:.4rem; align-items:center; padding:1.25rem 1rem; flex-wrap:wrap; }
.page-btn { padding:.4rem .9rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.85rem; color:var(--ink-mid); cursor:pointer; transition:background .15s; }
.page-btn:hover { background:var(--primary-lt); text-decoration:none; }
.page-btn--active { background:var(--primary); color:var(--white); border-color:var(--primary); }
.page-ellipsis { padding:.4rem .4rem; color:var(--ink-lt); }
.page-info { margin-left:auto; font-size:.8rem; color:var(--ink-lt); }

/* ─── Footer ─────────────────────────────────────────── */
.site-footer { background:var(--ink); color:var(--ink-lt); text-align:center; padding:1.5rem 2rem; font-size:.8rem; }

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width:640px) {
  .nav-inner { padding:0 1rem; gap:.5rem; }
  .nav-links { gap:.2rem; }
  .nav-links a { padding:.5rem .55rem; font-size:.78rem; }
  .logo-img { height:36px; }
  .field-row { grid-template-columns:1fr; }
  .booking-form { padding:1.5rem; }
  .hero { padding:4rem 1.5rem 3.5rem; }
  .actions-cell { flex-direction:column; }
}

/* ─── Categorías de servicio (público) ───────────────────── */
.service-category { margin-bottom: 2.5rem; }
.service-category:last-child { margin-bottom: 0; }
.service-category__title {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 600;
  color: var(--ink); margin-bottom: 1rem;
}
.service-category__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ─── Contacto (público) ─────────────────────────────────── */
.contact-grid {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; justify-content: center;
}
.contact-item { display: flex; align-items: center; gap: .5rem; font-size: .95rem; color: var(--ink-mid); }
.contact-icon { font-size: 1.1rem; }