/* ═══════════════════════════════════════════════
   Studio for Princesses · Estilos globales
   Paleta: morado oscuro · neon pink · lavanda
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ── Variables ── */
:root {
  --bg-primary:   #190E1B;   /* fondo principal */
  --bg-secondary: #3A1F45;   /* tarjetas / paneles */
  --brand:        #542451;   /* tono medio de marca */
  --brand-light:  #A05E97;   /* hover / estados activos */
  --primary:      #9A368A;   /* botones principales */
  --secondary:    #E0A5D3;   /* lavanda claro */
  --accent:       #FF7EDB;   /* neon pink - máximo contraste */
  --text:         #D7D1D6;   /* texto principal */
  --text-muted:   #A4A1A4;   /* texto secundario */
  --border:       #542451;   /* bordes — color de marca para contraste */
  --radio:        14px;
  --sombra:       0 4px 24px rgba(84, 36, 81, 0.35);
  --sombra-hover: 0 8px 36px rgba(255, 126, 219, 0.28);
  --trans:        0.25s ease;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--bg-primary);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}
img { max-width: 100%; }
a { color: var(--accent); text-decoration: none; }

/* ── Tipografía ── */
h1, h2, h3, h4 {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.25;
}

/* ═══════════════════════════ HERO ═══════════════════════════ */
.hero {
  background: linear-gradient(145deg, #190E1B 0%, #2D1638 50%, #3A1F45 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 2.5rem 2rem;
  min-height: 260px;
}
.hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,126,219,.12) 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -50px; left: -50px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154,54,138,.18) 0%, transparent 70%);
  pointer-events: none;
}

/* Imagen del hero */
.hero-img-wrap {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.hero-img {
  width: clamp(130px, 22vw, 220px);
  height: clamp(130px, 22vw, 220px);
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 6px rgba(255,126,219,.15), 0 8px 32px rgba(0,0,0,.4);
  display: block;
}

/* Contenido del hero */
.hero-content {
  text-align: left;
  position: relative;
  z-index: 1;
}
.hero-badge {
  display: inline-block;
  background: rgba(255,126,219,.12);
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 0.75rem;
  border: 1px solid rgba(255,126,219,.3);
}
.hero h1 {
  font-size: clamp(1.6rem, 5vw, 2.8rem);
  color: var(--text);
  margin-bottom: 0.4rem;
  line-height: 1.15;
}
.hero h1 span { color: var(--accent); }
.hero p {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 0;
  font-style: italic;
}
.hero-logo {
  width: clamp(160px, 28vw, 280px);
  height: auto;
  border-radius: 12px;
  display: block;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 4px 16px rgba(255,126,219,.25));
}

/* Mobile: apila vertical */
@media (max-width: 600px) {
  .hero {
    flex-direction: column;
    text-align: center;
    padding: 2rem 1.25rem;
    gap: 1.25rem;
    min-height: unset;
  }
  .hero-content { text-align: center; }
  .hero-img {
    width: 110px;
    height: 110px;
  }
}

/* ═══════════════════════════ CATÁLOGO ═══════════════════════════ */
.catalogo-section { padding: 2rem 1rem 4rem; }

.busqueda-container {
  position: relative;
  max-width: 480px;
  margin: 0 auto 1.5rem;
}
.busqueda-container input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.8rem;
  border: 2px solid var(--border);
  border-radius: 50px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg-secondary);
  outline: none;
  transition: border-color var(--trans);
}
.busqueda-container input::placeholder { color: var(--text-muted); }
.busqueda-container input:focus { border-color: var(--primary); }
.busqueda-container .icon-busqueda {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--text-muted);
}

/* Filtros de categoría */
.filtros-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 1.75rem;
  scrollbar-width: none;
}
.filtros-scroll::-webkit-scrollbar { display: none; }
.btn-filtro {
  flex-shrink: 0;
  padding: 6px 18px;
  border: 2px solid var(--border);
  border-radius: 50px;
  background: transparent;
  color: var(--text-muted);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--trans);
  white-space: nowrap;
}
.btn-filtro:hover,
.btn-filtro.activo {
  background: var(--accent);
  border-color: var(--accent);
  color: #190E1B;
}

/* Grid de servicios */
.servicios-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 540px) {
  .servicios-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .servicios-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Tarjeta de servicio */
.servicio-card {
  background: var(--bg-secondary);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
}
.servicio-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
  border-color: var(--accent);
}
.servicio-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.badge-categoria {
  display: inline-block;
  background: rgba(255,126,219,.12);
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 0.6rem;
  align-self: flex-start;
  border: 1px solid rgba(255,126,219,.25);
}
.servicio-nombre {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
  font-family: 'Montserrat', sans-serif;
}
.servicio-descripcion {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  line-height: 1.5;
  flex: 1;
}
.servicio-tecnica {
  font-size: 12px;
  color: var(--secondary);
  margin-bottom: 0.75rem;
}
.servicio-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.servicio-meta { display: flex; flex-direction: column; gap: 2px; }
.precio {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--secondary);
  font-family: 'Montserrat', sans-serif;
}
.duracion {
  font-size: 12px;
  color: var(--text-muted);
}

/* Botón principal */
.btn-agendar {
  background: var(--accent);
  color: #190E1B;
  border: none;
  border-radius: 50px;
  padding: 8px 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--trans), transform var(--trans);
}
.btn-agendar:hover {
  background: var(--secondary);
  transform: scale(1.03);
}

/* Estado vacío */
.estado-vacio {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  grid-column: 1 / -1;
}
.estado-vacio .icono { font-size: 2.5rem; margin-bottom: 0.5rem; }

/* ═══════════════════════════ MODAL ═══════════════════════════ */
.modal-content {
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-secondary);
}
.modal-header {
  background: linear-gradient(135deg, #2D1638, #3A1F45);
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 1.5rem;
}
.modal-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  color: var(--text);
}
.modal-body { padding: 1.5rem; background: var(--bg-secondary); }
.btn-close { filter: invert(1) brightness(0.7); }

/* Steps */
.steps-indicador {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-bottom: 1.75rem;
}
.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  position: relative;
}
.step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(50% + 16px);
  right: calc(-50% + 16px);
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.step-item.completado:not(:last-child)::after { background: var(--primary); }
.step-circulo {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: all var(--trans);
  position: relative;
}
.step-item.activo .step-circulo {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.step-item.completado .step-circulo {
  border-color: var(--primary);
  background: rgba(154,54,138,.25);
  color: var(--secondary);
}
.step-label {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}
.step-item.activo .step-label { color: var(--accent); font-weight: 600; }

/* Paso contenido */
.paso-contenido { display: none; }
.paso-contenido.activo { display: block; }

/* Resumen del servicio */
.resumen-servicio-mini {
  background: var(--bg-primary);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--border);
}
.resumen-servicio-mini .srv-nombre {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: var(--text);
}
.resumen-servicio-mini .srv-meta { font-size: 12px; color: var(--text-muted); }
.resumen-servicio-mini .srv-precio {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--secondary);
  font-family: 'Montserrat', sans-serif;
}

/* Input de fecha */
.label-campo {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.campo-fecha input[type="date"] {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg-primary);
  outline: none;
  transition: border-color var(--trans);
  cursor: pointer;
  color-scheme: dark;
}
.campo-fecha input[type="date"]:focus { border-color: var(--primary); }

/* Slots de horario */
.slots-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 0.75rem;
  margin-top: 1.25rem;
}
.slots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (min-width: 400px) {
  .slots-grid { grid-template-columns: repeat(4, 1fr); }
}
.slot-tiempo {
  padding: 8px 4px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg-primary);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--trans);
  text-align: center;
}
.slot-tiempo:hover {
  border-color: var(--primary);
  color: var(--secondary);
}
.slot-tiempo.seleccionado {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.slots-cargando, .slots-vacio {
  text-align: center;
  padding: 1.5rem;
  color: var(--text-muted);
  font-size: 13px;
  grid-column: 1 / -1;
}

/* Formulario de datos */
.form-grupo { margin-bottom: 1rem; }
.form-grupo label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}
.form-grupo input,
.form-grupo textarea {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg-primary);
  outline: none;
  transition: border-color var(--trans);
  resize: vertical;
}
.form-grupo input::placeholder,
.form-grupo textarea::placeholder { color: var(--text-muted); }
.form-grupo input:focus,
.form-grupo textarea:focus { border-color: var(--primary); }
.form-grupo textarea { min-height: 80px; }

/* Resumen final antes de confirmar */
.resumen-final {
  background: var(--bg-primary);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border);
}
.resumen-final-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
  color: var(--text-muted);
}
.resumen-final-row strong { color: var(--text); }
.resumen-final-row.total {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--secondary);
}

/* Botones de navegación */
.modal-nav {
  display: flex;
  gap: 10px;
  margin-top: 1.25rem;
}
.btn-secundario {
  flex: 1;
  padding: 0.75rem;
  border: 2px solid var(--border);
  border-radius: 50px;
  background: transparent;
  color: var(--text-muted);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--trans);
}
.btn-secundario:hover { border-color: var(--primary); color: var(--secondary); }
.btn-primario {
  flex: 2;
  padding: 0.75rem;
  border: none;
  border-radius: 50px;
  background: var(--primary);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--trans), transform var(--trans);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primario:hover:not(:disabled) {
  background: var(--brand-light);
  transform: scale(1.02);
}
.btn-primario:disabled { opacity: 0.65; cursor: not-allowed; }

/* Pantalla de éxito */
.exito-container {
  text-align: center;
  padding: 1.5rem 0;
}
.exito-icono { font-size: 4rem; margin-bottom: 1rem; }
.exito-titulo {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.4rem;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.exito-subtitulo { font-size: 14px; color: var(--text-muted); margin-bottom: 1.5rem; }
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 12px 28px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--trans);
}
.btn-wa:hover { opacity: 0.9; }
.btn-wa-icon { font-size: 20px; }

/* ═══════════════════════════ FOOTER ═══════════════════════════ */
footer {
  background: linear-gradient(135deg, #0F0812, #190E1B);
  color: var(--text-muted);
  text-align: center;
  padding: 2rem 1rem;
  font-size: 13px;
  border-top: 1px solid var(--border);
}
footer h3 {
  font-family: 'Montserrat', sans-serif;
  color: var(--text);
  margin-bottom: 0.25rem;
}
footer .footer-dorado { color: var(--accent); }

/* ═══════════════════════════ ADMIN ═══════════════════════════ */

/* Panel admin - layout general */
body.admin-body {
  background: var(--bg-primary);
  font-size: 14px;
}
.admin-sidebar {
  background: linear-gradient(180deg, #0F0812 0%, #190E1B 100%);
  min-height: 100vh;
  padding: 0;
  border-right: 1px solid var(--border);
}
.sidebar-brand {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-brand h5 {
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  font-size: 1rem;
  margin: 0;
}
.sidebar-brand small { color: var(--accent); font-size: 11px; }
.sidebar-nav { padding: 1rem 0; }
.sidebar-nav .nav-link {
  color: var(--text-muted);
  padding: 10px 1.5rem;
  font-size: 13.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all var(--trans);
  border-left: 3px solid transparent;
}
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.activo {
  color: var(--accent);
  background: rgba(255,126,219,.08);
  border-left-color: var(--accent);
}
.sidebar-nav .nav-link .nav-icon { font-size: 16px; width: 20px; text-align: center; }

/* Admin - header superior */
.admin-topbar {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  padding: 0.875rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.admin-topbar h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  color: var(--text);
  margin: 0;
}
.btn-logout {
  background: none;
  border: 2px solid var(--border);
  border-radius: 50px;
  padding: 5px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--trans);
}
.btn-logout:hover { border-color: var(--primary); color: var(--secondary); }

/* Secciones admin */
.seccion-admin { padding: 1.5rem; display: none; }
.seccion-admin.activa { display: block; }
.seccion-titulo {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3rem;
  color: var(--text);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Tabla admin */
.tabla-admin {
  background: var(--bg-secondary);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
  border: 1px solid var(--border);
}
.tabla-admin table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.tabla-admin th {
  background: var(--bg-primary);
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.tabla-admin td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
}
.tabla-admin tr:last-child td { border-bottom: none; }
.tabla-admin tr:hover td { background: rgba(84,36,81,.25); }

/* Badges de estado */
.badge-estado {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge-pendiente  { background: rgba(133,100,4,.25);  color: #F0D060; }
.badge-confirmada { background: rgba(12,84,96,.25);   color: #5FD0E0; }
.badge-finalizada { background: rgba(21,87,36,.25);   color: #6FD08F; }
.badge-cancelada  { background: rgba(114,28,36,.25);  color: #F08090; }

/* Filtros admin */
.filtros-admin {
  background: var(--bg-secondary);
  border-radius: var(--radio);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--sombra);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid var(--border);
}
.filtros-admin input,
.filtros-admin select {
  padding: 7px 12px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-primary);
  outline: none;
  transition: border-color var(--trans);
  color-scheme: dark;
}
.filtros-admin input::placeholder { color: var(--text-muted); }
.filtros-admin input:focus,
.filtros-admin select:focus { border-color: var(--primary); }

/* Botones admin */
.btn-admin {
  padding: 7px 16px;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--trans);
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-admin-primario { background: var(--accent); color: #190E1B; font-weight: 700; }
.btn-admin-primario:hover { background: var(--secondary); color: #190E1B; }
.btn-admin-secundario { background: var(--bg-primary); color: var(--text-muted); border: 1px solid var(--border); }
.btn-admin-secundario:hover { border-color: var(--primary); color: var(--secondary); }
.btn-admin-danger { background: rgba(114,28,36,.25); color: #F08090; border: 1px solid rgba(240,128,144,.2); }
.btn-admin-danger:hover { background: rgba(114,28,36,.45); }
.btn-admin-sm { padding: 4px 10px; font-size: 12px; }

/* Formularios en modal */
.form-label-admin {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.form-control-admin {
  width: 100%;
  padding: 8px 12px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color var(--trans);
  background: var(--bg-primary);
}
.form-control-admin::placeholder { color: var(--text-muted); }
.form-control-admin:focus { border-color: var(--primary); }

/* Horarios */
.horario-dia {
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border: 1px solid var(--border);
}
.horario-dia-nombre {
  font-weight: 600;
  min-width: 90px;
  font-size: 14px;
  color: var(--text);
}
.horario-dia input[type="time"] {
  padding: 6px 10px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  color: var(--text);
  background: var(--bg-primary);
  outline: none;
  color-scheme: dark;
}
.horario-dia input[type="time"]:focus { border-color: var(--primary); }

/* Login page */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #0F0812 0%, #190E1B 50%, #2D1638 100%);
}
.login-card {
  background: var(--bg-secondary);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 60px rgba(154,54,138,0.25);
  text-align: center;
  border: 1px solid var(--border);
}
.login-logo {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  color: var(--text);
  margin-bottom: 0.25rem;
}
.login-logo span { color: var(--accent); }
.login-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.alerta-error {
  background: rgba(114,28,36,.25);
  color: #F08090;
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
  margin-bottom: 1rem;
  display: none;
  border: 1px solid rgba(240,128,144,.2);
}

/* Toast */
.toast-custom {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  z-index: 9999;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s;
  pointer-events: none;
}
.toast-custom.visible { opacity: 1; transform: translateY(0); }
.toast-ok    { background: #3A7D44; }
.toast-error { background: #B71C1C; }

/* Responsive admin */
@media (max-width: 767px) {
  .seccion-admin { padding: 1rem; }
  .tabla-admin { overflow-x: auto; }
  .tabla-admin table { min-width: 600px; }
  .admin-topbar { padding: 0.75rem 1rem; }
}

/* ═══════════════════════════ FECHA PICKER ═══════════════════════════ */
.fecha-picker-wrap {
  position: relative;
}
.fecha-picker-wrap .fecha-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  pointer-events: none;
  z-index: 1;
}
.fecha-picker-wrap input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.8rem;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg-primary);
  outline: none;
  cursor: pointer;
  transition: border-color var(--trans);
}
.fecha-picker-wrap input::placeholder { color: var(--text-muted); }
.fecha-picker-wrap input:focus { border-color: var(--primary); }

/* ── Flatpickr paleta oscura ── */
.flatpickr-calendar {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: var(--sombra-hover) !important;
  font-family: 'Montserrat', sans-serif !important;
}
.flatpickr-months,
.flatpickr-months .flatpickr-month {
  background: var(--bg-secondary) !important;
  color: var(--text) !important;
  fill: var(--text) !important;
}
.flatpickr-current-month {
  color: var(--text) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: var(--bg-secondary) !important;
  color: var(--text) !important;
}
.flatpickr-current-month input.cur-year {
  color: var(--text) !important;
  font-weight: 600 !important;
}
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: var(--text-muted) !important; }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: var(--accent) !important; }

.flatpickr-weekdays { background: transparent !important; }
span.flatpickr-weekday {
  background: transparent !important;
  color: var(--text-muted) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}
.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-days { background: transparent !important; border: none !important; }

/* Días — NO sobreescribir width/height para no romper la cuadrícula */
.flatpickr-day {
  color: var(--text) !important;
  border-radius: 8px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  border-color: transparent !important;
}
.flatpickr-day:hover:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay) {
  background: var(--brand) !important;
  color: #fff !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #190E1B !important;
  font-weight: 700 !important;
}
.flatpickr-day.today {
  border-color: var(--primary) !important;
  color: var(--secondary) !important;
  font-weight: 700 !important;
}
.flatpickr-day.today:hover {
  background: var(--primary) !important;
  color: #fff !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: var(--border) !important;
  background: transparent !important;
  cursor: not-allowed !important;
  opacity: 0.3 !important;
  text-decoration: line-through !important;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--border) !important;
  opacity: 0.35 !important;
}
.numInputWrapper:hover { background: transparent !important; }
.numInputWrapper span { border-color: var(--border) !important; }

/* ── Responsive general ── */
@media (max-width: 480px) {
  .modal-dialog { margin: 0.5rem; }
  .modal-content { border-radius: 14px; }
  .slots-grid { grid-template-columns: repeat(3, 1fr); }
  .modal-nav { flex-direction: column; }
  .modal-nav .btn-secundario,
  .modal-nav .btn-primario { flex: unset; width: 100%; justify-content: center; }
  .resumen-servicio-mini { flex-direction: column; gap: 4px; text-align: center; }
  .servicio-footer { flex-wrap: wrap; gap: 8px; }
  .btn-agendar { width: 100%; text-align: center; justify-content: center; }
}