/**
 * Widget Agenda Citas
 * File: assets/css/wac-widget.css
 * Version: v2.2.1
 * Mobile-first — base: 320px+
 */

/* ── Variables ──────────────────────────────────────────────────────────── */
.wac-widget {
  --wac-primary:      #2d6a4f;
  --wac-primary-d:    #1b4332;
  --wac-primary-l:    #d8f3dc;
  --wac-accent:       #40916c;
  --wac-bg:           #ffffff;
  --wac-bg-soft:      #f8fafb;
  --wac-border:       #e2e8f0;
  --wac-text:         #1a202c;
  --wac-text-muted:   #718096;
  --wac-radius:       14px;
  --wac-radius-sm:    8px;
  --wac-shadow:       0 4px 24px rgba(0,0,0,.09);
  --wac-shadow-h:     0 8px 32px rgba(45,106,79,.18);
  --wac-t:            all .2s ease;
  --wac-font:         -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  /* Color de botones — por defecto hereda el color principal */
  --wac-btn-bg:       var(--wac-primary);
  --wac-btn-hover:    var(--wac-primary-d);
  --wac-btn-text:     #ffffff;
}

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

/* ── Contenedor ──────────────────────────────────────────────────────────── */
.wac-widget {
  font-family: var(--wac-font);
  color: var(--wac-text);
  background: var(--wac-bg);
  border-radius: var(--wac-radius);
  box-shadow: var(--wac-shadow);
  padding: 20px 16px;          /* mobile-first: padding compacto */
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.wac-header { text-align:center; margin-bottom:24px; }
.wac-title  { font-size:1.4rem; font-weight:700; color:var(--wac-primary-d); line-height:1.2; }
.wac-subtitle { margin-top:6px; font-size:.85rem; color:var(--wac-text-muted); line-height:1.5; }

/* ── Barra de pasos ──────────────────────────────────────────────────────── */
.wac-steps-bar { display:flex; align-items:center; justify-content:center; margin-bottom:28px; }
.wac-step      { display:flex; flex-direction:column; align-items:center; gap:3px; }
.wac-step-num  {
  width:30px; height:30px; border-radius:50%;
  background:var(--wac-border); color:var(--wac-text-muted);
  font-size:.8rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  transition:var(--wac-t);
}
.wac-step-label { font-size:.65rem; color:var(--wac-text-muted); white-space:nowrap; }
.wac-step.wac-step-active .wac-step-num  { background:var(--wac-primary); color:#fff; box-shadow:0 0 0 4px var(--wac-primary-l); }
.wac-step.wac-step-active .wac-step-label { color:var(--wac-primary); font-weight:600; }
.wac-step.wac-step-done  .wac-step-num  { background:var(--wac-accent); color:#fff; }
.wac-step-connector { height:2px; width:28px; background:var(--wac-border); margin:0 2px; margin-bottom:16px; transition:background .3s; }
.wac-step-connector.done { background:var(--wac-accent); }

/* ── Mensajes ────────────────────────────────────────────────────────────── */
.wac-messages { border-radius:var(--wac-radius-sm); padding:12px 16px; margin-bottom:16px; font-size:.85rem; line-height:1.5; }
.wac-messages.is-error   { background:#fff5f5; border:1px solid #fed7d7; color:#c53030; }
.wac-messages.is-success { background:#f0fff4; border:1px solid #c6f6d5; color:#276749; }

/* ── Título de panel ─────────────────────────────────────────────────────── */
.wac-panel-title { font-size:1rem; font-weight:700; color:var(--wac-text); margin-bottom:16px; }

/* ── Grid de servicios (1 col mobile, 2 col tablet+) ─────────────────────── */
.wac-services-grid {
  display:grid;
  grid-template-columns:1fr;    /* mobile: 1 columna */
  gap:10px;
  margin-bottom:20px;
}

.wac-service-card {
  background:var(--wac-bg-soft);
  border:2px solid var(--wac-border);
  border-radius:var(--wac-radius);
  padding:14px 16px;
  cursor:pointer;
  transition:var(--wac-t);
  display:flex;
  flex-direction:column;
  gap:4px;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  position:relative;
}
/* Touch ripple visual */
.wac-service-card:active { transform:scale(.98); }
.wac-service-card:hover  { border-color:var(--wac-accent); box-shadow:var(--wac-shadow-h); }
.wac-service-card.is-selected { border-color:var(--wac-primary); background:var(--wac-primary-l); box-shadow:var(--wac-shadow-h); }

.wac-service-title  { font-size:.9rem; font-weight:700; color:var(--wac-text); }
.wac-service-desc   { font-size:.75rem; color:var(--wac-text-muted); line-height:1.4; }
.wac-service-price  { font-size:1rem; font-weight:800; color:var(--wac-primary); margin-top:4px; }
.wac-service-dur    { font-size:.72rem; color:var(--wac-text-muted); }
.wac-service-card.is-selected .wac-service-title { color:var(--wac-primary-d); }
.wac-service-card.is-selected .wac-service-price { color:var(--wac-primary-d); }

/* Check mark */
.wac-service-card::after {
  content:''; display:none; position:absolute; top:12px; right:12px;
  width:20px; height:20px; border-radius:50%;
  background:var(--wac-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M7.7 13.4L4.3 10l-1.4 1.4 4.8 4.8 10.4-10.4-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;
}
.wac-service-card.is-selected::after { display:block; }

/* ── Loading ─────────────────────────────────────────────────────────────── */
.wac-loading-msg { display:flex; align-items:center; gap:10px; color:var(--wac-text-muted); font-size:.85rem; padding:12px 0; }
.wac-spinner {
  display:inline-block; width:18px; height:18px;
  border:2px solid var(--wac-border); border-top-color:var(--wac-primary);
  border-radius:50%; animation:wac-spin .7s linear infinite; flex-shrink:0;
}
@keyframes wac-spin { to { transform:rotate(360deg); } }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.wac-field  { margin-bottom:14px; }
.wac-label  { display:block; font-size:.82rem; font-weight:600; color:var(--wac-text); margin-bottom:5px; }
.wac-required { color:#e53e3e; }
.wac-optional { color:var(--wac-text-muted); font-weight:400; font-size:.75rem; }
.wac-input  {
  width:100%; padding:12px 14px;
  border:1.5px solid var(--wac-border);
  border-radius:var(--wac-radius-sm);
  font-size:1rem;            /* 16px — evita zoom automático en iOS */
  color:var(--wac-text); background:#fff;
  transition:border-color .2s, box-shadow .2s;
  font-family:var(--wac-font);
  -webkit-appearance:none;
}
.wac-input:focus { outline:none; border-color:var(--wac-primary); box-shadow:0 0 0 3px var(--wac-primary-l); }
.wac-textarea { resize:vertical; min-height:70px; }

/* ── Slots de hora ───────────────────────────────────────────────────────── */
.wac-slots-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);   /* mobile: 4 columnas */
  gap:7px; margin-top:6px;
}
.wac-widget .wac-slot {
  padding:10px 4px !important; border:1.5px solid var(--wac-border) !important;
  border-radius:var(--wac-radius-sm) !important; text-align:center !important;
  font-size:.82rem !important; font-weight:600 !important;
  cursor:pointer !important; background:#fff !important; transition:var(--wac-t) !important;
  user-select:none; -webkit-tap-highlight-color:transparent;
  min-height:44px !important; display:flex !important; align-items:center !important; justify-content:center !important;
  color:var(--wac-text) !important; box-shadow:none !important;
}
.wac-widget .wac-slot:hover:not(.wac-slot-unavailable) { border-color:var(--wac-primary) !important; background:var(--wac-primary-l) !important; color:var(--wac-primary-d) !important; }
.wac-widget .wac-slot.is-selected { background:var(--wac-primary) !important; border-color:var(--wac-primary) !important; color:#fff !important; }
.wac-widget .wac-slot-unavailable { background:var(--wac-bg-soft) !important; color:var(--wac-border) !important; border-color:var(--wac-border) !important; cursor:not-allowed !important; text-decoration:line-through !important; }

/* ── Resumen ─────────────────────────────────────────────────────────────── */
.wac-summary-card { background:var(--wac-bg-soft); border:1px solid var(--wac-border); border-radius:var(--wac-radius); padding:16px; margin-bottom:20px; }
.wac-summary-row  { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--wac-border); gap:10px; }
.wac-summary-row:last-child { border-bottom:none; }
.wac-summary-label { font-size:.78rem; color:var(--wac-text-muted); flex-shrink:0; }
.wac-summary-value { font-size:.88rem; font-weight:600; color:var(--wac-text); text-align:right; word-break:break-all; }
.wac-price-hl      { color:var(--wac-primary); font-size:.95rem; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.wac-panel-actions { display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.wac-widget .wac-button {
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:6px !important;
  padding:14px 20px !important;
  border-radius:var(--wac-radius-sm) !important;
  font-size:.9rem !important; font-weight:600 !important; font-family:var(--wac-font) !important;
  cursor:pointer !important; border:none !important; transition:var(--wac-t) !important;
  text-decoration:none !important; line-height:1 !important;
  min-height:48px !important;
  -webkit-tap-highlight-color:transparent !important;
  box-shadow:none !important;
}
.wac-widget .wac-button-primary   { background:var(--wac-btn-bg) !important; color:var(--wac-btn-text) !important; width:100%; border:none !important; }
.wac-widget .wac-button-primary:hover  { background:var(--wac-btn-hover) !important; }
.wac-widget .wac-button-primary:active { transform:scale(.98); }
.wac-widget .wac-button-secondary { background:var(--wac-bg-soft) !important; color:var(--wac-text-muted) !important; border:1.5px solid var(--wac-border) !important; width:100%; }
.wac-widget .wac-button-secondary:hover { background:var(--wac-border) !important; color:var(--wac-text) !important; }
.wac-widget .wac-button:disabled  { opacity:.6 !important; cursor:not-allowed !important; }

/* ── Panel de éxito ──────────────────────────────────────────────────────── */
.wac-panel-success { text-align:center; padding:20px 0; }
.wac-success-icon  { font-size:3rem; margin-bottom:10px; }
.wac-success-title { font-size:1.3rem; font-weight:700; color:var(--wac-primary-d); margin-bottom:8px; }
.wac-success-text  { color:var(--wac-text-muted); margin-bottom:20px; font-size:.9rem; line-height:1.6; }
.wac-gc-link       { display:block; margin-bottom:10px; }

/* ── Status badges (admin) ───────────────────────────────────────────────── */
.wac-status-badge     { display:inline-block; padding:2px 10px; border-radius:999px; font-size:.72rem; font-weight:600; text-transform:capitalize; }
.wac-status-pending   { background:#fef3c7; color:#92400e; }
.wac-status-confirmed { background:#d1fae5; color:#065f46; }
.wac-status-cancelled { background:#fee2e2; color:#991b1b; }
.wac-status-completed { background:#e0e7ff; color:#3730a3; }
.wac-status-no_show   { background:#f3f4f6; color:#374151; }

/* ── Tablet: 520px+ ──────────────────────────────────────────────────────── */
@media (min-width:520px) {
  .wac-widget         { padding:28px 28px; }
  .wac-title          { font-size:1.6rem; }
  /* ── Tabs de categorías ───────────────────────────────────────────────────── */
.wac-cat-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 2px 0;
  -webkit-overflow-scrolling: touch;
}
/* Móvil: scroll horizontal si no caben todas las tabs */
@media (max-width: 480px) {
  .wac-cat-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .wac-cat-tabs::-webkit-scrollbar { display: none; }
  .wac-cat-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }
}
.wac-cat-tab {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--wac-border);
  background: var(--wac-bg-soft);
  color: var(--wac-text-muted);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--wac-font);
  transition: all .18s;
}
.wac-cat-tab:hover { border-color: var(--wac-primary); color: var(--wac-primary); }
/* Tab activo — debe tener MAYOR especificidad que .wac-widget .wac-cat-tab */
.wac-widget .wac-cat-tab.wac-cat-tab-on {
  background: var(--wac-primary) !important;
  border-color: var(--wac-primary) !important;
  color: #fff !important;
}

.wac-widget .wac-cat-tab {
  padding: 8px 18px;
  border-radius: 999px;
  border: 2px solid var(--wac-primary);
  background: transparent;
  color: var(--wac-primary);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.wac-cat-tab:hover {
  background: var(--wac-primary);
  color: #fff;
}
.wac-cat-tab-on, .wac-cat-tab.wac-cat-tab-on {
  background: var(--wac-primary) !important;
  color: #fff !important;
  border-color: var(--wac-primary) !important;
}
.wac-widget .wac-cat-tab:hover {
  border-color: var(--wac-primary) !important;
  color: var(--wac-primary) !important;
}

.wac-services-grid  { grid-template-columns:1fr 1fr; }
  .wac-slots-grid     { grid-template-columns:repeat(5,1fr); }
  .wac-panel-actions  { flex-direction:row; justify-content:flex-end; }
  .wac-button         { width:auto; }
  .wac-button-primary { width:auto; }
  .wac-button-secondary { width:auto; }
  .wac-step-connector { width:40px; }
}

/* ── Desktop: 680px+ ─────────────────────────────────────────────────────── */
@media (min-width:680px) {
  .wac-widget        { padding:36px 40px; }
  .wac-services-grid { grid-template-columns:repeat(3,1fr); }
  .wac-slots-grid    { grid-template-columns:repeat(6,1fr); }
}