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

/*
  Hoja de estilos para la zona de cliente (Inicio, Mis Datos, Mis Citas,
  Mis Pedidos y el resto de páginas públicas a medida que se normalizan).
  Reutiliza los mismos tokens de color que ya existen en Dashboard.css
  (panel admin) para que ambos lados del sitio compartan un mismo lenguaje
  visual. Clases prefijadas con "cl-" para no pisar nada de Dashboard.css
  si algún día conviven en la misma página. Los nombres sin prefijo
  (.faq-item, .faq-question, etc.) siguen la convención ya usada por el
  JS existente en las páginas públicas.
*/

:root {
  --glamour-deep: #0d0612;
  --glamour-dark: #130a1e;
  --glamour-mid: #1e0f2e;
  --glamour-accent: #c8006e;
  --glamour-rose: #e8005a;
  --glamour-pink: #ff3d8b;
  --glamour-soft: #ff7ab8;
  --glamour-purple: #9b30c8;
  --glamour-lilac: #c87afa;
  --glamour-gold: #f0c060;
  --glamour-glass: rgba(255,255,255,0.04);
  --glamour-glass-border: rgba(255,255,255,0.08);
  --glamour-glow: rgba(200,0,110,0.25);
}

/* ── Botones ── */
.cl-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 22px; border-radius: 40px;
  font-size: 13px; font-weight: 600; font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.02em; text-decoration: none; border: none;
  cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
}
.cl-btn:focus-visible { outline: 2px solid var(--glamour-soft); outline-offset: 2px; }
.cl-btn-primary { background: linear-gradient(135deg, var(--glamour-accent), var(--glamour-purple)); color: white; box-shadow: 0 4px 16px rgba(200,0,110,0.4); }
.cl-btn-primary:hover { background: linear-gradient(135deg, var(--glamour-rose), #b040e0); box-shadow: 0 6px 24px rgba(200,0,110,0.55); transform: translateY(-2px); }
.cl-btn-ghost { background: rgba(255,255,255,0.08); color: white; border: 1px solid rgba(255,255,255,0.15); }
.cl-btn-ghost:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.25); transform: translateY(-1px); }
.cl-btn-cancel { background: transparent; color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.15); }
.cl-btn-cancel:hover { background: rgba(255,255,255,0.06); color: white; }
.cl-btn:disabled { opacity: 0.6; cursor: default; transform: none !important; }

/* ── Estados ── */
.cl-status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; padding: 5px 13px; border-radius: 20px;
  letter-spacing: 0.03em; text-transform: uppercase; font-family: 'DM Sans', sans-serif;
}
.cl-status-confirmada   { background: rgba(74,222,128,0.12); color: #4ade80; border: 1px solid rgba(74,222,128,0.25); }
.cl-status-sinconfirmar { background: rgba(148,163,184,0.12); color: #94a3b8; border: 1px solid rgba(148,163,184,0.25); }
.cl-status-cancelada    { background: rgba(248,113,113,0.12); color: #f87171; border: 1px solid rgba(248,113,113,0.25); }
.cl-status-pendiente    { background: rgba(148,163,184,0.12); color: #94a3b8; border: 1px solid rgba(148,163,184,0.25); }
.cl-status-enproceso    { background: rgba(96,165,250,0.15); color: #60a5fa; border: 1px solid rgba(96,165,250,0.3); }
.cl-status-enviado      { background: rgba(240,192,96,0.15); color: var(--glamour-gold); border: 1px solid rgba(240,192,96,0.3); }
.cl-status-entregado    { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.3); }

/* ── Tabla escritorio ── */
.cl-table-scroll { overflow-x: auto; border-radius: 20px; }
.cl-table { width: 100%; min-width: 680px; border-collapse: collapse; background: rgba(20,8,32,0.95); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; overflow: hidden; font-family: 'DM Sans', sans-serif; }
.cl-table thead tr { background: rgba(200,0,110,0.12); border-bottom: 1px solid rgba(200,0,110,0.2); }
.cl-table th { padding: 14px 18px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: white; white-space: nowrap; }
.cl-table th.num, .cl-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cl-table th.center, .cl-table td.center { text-align: center; }
.cl-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.06); transition: background 0.15s ease; }
.cl-table tbody tr:last-child { border-bottom: none; }
.cl-table tbody tr:hover { background: rgba(200,0,110,0.07); }
.cl-table td { padding: 15px 18px; font-size: 14px; color: white; vertical-align: middle; }
.cl-cell-primary { font-weight: 600; }
.cl-cell-sub { display: block; font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; }

.cl-btn-detail {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px;
  background: linear-gradient(135deg, var(--glamour-accent), var(--glamour-purple)); color: white;
  font-size: 12px; font-weight: 600; cursor: pointer; border: none; font-family: 'DM Sans', sans-serif;
  box-shadow: 0 3px 10px rgba(200,0,110,0.3); transition: all 0.2s ease;
}
.cl-btn-detail:hover { background: linear-gradient(135deg, var(--glamour-rose), #b040e0); box-shadow: 0 5px 16px rgba(200,0,110,0.5); transform: translateY(-1px); }
.cl-btn-detail:focus-visible { outline: 2px solid var(--glamour-soft); outline-offset: 2px; }

/* ── Tarjetas móvil ── */
.cl-cards-grid { display: grid; gap: 14px; }
.cl-phone-card { position: relative; overflow: hidden; background: rgba(20,8,32,0.95); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 18px 18px 18px 22px; font-family: 'DM Sans', sans-serif; }
.cl-phone-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--glamour-accent), var(--glamour-purple)); }
.cl-phone-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.cl-phone-card-title { font-size: 16px; font-weight: 700; margin: 0; color: white; }
.cl-phone-card-body { display: grid; gap: 8px; margin-bottom: 14px; }
.cl-field-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.cl-field-label { color: rgba(255,255,255,0.5); font-weight: 500; }
.cl-field-value { color: white; font-weight: 500; text-align: right; }

/* ── Buscador ── */
.cl-search-wrap { position: relative; max-width: 420px; }
.cl-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.6); pointer-events: none; }
.cl-search-input {
  width: 100%; padding: 12px 16px 12px 44px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px; color: white; font-size: 14px; font-family: 'DM Sans', sans-serif; outline: none;
  transition: all 0.2s ease; box-sizing: border-box;
}
.cl-search-input::placeholder { color: rgba(255,255,255,0.45); }
.cl-search-input:focus { border-color: rgba(200,0,110,0.5); background: rgba(200,0,110,0.08); box-shadow: 0 0 0 3px rgba(200,0,110,0.12); }

/* ── Formulario ── */
.cl-form-card { background: rgba(15,5,25,0.7); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 28px; }
.cl-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 6px; }
.cl-field { display: flex; flex-direction: column; gap: 6px; }
.cl-field.full { grid-column: 1 / -1; }
.cl-field label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.7); font-family: 'DM Sans', sans-serif; }
.cl-field input {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 10px;
  padding: 11px 14px; color: white; font-size: 14px; font-family: 'DM Sans', sans-serif; outline: none;
  transition: all 0.2s ease; width: 100%; box-sizing: border-box;
}
.cl-field input:focus { border-color: rgba(200,0,110,0.5); background: rgba(200,0,110,0.06); box-shadow: 0 0 0 3px rgba(200,0,110,0.12); }
.cl-field input::placeholder { color: rgba(255,255,255,0.35); }
.cl-form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 12px; }

/* ── Estado vacío ── */
.cl-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 20px; text-align: center; gap: 12px; background: rgba(20,8,32,0.6); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; }
.cl-empty-state-icon { width: 64px; height: 64px; border-radius: 18px; background: rgba(200,0,110,0.12); border: 1px solid rgba(200,0,110,0.2); display: flex; align-items: center; justify-content: center; }
.cl-empty-state h3 { font-size: 17px; font-weight: 600; margin: 0; color: white; font-family: 'DM Sans', sans-serif; }
.cl-empty-state p { font-size: 13px; color: rgba(255,255,255,0.55); margin: 0; font-family: 'DM Sans', sans-serif; }

/* ── Modal (patrón único, compartido entre citas y pedidos) ── */
.cl-modal-overlay { position: fixed; inset: 0; z-index: 200; align-items: flex-start; justify-content: center; background: rgba(5,2,8,0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 6vh 16px; overflow-y: auto; }
.cl-modal-overlay.hidden { display: none; }
.cl-modal-overlay:not(.hidden) { display: flex; }
.cl-modal-card { width: 100%; max-width: 600px; background: rgba(19,10,30,0.98); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); overflow: hidden; font-family: 'DM Sans', sans-serif; }
.cl-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.cl-modal-head h2 { margin: 0; font-weight: 600; font-size: 20px; color: white; }
.cl-modal-close { background: transparent; border: none; color: rgba(255,255,255,0.6); cursor: pointer; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.cl-modal-close:hover { background: rgba(255,255,255,0.08); color: white; }
.cl-modal-body { padding: 20px 22px 24px; display: grid; gap: 14px; max-height: 70vh; overflow-y: auto; }
.cl-modal-group { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 14px 16px; }
.cl-modal-group h4 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--glamour-soft); font-weight: 700; }
.cl-modal-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 3px 0; }
.cl-modal-row span:first-child { color: rgba(255,255,255,0.55); }
.cl-modal-row span:last-child { font-weight: 500; text-align: right; }
.cl-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cl-amount-box { background: rgba(255,255,255,0.04); border-radius: 12px; padding: 10px; text-align: center; }
.cl-amount-box .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); display: block; margin-bottom: 4px; }
.cl-amount-box .v { font-size: 15px; font-weight: 700; color: var(--glamour-soft); font-variant-numeric: tabular-nums; }
.cl-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid rgba(255,255,255,0.08); }
.cl-product-row { display: flex; gap: 12px; align-items: center; background: rgba(255,255,255,0.04); border-radius: 12px; padding: 10px 12px; }
.cl-product-row img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.cl-product-row .info { flex: 1; min-width: 0; }
.cl-product-row .name { font-weight: 500; font-size: 13px; }
.cl-product-row .meta { font-size: 12px; color: rgba(255,255,255,0.55); }
.cl-product-row .subtotal { font-weight: 700; color: var(--glamour-soft); font-size: 13px; font-variant-numeric: tabular-nums; }

@media (min-width: 640px) { .cl-cards-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
@media (max-width: 640px) { .cl-form-grid { grid-template-columns: 1fr; } .cl-amounts { grid-template-columns: 1fr; } }

/* ── Tarjeta genérica (marcas, servicios destacados, productos, etc.) ── */
.cl-card {
  background: rgba(20,8,32,0.75);
  border: 1px solid rgba(200,0,110,0.35);
  border-radius: 20px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.3s ease;
}
.cl-card:hover { border-color: rgba(200,0,110,0.55); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
/* Modificador: tarjetas contenedoras (formularios, paneles) que no deben "levantarse" al pasar el mouse */
.cl-card.cl-card-static:hover { transform: none; box-shadow: none; border-color: rgba(200,0,110,0.35); }

/* ── Badge de oferta (único, reemplaza las variantes ad-hoc por página) ── */
.cl-badge-oferta {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 20px; color: white;
  background: linear-gradient(135deg, var(--glamour-accent), var(--glamour-purple));
  box-shadow: 0 3px 10px rgba(200,0,110,0.35);
  font-family: 'DM Sans', sans-serif;
}

/* ── Chips (etiqueta/CTA pequeño sobre una tarjeta) ── */
.cl-chip {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 5px 16px; border-radius: 20px; color: white;
  background: linear-gradient(135deg, var(--glamour-accent), var(--glamour-purple));
  transition: transform 0.2s ease; font-family: 'DM Sans', sans-serif;
}
.cl-chip-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 20px;
  color: white; background: rgba(255,255,255,0.1); transition: all 0.2s ease;
  font-family: 'DM Sans', sans-serif; text-decoration: none;
}
.cl-chip-ghost:hover { background: rgba(200,0,110,0.3); }

/* ── Botón circular con ícono (carrito, etc.) ── */
.cl-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: linear-gradient(135deg, var(--glamour-accent), var(--glamour-purple));
  box-shadow: 0 4px 14px rgba(200,0,110,0.4); transition: transform 0.2s ease; border: none; cursor: pointer;
}
.cl-icon-btn:hover { transform: scale(1.08); }

/* ── Botón de flecha del carrusel (sin fondo) ── */
.cl-carousel-nav {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer; opacity: 0.85;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.cl-carousel-nav:hover { opacity: 1; transform: scale(1.1); }

/* ── Acordeón FAQ (usa los nombres de clase que ya espera el JS existente) ── */
.faq-item {
  border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; overflow: hidden;
  background: rgba(20,8,32,0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.2s ease;
}
.faq-item:hover { border-color: rgba(200,0,110,0.3); }
.faq-question {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 18px 20px; color: white; font-weight: 600; text-align: left;
  background: transparent; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif;
  transition: background 0.2s ease; font-size: 15px;
}
.faq-question:hover { background: rgba(255,255,255,0.05); }
.faq-icon { color: var(--glamour-soft); font-size: 20px; flex-shrink: 0; transition: transform 0.3s ease; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; padding: 0 20px; color: rgba(255,255,255,0.65); font-size: 14px; line-height: 1.65; }
.faq-answer > div { padding-bottom: 18px; }

/* ── Pill de filtro (catálogos, listados) ── */
.cl-filter-pill {
  display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 20px;
  font-size: 13px; color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.06);
  transition: all 0.2s ease; text-decoration: none; font-family: 'DM Sans', sans-serif;
}
.cl-filter-pill:hover { background: rgba(200,0,110,0.18); color: white; }
.cl-filter-pill.active { background: linear-gradient(135deg, var(--glamour-accent), var(--glamour-purple)); color: white; }

/* ── Fila de producto en el carrito ── */
.cl-cart-row { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.cl-cart-row:last-child { border-bottom: none; }
.cl-cart-row-top { display: flex; gap: 14px; align-items: flex-start; }
.cl-cart-row img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.cl-cart-row .info { flex: 1; min-width: 0; }
.cl-cart-row .name { font-weight: 600; font-size: 14px; color: white; }
.cl-cart-row .price { font-size: 13px; color: rgba(255,255,255,0.55); margin-top: 2px; }
.cl-cart-row .subtotal { font-weight: 700; color: var(--glamour-soft); font-size: 14px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.cl-cart-row-bottom { margin-top: 10px; padding-left: 78px; }
.cl-qty { display: inline-flex; align-items: center; gap: 8px; }
.cl-qty button { width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: white; cursor: pointer; font-weight: 700; font-family: 'DM Sans', sans-serif; flex-shrink: 0; }
.cl-qty button:hover { background: rgba(200,0,110,0.2); }
.cl-qty span { min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; font-size: 13px; }
.cl-cart-remove { background: transparent; border: none; color: rgba(255,255,255,0.4); cursor: pointer; padding: 4px; flex-shrink: 0; }
.cl-cart-remove:hover { color: #f87171; }
.cl-cart-row .brand { font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 1px; }
.cl-cart-discount { position: absolute; top: 0; left: 0; padding: 2px 8px; font-size: 11px; font-weight: 700; color: white; background: linear-gradient(135deg, var(--glamour-accent), var(--glamour-purple)); border-radius: 0 0 10px 0; z-index: 10; font-family: 'DM Sans', sans-serif; }
.cl-qty button:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Agendar: stepper (reutiliza los mismos nombres que ya usa Agendar.js) ── */
.step { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.step .circle { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 14px; color: rgba(255,255,255,0.5); transition: all 0.3s ease; }
.step .label { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.4); transition: color 0.3s; }
.step.active .circle { background: linear-gradient(135deg, var(--glamour-accent), var(--glamour-purple)); border-color: transparent; color: white; box-shadow: 0 0 20px rgba(200,0,110,0.5); }
.step.active .label { color: var(--glamour-soft); }
.step.completed .circle { background: rgba(200,0,110,0.3); border-color: rgba(200,0,110,0.5); color: var(--glamour-soft); }
.step.completed .label { color: rgba(200,0,110,0.7); }

/* ── Agendar: caja de info del servicio elegido ── */
.cl-info-box { background: rgba(200,0,110,0.1); border: 1px solid rgba(200,0,110,0.25); border-radius: 12px; padding: 12px 16px; margin-top: 12px; font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--glamour-soft); line-height: 1.7; }

/* ── Agendar/Carrito: tarjeta seleccionable (sucursal, forma de pago) ── */
.cl-select-card { background: rgba(255,255,255,0.04); border: 2px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 16px; text-align: center; cursor: pointer; transition: all 0.2s ease; }
.cl-select-card:hover { border-color: rgba(200,0,110,0.3); background: rgba(200,0,110,0.06); }
.cl-select-card.selected { border-color: var(--glamour-accent); background: rgba(200,0,110,0.12); box-shadow: 0 0 16px rgba(200,0,110,0.2); }
.cl-select-card.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.cl-select-card-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 4px; font-family: 'DM Sans', sans-serif; }
.cl-select-card-title { font-size: 14px; font-weight: 600; color: white; margin-bottom: 4px; font-family: 'DM Sans', sans-serif; }
.cl-select-card-sub { font-size: 12px; color: rgba(255,255,255,0.55); font-family: 'DM Sans', sans-serif; }

/* ── Agendar: lista de profesionales ── */
#profesionales-container { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 10px; }
.cl-pro-btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin-bottom: 6px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: white; font-family: 'DM Sans', sans-serif; font-size: 13px; cursor: pointer; transition: all 0.2s ease; }
.cl-pro-btn:hover { background: rgba(200,0,110,0.1); border-color: rgba(200,0,110,0.25); }
.cl-pro-btn img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cl-pro-btn.selected { background: linear-gradient(135deg, var(--glamour-accent), var(--glamour-purple)); border-color: transparent; box-shadow: 0 3px 12px rgba(200,0,110,0.35); }

/* ── Agendar: calendario y horas ── */
#custom-calendar, #custom-time { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; }
.cl-cal-title { grid-column: 1 / -1; text-align: center; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 15px; color: white; margin-bottom: 4px; }
.cl-cal-weekday { text-align: center; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 11px; color: rgba(255,255,255,0.4); text-transform: uppercase; }
.cl-cal-nav { padding: 5px 12px; border-radius: 8px; background: linear-gradient(135deg, var(--glamour-accent), var(--glamour-purple)); color: white; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; }
.cl-cal-nav:hover:not(:disabled) { filter: brightness(1.15); }
.cl-cal-nav:disabled { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.3); cursor: not-allowed; }
.cl-cal-day, .cl-time-slot { font-family: 'DM Sans', sans-serif; border: none; transition: all 0.2s ease; }
.cl-cal-day-disabled, .cl-cal-day-off, .cl-time-slot-disabled { background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.25); cursor: not-allowed; }
.cl-cal-day-off { text-decoration: line-through; }
.cl-cal-day-available, .cl-time-slot-available { background: rgba(200,0,110,0.12); color: var(--glamour-soft); cursor: pointer; }
.cl-cal-day-available:hover, .cl-time-slot-available:hover { background: rgba(200,0,110,0.22); }
.cl-cal-day-selected, .cl-time-slot-selected { background: linear-gradient(135deg, var(--glamour-accent), var(--glamour-purple)); color: white; }

/* ── Agendar: sin horas disponibles ── */
.cl-sobrecupo-box { text-align: center; padding: 20px; background: rgba(200,0,110,0.08); border: 1px solid rgba(200,0,110,0.2); border-radius: 16px; margin-top: 20px; }
.cl-sobrecupo-box p { font-family: 'DM Sans', sans-serif; font-size: 14px; color: rgba(255,255,255,0.7); margin-bottom: 12px; }

/* ── Scrollbar fina (reemplaza Agendar.css / el bloque duplicado en Carrito.html) ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.25); border-radius: 999px; }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.25) transparent; }

/* Los botones cl-btn fijan su propio "display", así que si además llevan la clase
   utilitaria "hidden" (mostrar/ocultar por JS) esta debe ganar — pero solo en ese
   caso puntual, sin tocar el "hidden" general que se usa para mostrar/ocultar según
   el tamaño de pantalla (hidden md:block, lg:hidden, etc.) en el resto del sitio. */
.cl-btn.hidden { display: none !important; }