/* ═══════════════════════════════════════════════════════════════════
   settings-hub.css — Kit de componentes premium (F0, 2026-07-03)
   Plan "Agenda Premium y Configurable".
   ═══════════════════════════════════════════════════════════════════

   REGLAS:
   - Namespace propio (.mad-* / .hub-* / .premium-*): CERO colisión con
     las ~8,700 líneas de style.css. Nada aquí re-estiliza elementos
     existentes — los componentes son opt-in por clase.
   - Theme-aware vía tokens --mad-c-* (voltean solos en theme-night) y
     los tokens F0 de colors_and_type.css (--mad-space-*, --mad-dur-*,
     --mad-ease-*, --mad-focus-ring).
   - Todo motion envuelto en @media (prefers-reduced-motion: no-preference).
   - Consumidores: Hub de Ajustes (F1), wizard de perfil (F4), candados
     premium (F5A), polish global (F6).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Lista agrupada estilo iOS (inset grouped) ─────────────────────
   <div class="mad-list-group">
     <div class="mad-list-title">MI CLÍNICA</div>
     <div class="mad-list">
       <button class="mad-row"> … </button>
     </div>
   </div> */
.mad-list-group {
  margin: var(--mad-space-4) var(--mad-space-4) 0;
}
.mad-list-title {
  font-size: var(--mad-fs-sm);
  font-weight: var(--mad-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--mad-tracking-pill);
  color: var(--mad-c-muted);
  padding: 0 var(--mad-space-3) var(--mad-space-2);
}
.mad-list {
  background: var(--mad-c-surface);
  border: 1px solid var(--mad-c-border);
  border-radius: var(--mad-radius-lg);
  overflow: hidden;
}

/* ── Fila (icono en caja + label + valor + chevron) ───────────────── */
.mad-row {
  display: flex;
  align-items: center;
  gap: var(--mad-space-3);
  width: 100%;
  min-height: 52px;                 /* touch target holgado */
  padding: var(--mad-space-2) var(--mad-space-4);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--mad-c-border);
  font: inherit;
  color: var(--mad-c-text);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mad-row:last-child { border-bottom: none; }
.mad-row:focus-visible {
  outline: none;
  box-shadow: inset var(--mad-focus-ring);
}
.mad-row[aria-current="true"],
.mad-row.active {
  background: var(--mad-c-info-bg);
}
@media (prefers-reduced-motion: no-preference) {
  .mad-row { transition: background var(--mad-dur-1) var(--mad-ease-out); }
}
.mad-row:hover { background: var(--mad-c-surface-2); }
.mad-row:active { background: var(--mad-c-surface-3); }

/* Icono en contenedor redondeado con tint (patrón iOS Settings).
   Variantes de tint por grupo temático. */
.mad-row-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: var(--mad-radius-sm);
  background: var(--mad-c-surface-3);
}
.mad-row-icon.tint-blue   { background: var(--mad-c-info-bg); }
.mad-row-icon.tint-green  { background: var(--mad-c-ok-bg); }
.mad-row-icon.tint-amber  { background: var(--mad-c-warn-bg); }
.mad-row-icon.tint-red    { background: var(--mad-c-danger-bg); }
.mad-row-icon.tint-violet { background: rgba(139, 92, 246, .12); }

.mad-row-body { flex: 1; min-width: 0; }
.mad-row-label {
  font-size: var(--mad-fs-base);
  font-weight: var(--mad-fw-medium);
  color: var(--mad-c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mad-row-sub {
  font-size: var(--mad-fs-sm);
  color: var(--mad-c-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Valor/estado a la derecha ("Conectado", "3 sillones", "Equipo") */
.mad-row-value {
  flex-shrink: 0;
  font-size: var(--mad-fs-md);
  color: var(--mad-c-muted);
  display: flex;
  align-items: center;
  gap: var(--mad-space-2);
}
.mad-row-value .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mad-c-faint);
}
.mad-row-value .dot.on  { background: var(--mad-success); }
.mad-row-value .dot.off { background: var(--mad-c-faint); }

.mad-chevron {
  flex-shrink: 0;
  color: var(--mad-c-faint);
  font-size: var(--mad-fs-lg);
  line-height: 1;
}

/* ── Switch (toggle iOS con spring) ────────────────────────────────
   <button class="mad-switch" role="switch" aria-checked="true"></button> */
.mad-switch {
  --sw-w: 46px;
  --sw-h: 28px;
  flex-shrink: 0;
  position: relative;
  width: var(--sw-w);
  height: var(--sw-h);
  border: none;
  border-radius: var(--mad-radius-pill);
  background: var(--mad-c-border-2);
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.mad-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(var(--sw-h) - 4px);
  height: calc(var(--sw-h) - 4px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.mad-switch[aria-checked="true"] {
  background: var(--mad-success);
}
.mad-switch[aria-checked="true"]::after {
  left: calc(var(--sw-w) - var(--sw-h) + 2px);
}
.mad-switch:focus-visible {
  outline: none;
  box-shadow: var(--mad-focus-ring);
}
.mad-switch[disabled] { opacity: .5; cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .mad-switch { transition: background var(--mad-dur-2) var(--mad-ease-out); }
  .mad-switch::after { transition: left var(--mad-dur-2) var(--mad-ease-spring); }
}

/* ── Skeleton (shimmer de carga, estilo Linear) ───────────────────── */
.mad-skeleton {
  border-radius: var(--mad-radius-sm);
  background: var(--mad-c-surface-3);
  min-height: 14px;
  position: relative;
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .mad-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent,
                rgba(255, 255, 255, .35), transparent);
    animation: mad-shimmer 1.4s var(--mad-ease-out) infinite;
  }
  html.theme-night .mad-skeleton::after {
    background: linear-gradient(90deg, transparent,
                rgba(255, 255, 255, .08), transparent);
  }
}
@keyframes mad-shimmer {
  to { transform: translateX(100%); }
}

/* ── Estado vacío con acción (Things 3 / Notion) ───────────────────
   <div class="mad-empty">
     <div class="mad-empty-icon">🦷</div>
     <div class="mad-empty-title">Aún no tienes visitadores</div>
     <div class="mad-empty-sub">Los especialistas externos que…</div>
     <button class="btn btn-primary">＋ Registrar el primero</button>
   </div> */
.mad-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mad-space-2);
  text-align: center;
  padding: var(--mad-space-8) var(--mad-space-5);
  color: var(--mad-c-muted);
}
.mad-empty-icon { font-size: 2.2rem; opacity: .85; }
.mad-empty-title {
  font-size: var(--mad-fs-lg);
  font-weight: var(--mad-fw-bold);
  color: var(--mad-c-text);
}
.mad-empty-sub {
  font-size: var(--mad-fs-md);
  max-width: 340px;
  line-height: 1.45;
}
.mad-empty > .btn { margin-top: var(--mad-space-3); }

/* ── Candado premium (F5A lo consume; definido aquí para el kit) ───
   En fila: <span class="premium-badge">🔒 Premium</span>
   En detalle: <div class="premium-lock"> preview + beneficios + CTA </div> */
.premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--mad-fs-xs);
  font-weight: var(--mad-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--mad-tracking-cap);
  padding: 2px 8px;
  border-radius: var(--mad-radius-pill);
  color: #92400e;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #fcd34d;
}
html.theme-night .premium-badge {
  color: #fcd34d;
  background: rgba(120, 53, 15, .35);
  border-color: #92400e;
}
.premium-lock-preview {
  position: relative;
  border-radius: var(--mad-radius-lg);
  overflow: hidden;
}
.premium-lock-preview > * {
  opacity: .45;
  filter: saturate(.6);
  pointer-events: none;
  user-select: none;
}
.premium-lock-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mad-space-3);
  text-align: center;
  padding: var(--mad-space-6) var(--mad-space-5);
}

/* ═══════════════════════════════════════════════════════════════════
   F1 — Hub de Ajustes (#pageSettingsHub) · 2026-07-03
   Layout master-detail (desktop) / push navigation (móvil) del hub.
   Solo vive tras el flag settings_hub_v2: con flag OFF la sección está
   display:none y nada de esto pinta.
   ═══════════════════════════════════════════════════════════════════ */

/* Acento de marca (F-B): settings-hub.js lo setea inline desde
   clinics.brand_color (+ variante -soft con alfa hex). Estos son los
   fallbacks cuando no hay brand_color válido. SOLO uso decorativo —
   el texto siempre va en --mad-c-* (contraste garantizado en 4 temas). */
#pageSettingsHub {
  --hub-accent: var(--mad-primary);
  --hub-accent-soft: var(--mad-c-info-bg);
}

#pageSettingsHub .hub-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ── Hero de clínica (F-B): logo + nombre arriba de la lista ─────────────── */
.hub-hero {
  display: flex;
  align-items: center;
  gap: var(--mad-space-3);
  margin: var(--mad-space-4) var(--mad-space-4) 0;
  padding: var(--mad-space-4);
  border: 1px solid var(--mad-c-border);
  border-radius: var(--mad-radius-lg);
  background:
    linear-gradient(135deg, var(--hub-accent-soft), transparent 65%),
    var(--mad-c-surface);
  box-shadow: var(--mad-shadow-row);
}
.hub-hero-logo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--mad-radius-md);
  border: 1px solid var(--mad-c-border);
  background: var(--mad-c-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hub-hero-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hub-hero-logo span {
  font-weight: var(--mad-fw-bold);
  font-size: 1.35rem;
  color: var(--hub-accent);
}
.hub-hero-body { flex: 1; min-width: 0; }
.hub-hero-name {
  font-size: var(--mad-fs-lg);
  font-weight: var(--mad-fw-bold);
  color: var(--mad-c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-hero-sub {
  font-size: var(--mad-fs-sm);
  color: var(--mad-c-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-master {
  width: 320px;
  flex-shrink: 0;
  overflow-y: auto;
  /* F-A1: scroll con inercia en iOS + sin encadenar el scroll al body
     (la lista es larga en el cel; sin esto el gesto se "atora"). */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-right: 1px solid var(--mad-c-border);
  background: var(--mad-c-surface-2);
  padding-bottom: var(--mad-space-8);
}
.hub-detail {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.hub-detail-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Búsqueda instantánea (SETTINGS_INDEX cliente) */
.hub-search-wrap {
  padding: var(--mad-space-4) var(--mad-space-4) 0;
}
/* Con ID para ganarle a la regla global de temas de style.css
   (html:is(.theme-night,.theme-day) input → background blanco, spec 0,2,1). */
#pageSettingsHub .hub-search {
  width: 100%;
  min-height: 40px;
  padding: var(--mad-space-2) var(--mad-space-3);
  border: 1px solid var(--mad-c-border);
  border-radius: var(--mad-radius-md);
  background: var(--mad-c-surface);
  color: var(--mad-c-text);
  font: inherit;
  font-size: var(--mad-fs-base);
}
.hub-search:focus-visible {
  outline: none;
  box-shadow: var(--mad-focus-ring);
}
.hub-search::placeholder { color: var(--mad-c-faint); }

/* Botón atrás (solo móvil en vista detalle; JS controla el inline display) */
.hub-back-btn {
  background: none;
  border: none;
  color: var(--mad-c-info, #0077b6);
  font: inherit;
  font-size: var(--mad-fs-lg);
  font-weight: var(--mad-fw-medium);
  cursor: pointer;
  padding: var(--mad-space-2) var(--mad-space-3);
  min-height: 44px;
  min-width: 44px;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 769px) {
  .hub-back-btn { display: none !important; } /* desktop: master-detail, sin atrás */
}

/* ── Página vieja embebida (#pageClinicSettings dentro de #hubDetailBody) ──
   Se mueve ENTERA para que sus selectores internos sigan resolviendo.
   Aquí solo se neutraliza su chrome de página independiente. */
.hub-embedded { flex: 1; }
.hub-embedded > .page-header { display: none !important; }   /* header duplicado */
.hub-embedded #clinicAdminTabs { display: none !important; } /* la lista maestra ES la navegación */
/* El aviso Tier 3 "mejor en pantalla grande" (mobile.css ::before sobre
   #pageClinicSettings) no aplica dentro del hub: el hub ES la vista móvil. */
#pageClinicSettings.hub-embedded::before { display: none !important; }

/* ── Foco de tarjetas del tab "clinica" (data-hub-focus) ───────────────────
   Oculta las tarjetas que NO pertenecen al detalle abierto. Las tarjetas
   enfocadas NO se fuerzan a mostrarse: su visibilidad la sigue gobernando
   initClinicSettings (.clinic-only-card con/sin clínica elegida). */
.hub-embedded[data-hub-focus="personal"] .clinic-settings-grid > .settings-card:not(#cardPersonalLogo):not(#cardMeFiscal),
.hub-embedded[data-hub-focus="clinica"] .clinic-settings-grid > .settings-card:not(#cardClinicLogo):not(#cardClinicData),
.hub-embedded[data-hub-focus="fiscal-clinica"] .clinic-settings-grid > .settings-card:not(#cardClinicFiscal),
.hub-embedded[data-hub-focus="sillones"] .clinic-settings-grid > .settings-card:not(#cardUnits),
.hub-embedded[data-hub-focus="gcal"] .clinic-settings-grid > .settings-card:not(#gcalCard),
.hub-embedded[data-hub-focus="wabot"] .clinic-settings-grid > .settings-card:not(#waBotCard) {
  display: none !important;
}
/* Selector de clínica / registrar clínica / hint: solo en detalles de clínica */
.hub-embedded[data-hub-focus="personal"] #clinicSelectorWrap,
.hub-embedded[data-hub-focus="personal"] #onboardClinicWrap,
.hub-embedded[data-hub-focus="personal"] #clinicPickHint,
.hub-embedded[data-hub-focus="gcal"] #clinicSelectorWrap,
.hub-embedded[data-hub-focus="gcal"] #onboardClinicWrap,
.hub-embedded[data-hub-focus="gcal"] #clinicPickHint,
.hub-embedded[data-hub-focus="wabot"] #clinicSelectorWrap,
.hub-embedded[data-hub-focus="wabot"] #onboardClinicWrap,
.hub-embedded[data-hub-focus="wabot"] #clinicPickHint {
  display: none !important;
}
/* El subtítulo "Personaliza el logo…" solo tiene sentido en Datos y logo */
.hub-embedded[data-hub-focus]:not([data-hub-focus="clinica"]) #clinicTabClinica > .page-subtitle {
  display: none !important;
}

/* ── Móvil: lista full-screen ↔ detalle push (#/ajustes/<id>) ─────────────── */
@media (max-width: 768px) {
  .hub-master {
    width: 100%;
    border-right: none;
    background: transparent;
  }
  .hub-detail { display: none; }
  #pageSettingsHub.hub-view-detail .hub-master { display: none; }
  #pageSettingsHub.hub-view-detail .hub-detail { display: flex; }
  @media (prefers-reduced-motion: no-preference) {
    #pageSettingsHub.hub-view-detail .hub-detail {
      animation: hub-push-in var(--mad-dur-2) var(--mad-ease-out);
    }
  }
}
@keyframes hub-push-in {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── F-B: profundidad y acento en la lista (dentro del hub solamente) ─────
   background-image se compone ENCIMA del background-color de cada tint
   (declaración posterior a los .tint-* → gana para la propiedad image). */
#hubList .mad-list,
.hub-hero {
  box-shadow: var(--mad-shadow-row);
}
#hubList .mad-row-icon {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%);
  box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .14);
}
#hubList .mad-row:hover .mad-row-icon {
  box-shadow: inset 0 0 0 1px var(--hub-accent-soft), 0 1px 3px rgba(0, 0, 0, .08);
}
/* Fila activa: barra de acento + fondo de marca (desktop master-detail) */
#hubList .mad-row.active,
#hubList .mad-row[aria-current="true"] {
  background: var(--hub-accent-soft);
  box-shadow: inset 3px 0 0 var(--hub-accent);
}
/* Dot "on" hereda el acento (estados ● Conectado) */
#hubList .mad-row-value .dot.on { background: var(--hub-accent); }