@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@700&display=swap');

:root {
  --blue: #2f6fed;
  --blue-light: #5b8dff;
  --bg: #0a0a0a;
  --surface: #141414;
  --surface-2: #1c1c1c;
  --border: rgba(255,255,255,0.08);
  --border-blue: rgba(47,111,237,0.3);
  --text: #f0f0f0;
  --text-secondary: #909090;
  --text-muted: #484848;
  --success: #22c55e;
  --success-bg: rgba(34,197,94,0.12);
  --error: #ef4444;
  --error-bg: rgba(239,68,68,0.12);
  --warning: #f59e0b;
  --warning-bg: rgba(245,158,11,0.12);
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 8px 32px rgba(0,0,0,0.5);
}

/* Tema claro -- redefine las mismas variables, así que todo lo que ya usa
   var(--bg)/var(--surface)/var(--text)/etc. se adapta solo, sin tocar cada
   regla una por una. El azul se oscurece un poco acá: el mismo #2f6fed
   que se lee bien sobre fondo negro pierde contraste sobre blanco cuando
   se usa como color de texto (precios, links, título del hero). */
html[data-theme="light"] {
  --blue: #1e4fd8;
  --blue-light: #3d6ae8;
  --bg: #faf8f4;
  --surface: #ffffff;
  --surface-2: #f1eee6;
  --border: rgba(0,0,0,0.1);
  --border-blue: rgba(30,79,216,0.4);
  --text: #201d18;
  --text-secondary: #5c5850;
  --text-muted: #9b968c;
  --success: #16a34a;
  --success-bg: rgba(22,163,74,0.1);
  --error: #dc2626;
  --error-bg: rgba(220,38,38,0.1);
  --warning: #b45309;
  --warning-bg: rgba(180,83,9,0.1);
  --shadow: 0 8px 32px rgba(0,0,0,0.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}

/* ══════════════════════════════
   ANIMATIONS
══════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes popIn {
  0%   { transform: scale(0.82); opacity: 0; }
  65%  { transform: scale(1.08); }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes shimmerIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60%  { transform: translateX(-5px); }
  40%,80%  { transform: translateX(5px); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes slideUpCenter {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes calSlide {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes pulseBlue {
  0%,100% { box-shadow: 0 0 0 0   rgba(47,111,237,0.5); }
  50%      { box-shadow: 0 0 0 10px rgba(47,111,237,0); }
}

/* ══════════════════════════════
   HEADER
══════════════════════════════ */
.top-bar {
  /* Opaco de verdad -- con 0.97 (no 1) el contenido detrás alcanzaba a
     transparentarse un poco al hacer scroll, sobre todo el título dorado
     del hero, que quedaba como un fantasma pegado abajo del header. */
  background: var(--bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-blue);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 50;
  animation: fadeIn 0.4s ease both;
}

.logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  color: var(--blue);
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
}

.logo-img { height: 26px; width: auto; }

/* Insignia "BETA 0.1" -- generada por CSS (::after) en vez de tocar el
   HTML de las 9 páginas, así queda en un solo lugar. Sube la versión acá
   cuando corresponda; content: 'BETA X.X' es lo único que hay que tocar. */
.logo::after {
  content: 'BETA 0.1';
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--blue);
  background: rgba(47,111,237,0.1);
  border: 1px solid var(--border-blue);
  border-radius: 20px;
  padding: 3px 8px;
  text-transform: uppercase;
}

.tagline {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 300;
  margin-left: auto;
}

.admin-badge {
  margin-left: auto;
  background: var(--blue);
  color: #0a0a0a;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.top-bar-link {
  margin-left: auto;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  border: 1px solid var(--border-blue);
  background: rgba(47,111,237,0.08);
  padding: 7px 13px;
  border-radius: 20px;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
}
.top-bar-link:hover  { background: rgba(47,111,237,0.16); }
.top-bar-link:active { transform: scale(0.96); }

/* ══════════════════════════════
   OWNER CTA (registrar auto)
══════════════════════════════ */
.owner-cta-wrap {
  padding: 0 18px;
  margin-top: -25px;
  margin-bottom: 80px;
  z-index: 1;
}

.owner-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 560px;
  margin: 0 auto 20px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(47,111,237,0.14) 0%, var(--surface) 65%);
  border: 1.5px solid var(--border-blue);
  border-radius: var(--radius);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  transition: transform 0.15s, box-shadow 0.2s;
  animation: fadeInUp 0.55s 0.15s ease both;
}
.owner-cta:hover  { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.4); }
.owner-cta:active { transform: scale(0.98); }

.owner-cta-icon { font-size: 1.8rem; flex-shrink: 0; }
.owner-cta-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.owner-cta-title { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.owner-cta-desc  { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.4; }

.owner-cta-btn {
  flex-shrink: 0;
  background: var(--blue);
  color: #0a0a0a;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .owner-cta { flex-wrap: wrap; }
  .owner-cta-btn { width: 100%; text-align: center; }
  /* En páginas con más botones en el header (index, login, etc.) la
     insignia "BETA 0.1" empujaba "Iniciar sesión" fuera de la pantalla
     en mobile -- se prioriza la navegación funcional por sobre la
     insignia decorativa acá. */
  .logo::after { display: none; }
}

/* ══════════════════════════════
   HERO BANNER
══════════════════════════════ */
.hero-banner {
  /* No hay foto de fondo (nunca se subió public/bg.jpg) -- referenciarla
     solo generaba un 404 en cada carga sin ningún efecto visual, porque
     ya caía al color sólido de todas formas. Tampoco border-bottom: sin
     foto detrás, esa línea separaba dos zonas del mismo negro y quedaba
     como una raya suelta flotando sobre el fondo. Por la misma razón
     tampoco tiene ::before con degradé oscuro -- era para oscurecer una
     foto que nunca estuvo, y sobre el tema claro se vería como una
     mancha gris tapando el fondo. */
  background: var(--bg);
  padding: 36px 24px 52px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-logo {
  height: 60px;
  width: auto;
  margin-bottom: 18px;
  position: relative;
  animation: fadeInUp 0.55s 0.1s ease both;
}

.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 10px;
  position: relative;
  animation: fadeInUp 0.55s 0.22s ease both;
}

.hero-title span { color: var(--blue); }

.hero-sub {
  font-size: 0.82rem;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  position: relative;
  animation: fadeInUp 0.55s 0.34s ease both;
}

/* ══════════════════════════════
   FORM WRAP
══════════════════════════════ */
.form-wrap {
  padding: 0 16px 48px;
  margin-top: -24px;
  position: relative;
  z-index: 1;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
  max-width: 560px;
  margin: 0 auto;
  animation: fadeInUp 0.55s 0.2s ease both;
}

.card-header { margin-bottom: 24px; }
.card-header h2 { font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.subtitle { font-size: 0.82rem; color: var(--text-secondary); }

/* ══════════════════════════════
   FORM ELEMENTS
══════════════════════════════ */
.form-group { margin-bottom: 20px; }

.form-group label {
  display: block;
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}

.hint { color: var(--text-muted); font-size: 0.72rem; text-transform: none; letter-spacing: 0; font-weight: 400; }

.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
}

.form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47,111,237,0.12);
}

.form-group input:read-only { opacity: 0.65; cursor: not-allowed; }

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }

.input-error {
  font-size: 0.76rem;
  color: var(--error);
  margin-top: 5px;
  display: none;
}

.form-group.has-error { animation: shake 0.35s ease; }

.form-group.has-error input,
.form-group.has-error textarea {
  border-color: var(--error);
  box-shadow: 0 0 0 3px var(--error-bg);
}

.form-group.has-error .input-error { display: block; }

/* ══════════════════════════════
   SERVICE CARDS
══════════════════════════════ */
.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.service-card {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  user-select: none;
  display: flex;
  flex-direction: column;
  animation: shimmerIn 0.38s ease both;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.service-card:active { transform: scale(0.96); }

.service-card:hover {
  border-color: rgba(47,111,237,0.45);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  transform: translateY(-2px);
}

.service-card.selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47,111,237,0.18), 0 8px 28px rgba(0,0,0,0.4);
}

/* Visual header */
.service-card-visual {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--card-color, #1a1a1a) 0%, #0a0a0a 100%);
  transition: filter 0.2s;
}

.service-card-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 40% 30%, rgba(255,255,255,0.07) 0%, transparent 65%);
  pointer-events: none;
}

.service-card-visual::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 32px;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
  pointer-events: none;
}

.service-card.selected .service-card-visual { filter: brightness(1.12); }

.service-card-emoji {
  font-size: 2.4rem;
  position: relative;
  z-index: 1;
  transition: transform 0.22s;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}

.service-card:hover   .service-card-emoji { transform: scale(1.1) rotate(-6deg); }
.service-card.selected .service-card-emoji { transform: scale(1.18); }

.service-popular-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--blue);
  color: #0a0a0a;
  font-size: 0.58rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  z-index: 2;
}

.service-card-info {
  padding: 11px 13px 13px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.service-card-name {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 3px;
}

.service-card-desc {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 8px;
}

.service-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.service-card-price {
  font-size: 1rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.3px;
}

.service-card-duration {
  font-size: 0.63rem;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 2px 7px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

/* Selected checkmark overlay */
.service-card-check {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  background: var(--blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  z-index: 3;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.18s, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}

.service-card.selected .service-card-check {
  opacity: 1;
  transform: scale(1);
}

.form-group.has-error .service-grid {
  outline: 1.5px solid var(--error);
  outline-offset: 3px;
  border-radius: 16px;
}

/* ══════════════════════════════
   AUTO CARDS (renta de autos)
══════════════════════════════ */
.auto-grid { grid-template-columns: 1fr; }

.catalog-section-title {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 10px 0 -4px;
}
.catalog-section-title:first-child { margin-top: 0; }

.auto-card-visual {
  height: 150px;
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface) 100%);
}

.auto-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: relative;
  z-index: 1;
  transition: transform 0.3s;
}

.auto-card:hover .auto-card-img    { transform: scale(1.05); }
.auto-card.selected .auto-card-img { transform: scale(1.08); }

.auto-card-categoria {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--border-blue);
  color: var(--blue);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  z-index: 2;
}

.auto-card-anio { color: var(--text-muted); font-weight: 500; font-size: 0.78em; }

.auto-card-resenas { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; font-size: 0.8rem; color: var(--text-muted); }

.auto-card-specs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.auto-price-dia { font-size: 0.6rem; color: var(--text-muted); font-weight: 500; margin-left: 2px; }

/* ══════════════════════════════
   DOCUMENTOS (DUI / licencia)
══════════════════════════════ */
.doc-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 16px;
}

.doc-block label {
  display: block;
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}

.doc-block input {
  width: 100%;
  padding: 14px 16px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  -webkit-appearance: none;
}

.doc-block input:focus { outline: none; border-color: var(--blue); }

.doc-upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.doc-upload-row input[type="file"] {
  flex: 1;
  padding: 10px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* El botón nativo "Elegir archivo" no hereda colores del input -- sin esto
   queda un botón gris/blanco de sistema pegado sobre el tema oscuro. */
.doc-upload-row input[type="file"]::file-selector-button,
.doc-upload-row input[type="file"]::-webkit-file-upload-button {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-blue);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  margin-right: 12px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.doc-upload-row input[type="file"]::file-selector-button:hover,
.doc-upload-row input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--blue);
  color: #0a0a0a;
  border-color: var(--blue);
}

.doc-preview-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1.5px solid var(--border-blue);
  flex-shrink: 0;
}

.doc-preview-img.hidden { display: none; }

.doc-review-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.doc-review-row:last-child { border-bottom: none; }
.doc-review-row .doc-preview-img { cursor: pointer; border-color: var(--border); }
.doc-review-info { flex: 1; min-width: 0; }
.doc-review-label { font-size: 0.85rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.doc-review-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.doc-review-actions { display: flex; gap: 6px; flex-shrink: 0; }

.foto-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.foto-gallery .doc-preview-img {
  width: 72px;
  height: 72px;
}
.foto-gallery:empty { display: none; }

.photo-credit {
  max-width: 560px;
  margin: 14px auto 0;
  text-align: center;
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.photo-credit a { color: var(--text-secondary); }

/* ── Insignia genérica de marca ──────────────────────── */
.brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.55rem;
  font-weight: 800;
  color: #0a0a0a;
  letter-spacing: -0.3px;
  vertical-align: middle;
  margin-right: 2px;
  flex-shrink: 0;
}

/* ══════════════════════════════
   CUSTOM DATE PICKER
══════════════════════════════ */
.date-picker-wrap { position: relative; }

.date-input-display {
  width: 100%;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
  user-select: none;
  -webkit-appearance: none;
}

.date-input-display:active { transform: scale(0.99); }

.date-input-display.open {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47,111,237,0.12);
}

.date-input-display .placeholder-text { color: var(--text-muted); }
.date-input-display .date-text { color: var(--text); font-weight: 500; }

.date-icon {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.2s, transform 0.25s;
}

.date-input-display.open .date-icon {
  color: var(--blue);
  transform: rotate(180deg);
}

/* Calendar dropdown */
.calendar-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-blue);
  border-radius: var(--radius);
  padding: 16px;
  z-index: 100;
  box-shadow: 0 16px 48px rgba(0,0,0,0.65);
  animation: calSlide 0.22s cubic-bezier(0.22,1,0.36,1) both;
}

.calendar-dropdown.hidden { display: none; }

.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.cal-month-year {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.3px;
  text-transform: capitalize;
}

.cal-nav {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 1.3rem;
  width: 38px;
  height: 38px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
  font-family: inherit;
  line-height: 1;
}

.cal-nav:hover  { color: var(--blue); border-color: var(--border-blue); background: rgba(47,111,237,0.08); }
.cal-nav:active { transform: scale(0.88); }
.cal-nav:disabled { opacity: 0.25; cursor: not-allowed; }

.cal-days-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
  text-align: center;
}

.cal-days-header span {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px 0;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-day {
  aspect-ratio: 1;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  position: relative;
  color: var(--text);
}

.cal-day:hover:not(.disabled):not(.selected) {
  background: rgba(47,111,237,0.12);
  color: var(--blue);
}

.cal-day:active:not(.disabled) { transform: scale(0.88); }

.cal-day.today {
  font-weight: 700;
  color: var(--blue);
}

.cal-day.today::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--blue);
  border-radius: 50%;
}

.cal-day.selected {
  background: var(--blue);
  color: #0a0a0a;
  font-weight: 700;
  animation: popIn 0.22s ease;
}

.cal-day.selected.today::after { background: #0a0a0a; }

.cal-day.disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.3;
}

.cal-day.other-month { opacity: 0.18; pointer-events: none; }

/* ══════════════════════════════
   TIME SLOTS
══════════════════════════════ */
.time-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.time-slot {
  min-height: 48px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  user-select: none;
  animation: shimmerIn 0.3s ease both;
}

.time-slot:active:not(.occupied)  { transform: scale(0.92); }
.time-slot:hover:not(.occupied):not(.selected) {
  border-color: rgba(47,111,237,0.45);
  background: rgba(47,111,237,0.07);
}

.time-slot.selected {
  border-color: var(--blue);
  background: var(--blue);
  color: #0a0a0a;
  font-weight: 700;
  animation: popIn 0.22s ease;
}

.time-slot.occupied {
  opacity: 0.38;
  cursor: not-allowed;
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.06);
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.25);
}

.time-slot.selected::before {
  content: '✔ ';
  font-size: 0.72rem;
  opacity: 0.85;
}

.time-placeholder {
  color: var(--text-muted);
  font-size: 0.84rem;
  padding: 18px 14px;
  text-align: center;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  line-height: 1.5;
}

.form-group.has-error .time-placeholder,
.form-group.has-error .time-grid {
  outline: 1.5px solid var(--error);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Selected time feedback ── */
.selected-time-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(47,111,237,0.1);
  border: 1px solid rgba(47,111,237,0.28);
  border-radius: var(--radius-sm);
  margin-top: 10px;
  font-size: 0.84rem;
  color: var(--blue);
  font-weight: 500;
  animation: fadeInUp 0.2s ease both;
}

.selected-time-info strong { font-weight: 700; margin-left: 2px; }
.check-icon { font-size: 0.9rem; }

/* ── Suggestion banner ── */
.suggestion-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  animation: fadeInUp 0.25s ease both;
}

.suggestion-text strong { color: var(--text); font-weight: 600; }

.btn-suggestion {
  background: rgba(47,111,237,0.12);
  border: 1px solid rgba(47,111,237,0.3);
  border-radius: 6px;
  color: var(--blue);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
  min-height: 32px;
}

.btn-suggestion:hover {
  background: rgba(47,111,237,0.22);
  border-color: rgba(47,111,237,0.5);
}

/* ══════════════════════════════
   SUBMIT BUTTON
══════════════════════════════ */
.btn-submit {
  width: 100%;
  padding: 16px;
  background: var(--blue);
  color: #0a0a0a;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, transform 0.12s, box-shadow 0.2s;
  margin-top: 8px;
  letter-spacing: 0.3px;
  min-height: 52px;
  -webkit-appearance: none;
  position: relative;
  overflow: hidden;
}

.btn-submit:hover:not(:disabled) {
  background: var(--blue-light);
  box-shadow: 0 4px 20px rgba(47,111,237,0.35);
}

/* Botón de Google dentro de la app (Capacitor) — imita el estilo "filled_black
   pill" del botón web de Google para que ambas versiones se vean parecidas. */
.btn-google-nativo {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  background: #131314;
  color: #e3e3e3;
  border: 1px solid #8e918f;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-google-nativo:hover:not(:disabled) { background: #1a1a1b; }
.btn-google-nativo:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-submit:active:not(:disabled) { transform: scale(0.98); }
.btn-submit:disabled { opacity: 0.45; cursor: not-allowed; }

/* btn-loading (no "loading" a secas): esa clase genérica más abajo en este
   mismo archivo (los <p class="loading">Cargando...</p> de las listas) le
   pisaba el padding/font-size a este botón, porque con igual especificidad
   gana la regla que está más abajo en el archivo — un botón con .loading
   crecía a ~140px de alto en vez de mostrar solo el spinner. */
.btn-submit.btn-loading { color: transparent; pointer-events: none; }

.btn-submit.btn-loading::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(0,0,0,0.25);
  border-top-color: #0a0a0a;
  border-radius: 50%;
  /* Centrado con left/top + margin fijo (no con transform: translate) --
     "animation: spin" anima la propiedad transform entera, así que si el
     centrado también vivía en transform, cada vuelta la perdía a medida
     que giraba y quedaba pegando un salto al reiniciar el ciclo. Con el
     centrado afuera, transform queda libre solo para la rotación. */
  left: calc(50% - 11px);
  top: calc(50% - 11px);
  animation: spin 0.65s linear infinite;
}

/* ══════════════════════════════
   ADMIN HOME — Hero
══════════════════════════════ */
.home-hero {
  position: relative;
  overflow: hidden;
  /* Ídem .hero-banner -- public/bg.jpg nunca existió, solo generaba 404,
     y sin foto detrás el border-bottom quedaba como una raya suelta.
     .home-hero-glow (el div de abajo) tampoco lleva ya su degradé oscuro
     por lo mismo -- era para una foto que nunca estuvo. */
  background: var(--bg);
  padding: 36px 24px 32px;
  text-align: center;
}

.home-hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.home-hero-logo {
  height: 52px;
  width: auto;
  position: relative;
  animation: fadeInUp 0.5s 0.05s ease both;
}

.home-hero-sub {
  font-size: 0.72rem;
  color: var(--text-secondary);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 10px;
  position: relative;
  animation: fadeInUp 0.5s 0.15s ease both;
}

.home-hero-date {
  margin-top: 8px;
  font-size: 0.88rem;
  color: var(--blue);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: capitalize;
  position: relative;
  animation: fadeInUp 0.5s 0.25s ease both;
}

/* ══════════════════════════════
   MODULE CARDS
══════════════════════════════ */
.modules-wrap {
  padding: 20px 14px 52px;
}

.modules-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 14px;
}

.modules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.module-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1),
              border-color 0.22s,
              box-shadow 0.28s;
  animation: fadeInUp 0.4s calc(var(--i, 0) * 80ms) ease both;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
}

.module-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-blue);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(47,111,237,0.14);
}

.module-card:active { transform: scale(0.965); }

.module-blue {
  background: linear-gradient(150deg, rgba(47,111,237,0.16) 0%, var(--surface) 70%);
  border-color: var(--border-blue);
}

.module-blue:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 28px rgba(47,111,237,0.18);
}

.module-alert {
  border-color: rgba(245,158,11,0.5);
  animation: fadeInUp 0.4s calc(var(--i, 0) * 80ms) ease both, pulseAlert 2.2s ease-in-out 0.6s infinite;
}

.module-alert .module-icon-box {
  background: rgba(245,158,11,0.12);
  border-color: rgba(245,158,11,0.5);
}

.module-alert .module-stat {
  color: var(--warning);
  background: var(--warning-bg);
  border-color: rgba(245,158,11,0.35);
}

@keyframes pulseAlert {
  0%, 100% { box-shadow: 0 0 0 1px rgba(245,158,11,0.22), 0 16px 40px rgba(245,158,11,0.1); }
  50%      { box-shadow: 0 0 0 1px rgba(245,158,11,0.5),  0 16px 40px rgba(245,158,11,0.24); }
}

.module-card-body {
  padding: 24px 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  gap: 0;
}

.module-icon-box {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: rgba(47,111,237,0.1);
  border: 1.5px solid var(--border-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 14px;
  transition: transform 0.22s, box-shadow 0.22s;
  position: relative;
}

.module-icon-box::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 0%, rgba(47,111,237,0.18) 0%, transparent 70%);
  pointer-events: none;
}

.module-card:hover .module-icon-box {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 8px 24px rgba(47,111,237,0.2);
}

.module-text {
  width: 100%;
}

.module-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 6px;
  line-height: 1.2;
}

.module-blue .module-name { color: var(--blue); }

.module-desc {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 12px;
}

.module-stat {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--blue);
  background: rgba(47,111,237,0.1);
  border: 1px solid rgba(47,111,237,0.22);
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}

.module-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--blue);
  transition: background 0.18s, padding 0.18s;
}

.module-card:hover .module-footer {
  background: rgba(47,111,237,0.07);
  padding: 14px 22px;
}

.module-arrow {
  font-size: 1.3rem;
  line-height: 1;
  transition: transform 0.2s;
}

.module-card:hover .module-arrow { transform: translateX(6px); }

/* ══════════════════════════════
   MODULE VIEW top bar
══════════════════════════════ */
.module-top-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 55px;
  z-index: 40;
  animation: fadeIn 0.2s ease both;
}

.btn-back-module {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  padding: 8px 14px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, transform 0.1s;
  white-space: nowrap;
  -webkit-appearance: none;
}

.btn-back-module:hover  { color: var(--text); border-color: rgba(255,255,255,0.18); }
.btn-back-module:active { transform: scale(0.94); }

.module-top-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes moduleSlideIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

.module-slide-in { animation: moduleSlideIn 0.28s cubic-bezier(0.22,1,0.36,1) both; }

/* ══════════════════════════════
   ADMIN (general)
══════════════════════════════ */
.admin-main {
  padding: 20px 16px 48px;
  max-width: 1200px;
  margin: 0 auto;
  animation: fadeInUp 0.4s 0.1s ease both;
}

.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  animation: fadeInUp 0.4s ease both;
  transition: border-color 0.2s, transform 0.15s;
}

.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.1s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.2s; }

.stat-label {
  font-size: 0.68rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  font-weight: 600;
}

.stat-value { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--text); }
.stat-card.blue .stat-value    { color: var(--blue); }
.stat-card.success .stat-value { color: var(--success); }
.stat-card.warning .stat-value { color: var(--warning); }

.admin-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  animation: fadeInUp 0.4s 0.25s ease both;
}

.filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-group label { font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; }

.filter-group input[type="date"] {
  flex: 1;
  min-width: 140px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  -webkit-appearance: none;
  transition: border-color 0.2s;
}

.filter-group input[type="date"]:focus { outline: none; border-color: var(--blue); }

.filter-group select {
  flex: 1;
  min-width: 140px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.2s;
}

.filter-group select:focus { outline: none; border-color: var(--blue); }

.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }

.btn {
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: opacity 0.18s, transform 0.12s, box-shadow 0.18s;
  min-height: 44px;
  -webkit-appearance: none;
}

.btn:active { transform: scale(0.95); }
.btn-blue     { background: var(--blue); color: #0a0a0a; }
.btn-blue:hover { box-shadow: 0 4px 16px rgba(47,111,237,0.3); }
.btn-secondary { background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border); }
.btn-hoy       { background: rgba(47,111,237,0.1); color: var(--blue); border: 1px solid var(--border-blue); }

.citas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.cita-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.4s ease both;
}

.cita-card:active { transform: scale(0.98); }
.cita-card:hover  { border-color: rgba(47,111,237,0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.cita-card.cancelada { opacity: 0.5; }

.cita-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  transition: width 0.2s;
}

.cita-card:hover::before { width: 4px; }
.cita-card.pendiente::before  { background: var(--warning); }
.cita-card.confirmada::before { background: var(--success); }
.cita-card.cancelada::before  { background: var(--error); }

.cita-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  /* gap fijo -- con un nombre largo (p.ej. "Mercedes-Benz Clase C"),
     space-between por sí solo no deja aire: si el nombre ocupa todo el
     ancho disponible, terminaba pegado literalmente contra el precio. */
  gap: 8px;
}

.cita-card-nombre-row { display: flex; align-items: center; gap: 10px; min-width: 0; }

.cita-card-thumb {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface-2);
  flex-shrink: 0;
}

/* ── Estrellas clicables (calificar cliente/auto, reseñas) ─ */
.estrellas-input {
  display: flex;
  gap: 4px;
  font-size: 1.7rem;
  line-height: 1;
  margin-bottom: 8px;
}
.estrellas-input span {
  color: var(--border);
  cursor: pointer;
  transition: color 0.15s, transform 0.1s;
}
.estrellas-input span:hover { transform: scale(1.12); }
.estrellas-input span.activa { color: var(--blue); }

.estrellas-view { display: inline-flex; gap: 1px; font-size: 0.95rem; line-height: 1; color: var(--border); }
.estrellas-view span.activa { color: var(--blue); }

/* min-width:0 -- sin esto un nombre largo ("Mercedes-Benz Clase C") no
   envolvía y se montaba encima del precio/hora a la derecha: como item
   flex, su min-width por defecto es "auto" (su ancho sin envolver). */
.cita-nombre { font-size: 1rem; font-weight: 600; color: var(--text); min-width: 0; }
.cita-hora   { font-size: 1rem; font-weight: 700; color: var(--blue); flex-shrink: 0; }
.cita-detalle { font-size: 0.83rem; color: var(--text-secondary); line-height: 1.8; }

.estado-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 10px;
}

.estado-badge.pendiente  { background: var(--warning-bg); color: var(--warning); }
.estado-badge.confirmada { background: var(--success-bg); color: var(--success); }
.estado-badge.cancelada  { background: var(--error-bg);   color: var(--error); }

.cita-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.recordatorio-badge {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

.loading { color: var(--text-muted); text-align: center; padding: 60px 20px; grid-column: 1/-1; font-size: 0.93rem; }

/* ══════════════════════════════
   MODAL
══════════════════════════════ */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 200;
  animation: fadeIn 0.18s ease;
}

.modal.hidden { display: none; }

.modal-box {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  padding: 28px 24px 36px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--surface-2);
  color: var(--text-secondary);
  border-radius: 50%;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.modal-close:hover { color: var(--text); background: rgba(255,255,255,0.1); }

.modal-box::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 20px;
}

.modal-success-icon {
  width: 60px;
  height: 60px;
  background: var(--success-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 18px;
  animation: popIn 0.35s 0.1s ease both;
}

.modal-box h3         { font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: 6px; text-align: center; }
.modal-subtitle       { font-size: 0.85rem; color: var(--text-secondary); text-align: center; margin-bottom: 20px; }

.modal-summary {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 4px 0;
  margin-bottom: 20px;
}

.modal-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 16px;
  font-size: 0.87rem;
  border-bottom: 1px solid var(--border);
}

.modal-summary-row:last-child { border-bottom: none; }
.modal-summary-row span:first-child { color: var(--text-secondary); }
.modal-summary-row span:last-child  { color: var(--text); font-weight: 600; text-align: right; max-width: 60%; }

.admin-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.admin-modal-header h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); }

.btn-close {
  background: var(--surface-2);
  border: none;
  color: var(--text-secondary);
  font-size: 1rem;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s;
}

.btn-close:active { transform: scale(0.88); background: var(--border); }

#modalInfo {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 4px 0;
  margin-bottom: 16px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.87rem;
}

.info-row:last-child  { border-bottom: none; }
.info-label { color: var(--text-secondary); font-weight: 500; }
.info-value { color: var(--text); font-weight: 500; text-align: right; }

.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-full { grid-column: 1 / -1; }

.btn-confirmar {
  padding: 14px 16px; min-height: 50px;
  background: var(--success-bg); color: var(--success);
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: var(--radius-sm);
  font-weight: 700; font-family: inherit; font-size: 0.9rem;
  cursor: pointer; transition: background 0.18s, transform 0.1s;
  -webkit-appearance: none;
}

.btn-confirmar:active { transform: scale(0.96); background: rgba(34,197,94,0.2); }

.btn-cancelar {
  padding: 14px 16px; min-height: 50px;
  background: var(--error-bg); color: var(--error);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: var(--radius-sm);
  font-weight: 700; font-family: inherit; font-size: 0.9rem;
  cursor: pointer; transition: background 0.18s, transform 0.1s;
  -webkit-appearance: none;
}

.btn-cancelar:active { transform: scale(0.96); background: rgba(239,68,68,0.2); }

/* ══════════════════════════════
   AVISO "SIN CONEXIÓN"
══════════════════════════════ */
.offline-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 400;
  animation: fadeIn 0.25s ease;
}
.offline-overlay.hidden { display: none; }

.offline-box {
  max-width: 340px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.offline-icon {
  width: 52px;
  height: 52px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  margin-bottom: 10px;
}
.offline-box h2 { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--text); margin: 0; }
.offline-box p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; margin: 0 0 8px; }
.offline-box button {
  padding: 12px 28px;
  background: var(--blue);
  color: #0a0a0a;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
}
.offline-box button:hover { background: var(--blue-light); }

/* ══════════════════════════════
   TOASTS
══════════════════════════════ */
.toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: calc(100% - 32px);
  max-width: 380px;
}

.toast {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 18px;
  font-size: 0.9rem;
  color: var(--text);
  box-shadow: var(--shadow);
  animation: slideUpCenter 0.25s cubic-bezier(0.22,1,0.36,1);
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.toast.success { border-left: 3px solid var(--success); }
.toast.error   { border-left: 3px solid var(--error); }
.toast.info    { border-left: 3px solid var(--blue); }

/* ══════════════════════════════
   STEPS PROGRESS
══════════════════════════════ */
.steps-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  padding: 0 4px;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--border);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.2s;
}

.step-item.active .step-dot {
  background: var(--blue);
  border-color: var(--blue);
  color: #0a0a0a;
  transform: scale(1.1);
  animation: pulseBlue 1.6s ease infinite;
}

.step-item.done .step-dot {
  background: rgba(47,111,237,0.15);
  border-color: var(--blue);
  color: var(--blue);
  font-size: 0;
}

.step-item.done .step-dot::after {
  content: '✓';
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--blue);
}

.step-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.25s;
  white-space: nowrap;
}

.step-item.active .step-label { color: var(--blue); }
.step-item.done  .step-label  { color: var(--text-secondary); }

.step-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 6px;
  margin-bottom: 22px;
  border-radius: 2px;
  min-width: 20px;
  transition: background 0.3s;
}

/* ── Step panels ── */
.step-panel { display: none; }
.step-panel.active { display: block; animation: fadeInUp 0.3s ease both; }

.step-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 18px;
}

.step-nav {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.btn-back {
  flex: 0 0 auto;
  padding: 16px 20px;
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, transform 0.1s;
  min-height: 52px;
  -webkit-appearance: none;
}

.btn-back:hover  { color: var(--text); border-color: rgba(255,255,255,0.2); }
.btn-back:active { transform: scale(0.96); }

.step-next { flex: 1; }

/* Resumen summary card (step 3) */
.resumen-cita {
  background: rgba(47,111,237,0.06);
  border: 1px solid var(--border-blue);
  border-radius: var(--radius-sm);
  padding: 4px 0;
  margin-bottom: 20px;
  animation: shimmerIn 0.3s ease both;
}

.resumen-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(47,111,237,0.1);
  font-size: 0.87rem;
}

.resumen-row:last-child { border-bottom: none; }
.resumen-label { color: var(--text-secondary); font-weight: 500; }
.resumen-value { color: var(--text); font-weight: 600; text-align: right; }
.resumen-precio { color: var(--blue); }

/* Step 1 service error */
#errorServicio {
  display: none;
  margin-top: 8px;
  text-align: center;
  font-size: 0.76rem;
  color: var(--error);
}

/* ══════════════════════════════
   TAB NAVIGATION (admin)
══════════════════════════════ */
.tab-nav {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 0 12px;
  position: sticky;
  top: 55px;
  z-index: 40;
  animation: fadeIn 0.3s ease both;
  -webkit-overflow-scrolling: touch;
}

.tab-nav::-webkit-scrollbar { display: none; }

.tab-btn {
  flex: 0 0 auto;
  padding: 14px 18px;
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s;
  white-space: nowrap;
  -webkit-appearance: none;
}

.tab-btn:hover  { color: var(--text-secondary); }
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); }

.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeInUp 0.3s ease both; }

/* ══════════════════════════════
   AGENDA HOY
══════════════════════════════ */
.agenda-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.agenda-fecha {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  text-transform: capitalize;
}

.agenda-count {
  background: var(--blue);
  color: #0a0a0a;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.agenda-item {
  display: flex;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  animation: fadeInUp 0.35s ease both;
  position: relative;
  overflow: hidden;
}

.agenda-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}

.agenda-item.pendiente::before  { background: var(--warning); }
.agenda-item.confirmada::before { background: var(--success); }
.agenda-item.cancelada::before  { background: var(--error); }

.agenda-item:hover { border-color: var(--border-blue); box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.agenda-item:active { transform: scale(0.99); }

.agenda-hora {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--blue);
  min-width: 52px;
  display: flex;
  align-items: center;
}

.agenda-info { flex: 1; }
.agenda-info .agenda-nombre    { font-size: 0.97rem; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.agenda-info .agenda-servicio  { font-size: 0.82rem; color: var(--text-secondary); }
.agenda-info .agenda-telefono  { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

.agenda-vacia {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: 0.93rem;
}

.agenda-vacia .agenda-vacia-icon { font-size: 2rem; margin-bottom: 10px; opacity: 0.5; }

/* ══════════════════════════════
   MÉTRICAS
══════════════════════════════ */
.metricas-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.metrica-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  animation: fadeInUp 0.4s ease both;
}

.metrica-card-label {
  font-size: 0.68rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin-bottom: 8px;
}

.metrica-card-value { font-size: 2rem; font-weight: 700; color: var(--text); line-height: 1; }
.metrica-card.blue .metrica-card-value    { color: var(--blue); }
.metrica-card.success .metrica-card-value { color: var(--success); }

.metricas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.metrica-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  animation: fadeInUp 0.4s 0.1s ease both;
}

.panel-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 16px;
}

/* Bar chart for servicios top */
.bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.bar-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  min-width: 110px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-track {
  flex: 1;
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.22,1,0.36,1);
}

.bar-count {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  min-width: 24px;
  text-align: right;
  flex-shrink: 0;
}

/* Column chart for citas por día */
.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 100px;
  padding-top: 8px;
}

.chart-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}

.chart-bar {
  width: 100%;
  background: var(--blue);
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  opacity: 0.7;
  transition: height 0.5s cubic-bezier(0.22,1,0.36,1), opacity 0.2s;
}

.chart-bar:hover { opacity: 1; }
.chart-col-label { font-size: 0.6rem; color: var(--text-muted); text-align: center; white-space: nowrap; }
.chart-col-count { font-size: 0.68rem; color: var(--text-secondary); font-weight: 600; }

/* ══════════════════════════════
   CLIENTES
══════════════════════════════ */
.search-bar {
  margin-bottom: 14px;
}

.search-bar input {
  width: 100%;
  padding: 14px 16px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
}

.search-bar input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47,111,237,0.12);
}

.search-bar input::placeholder { color: var(--text-muted); }

.cliente-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  animation: fadeInUp 0.35s ease both;
}

.cliente-item:hover  { border-color: var(--border-blue); box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
.cliente-item:active { transform: scale(0.99); }

.cliente-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(47,111,237,0.12);
  border: 1.5px solid var(--border-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--blue);
  flex-shrink: 0;
  text-transform: uppercase;
}

.cliente-info { flex: 1; min-width: 0; }
.cliente-nombre   { font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cliente-telefono { font-size: 0.78rem; color: var(--text-secondary); }

.cliente-visitas {
  text-align: right;
  flex-shrink: 0;
}

.cliente-visitas-num {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--blue);
  line-height: 1;
}

.cliente-visitas-label {
  font-size: 0.62rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Historial de citas dentro del modal */
.historial-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.historial-row:last-child { border-bottom: none; }
.historial-fecha  { color: var(--text-secondary); font-size: 0.78rem; }
.historial-servicio { color: var(--text); font-weight: 500; }
.historial-estado { font-size: 0.7rem; }

/* ══════════════════════════════
   TABLET 600px+
══════════════════════════════ */
@media (min-width: 600px) {
  .hero-banner  { padding: 52px 40px 64px; }
  .hero-logo    { height: 76px; }
  .hero-title   { font-size: 2.5rem; }

  .form-wrap { padding: 0 28px 52px; }
  .card      { padding: 32px 28px; }

  .service-grid  { grid-template-columns: repeat(3, 1fr); }
  .auto-grid     { grid-template-columns: repeat(2, 1fr); }
  .time-grid     { grid-template-columns: repeat(5, 1fr); }

  .stats-row    { grid-template-columns: repeat(4, 1fr); }
  .admin-toolbar{ flex-direction: row; align-items: center; }
  .citas-grid   { grid-template-columns: repeat(2, 1fr); }

  .modules-grid   { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .modules-wrap   { padding: 24px 24px 56px; }
  .home-hero      { padding: 44px 40px 36px; }
  .home-hero-logo { height: 64px; }
  .module-card-body { padding: 28px 22px 18px; }
  .module-icon-box  { width: 82px; height: 82px; font-size: 2.2rem; }

  .modal        { align-items: center; padding: 24px; }
  .modal-box    { border-radius: 20px; animation: slideUpCenter 0.25s ease; max-width: 480px; }
  .modal-box::before { display: none; }
}

/* ══════════════════════════════
   DESKTOP 960px+
══════════════════════════════ */
@media (min-width: 960px) {
  .top-bar  { padding: 16px 40px; }
  .logo     { font-size: 1.5rem; }
  .logo-img { height: 30px; }

  .form-wrap  { padding: 0 40px 64px; }
  .admin-main { padding: 28px 40px 64px; }

  .time-grid    { grid-template-columns: repeat(7, 1fr); }
  .citas-grid   { grid-template-columns: repeat(3, 1fr); }
  .modules-grid   { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .modules-wrap   { padding: 28px 40px 64px; max-width: 1100px; margin: 0 auto; }
  .home-hero      { padding: 52px 40px 44px; }
  .module-card-body { padding: 32px 24px 20px; }
  .module-icon-box  { width: 88px; height: 88px; font-size: 2.4rem; }
}

/* ── Teléfono con prefijo 503 ─────────────────────────── */
.telefono-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  transition: border-color 0.2s;
}
.telefono-wrap:focus-within { border-color: var(--primary); }
.form-group.has-error .telefono-wrap { border-color: var(--danger, #e53e3e); }
.prefix-503 {
  padding: 0 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-right: 1px solid var(--border);
  background: var(--surface);
  white-space: nowrap;
  line-height: 46px;
}
.telefono-wrap input {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  flex: 1;
}
.telefono-wrap input:focus { outline: none; box-shadow: none; }

/* ── Login / registro de cliente ─────────────────────────── */
.hidden { display: none; }

.auth-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 24px;
}
.auth-tab {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 10px;
  border-radius: calc(var(--radius-sm) - 4px);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.auth-tab.active { background: var(--blue); color: #1a1408; }

.auth-panel { display: none; }
.auth-panel.active { display: block; }

.auth-switch {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 16px;
}
.auth-switch a { color: var(--blue); font-weight: 600; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

/* ── Hint doble clic paso 1 ───────────────────────────── */
.dblclick-hint {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-top: 8px;
  letter-spacing: 0.02em;
}

/* ── Checkbox de consentimiento (ubicación, términos) ───── */
.consent-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.consent-group input[type="checkbox"],
.form-group input[type="checkbox"] {
  /* accent-color solo tiñe el estado marcado -- sin marcar, la mayoría de
     navegadores igual dibujan un cuadrado blanco de sistema que desentona
     con el tema oscuro. Se reemplaza el checkbox entero a mano.
     (.form-group input[type=checkbox] -- p.ej. #toggleAccesoCompartido y
     #usuarioActivo en el panel admin -- también necesita quedar afuera de
     la regla genérica ".form-group input" de más arriba, que le metía
     padding/fondo de campo de texto y lo dejaba como un rectángulo oscuro
     sin ninguna marca visible de marcado/desmarcado.) */
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-top: 2px;
  background: var(--surface);
  border: 1.5px solid var(--border-blue);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.consent-group input[type="checkbox"]:checked,
.form-group input[type="checkbox"]:checked {
  background: var(--blue);
  border-color: var(--blue);
}
.consent-group input[type="checkbox"]:checked::after,
.form-group input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #0a0a0a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.consent-group input[type="checkbox"]:focus-visible,
.form-group input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.consent-group label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
  cursor: pointer;
}
.consent-group label a { color: var(--blue); font-weight: 600; text-decoration: none; }
.consent-group label a:hover { text-decoration: underline; }
.consent-group.has-error { border-color: var(--error); animation: shake 0.35s ease; }
.consent-group.has-error .input-error { display: block; }

/* ── Página de términos y condiciones ───────────────────── */
.terms-card { max-width: 720px; }
.terms-card h2 { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 24px 0 8px; }
.terms-card h2:first-child { margin-top: 0; }
.terms-card p { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 10px; }
.terms-card ul { margin: 0 0 10px 20px; padding: 0; }
.terms-card li { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 6px; }
.terms-notice {
  background: rgba(230, 168, 46, 0.1);
  border: 1px solid var(--blue);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 0.78rem;
  color: var(--text);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* ══════════════════════════════
   TEMA CLARO/OSCURO (toggle flotante)
══════════════════════════════ */
/* El botón vive como hijo de <html> (hermano de <body>, ver bnToggle.js),
   no adentro -- así no depende de ningún selector de tema para mantener
   sus propios colores fijos sin importar cuál de los dos temas esté
   activo. El cambio de tema en sí es instantáneo: agregar una transición
   global de color a "*" pisaría las transiciones propias que ya tiene
   cada botón/tarjeta para sus hovers, así que el único movimiento
   animado acá es el del ícono mismo al tocarlo. */
.bn-toggle-btn {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 50px;
  height: 50px;
  min-height: 0;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 150;
  padding: 0;
  background: var(--surface-2);
  /* Anillo dorado sutil por fuera (para que no se pierda contra fondos
     oscuros o claros) en vez de un borde grueso. */
  box-shadow: 0 0 0 1.5px var(--border-blue), 0 4px 16px rgba(0,0,0,0.5);
  transition: transform 0.15s ease, box-shadow 0.2s, background 0.2s;
}
.bn-toggle-btn:hover  { box-shadow: 0 0 0 1.5px var(--blue), 0 6px 22px rgba(0,0,0,0.6); }
.bn-toggle-btn:active { transform: scale(0.9); }

/* Sol cuando el tema oscuro está activo (invita a pasar a claro), luna
   creciente cuando ya está en claro (invita a volver a oscuro) -- los dos
   íconos viven superpuestos en el mismo lugar y se cruzan con opacidad +
   escala, nunca los dos visibles a la vez. */
.bn-toggle-btn svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 24px;
  height: 24px;
  stroke: var(--blue);
  stroke-width: 1.6;
  transition: opacity 0.35s, transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.bn-toggle-btn .bn-sol  { fill: none; opacity: 1; transform: scale(1) rotate(0deg); }
.bn-toggle-btn .bn-luna { fill: var(--blue); opacity: 0; transform: scale(0.6) rotate(45deg); }
.bn-toggle-btn.bn-activo .bn-sol  { opacity: 0; transform: scale(0.6) rotate(-45deg); }
.bn-toggle-btn.bn-activo .bn-luna { opacity: 1; transform: scale(1) rotate(0deg); }

@media (max-width: 480px) {
  .bn-toggle-btn { bottom: 16px; right: 16px; width: 44px; height: 44px; }
}