/* ============================================================
   COMPONENTS.CSS — Tarjetas, Badges, Botones, Tablas, Modals
   Centir · Centro de Psicología · Dashboard
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   STAT CARDS (resumen estadístico)
   ════════════════════════════════════════════════════════════ */
.stat-cards-row {
  display: grid;
  /* En mobile: 1 columna. En tablet+: múltiples con mínimo 200px */
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@media (min-width: 600px) {
  .stat-cards-row {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-8);
  }
}

.stat-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  transition: var(--ease);
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.stat-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-card-icon svg {
  width: 22px; height: 22px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.stat-card-icon.teal    { background: var(--primary-lighter); color: var(--primary-dark); }
.stat-card-icon.purple  { background: var(--secondary-lighter); color: var(--secondary-dark); }
.stat-card-icon.rose    { background: var(--accent-rose-light); color: #9c4a58; }
.stat-card-icon.sage    { background: var(--accent-sage-light); color: #3d7a3a; }

.stat-card-content { flex: 1; min-width: 0; }

.stat-card-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: var(--space-1);
}

.stat-card-value {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}

.stat-card-sub {
  font-size: 0.75rem;
  color: var(--text-light);
  margin-top: var(--space-1);
}

.stat-card-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-full);
}

.stat-card-trend.up   { background: var(--success-light); color: #3d7a3a; }
.stat-card-trend.down { background: var(--danger-light); color: #9c4a58; }

/* ════════════════════════════════════════════════════════════
   PSICÓLOGA CARDS
   ════════════════════════════════════════════════════════════ */
.psicologa-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--ease-slow);
  display: flex;
  flex-direction: column;
}

.psicologa-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: var(--primary-light);
}

.psicologa-card-top {
  padding: var(--space-6) var(--space-6) var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.psicologa-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}

.psicologa-avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-md);
}

.psicologa-avatar-fallback {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  font-weight: 700;
  color: white;
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
}

.status-dot {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--success);
  border: 2px solid var(--surface);
}

.psicologa-card-info { flex: 1; min-width: 0; }

.psicologa-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.psicologa-specialty {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--space-1);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.psicologa-card-divider {
  height: 1px;
  background: var(--border-light);
  margin: 0 var(--space-6);
}

.psicologa-card-stats {
  padding: var(--space-4) var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.psicologa-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.psicologa-stat-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.psicologa-stat-label svg {
  width: 12px; height: 12px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.psicologa-stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
}

.psicologa-stat-value.billing {
  color: var(--primary-dark);
}

.psicologa-card-actions {
  padding: var(--space-4) var(--space-6) var(--space-6);
  margin-top: auto;
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* ════════════════════════════════════════════════════════════
   BOTONES
   ════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--ease);
  border: 1.5px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}

.btn svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: white;
  border-color: var(--primary-dark);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-darker), var(--primary-dark));
  box-shadow: 0 4px 12px rgba(156, 195, 192, 0.4);
  transform: translateY(-1px);
}

.btn-secondary {
  background: linear-gradient(135deg, var(--secondary-dark), var(--secondary));
  color: white;
  border-color: var(--secondary-dark);
}
.btn-secondary:hover {
  background: linear-gradient(135deg, var(--secondary-darker), var(--secondary-dark));
  box-shadow: 0 4px 12px rgba(151, 135, 163, 0.4);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--text-medium);
  border-color: var(--border);
}
.btn-outline:hover {
  background: var(--bg);
  border-color: var(--primary);
  color: var(--primary-dark);
}

.btn-ghost {
  background: transparent;
  color: var(--text-medium);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--bg);
  color: var(--text);
}

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: 0.8125rem;
}

.btn-lg {
  padding: var(--space-4) var(--space-6);
  font-size: 0.9375rem;
}

.btn-full { width: 100%; }

.btn-icon {
  width: 36px; height: 36px;
  padding: 0;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   TAGS / BADGES
   ════════════════════════════════════════════════════════════ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.tag svg {
  width: 10px; height: 10px;
  stroke: currentColor; fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Categorías */
.tag-centir    { background: var(--tag-centir-bg);    color: var(--tag-centir-text); }
.tag-referido  { background: var(--tag-referido-bg);  color: var(--tag-referido-text); }
.tag-privado   { background: var(--tag-privado-bg);   color: var(--tag-privado-text); }

/* Modalidades */
.tag-presencial { background: var(--tag-presencial-bg); color: var(--tag-presencial-text); }
.tag-virtual    { background: var(--tag-virtual-bg);    color: var(--tag-virtual-text); }

/* ════════════════════════════════════════════════════════════
   FILTER TABS
   ════════════════════════════════════════════════════════════ */
.filter-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--bg);
  padding: 4px;
  border-radius: var(--radius-lg);
  width: fit-content;
}

.filter-tab {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-medium);
  cursor: pointer;
  transition: var(--ease);
  white-space: nowrap;
  border: none;
  background: transparent;
}

.filter-tab:hover { color: var(--text); background: var(--surface); }

.filter-tab.active {
  background: var(--surface);
  color: var(--secondary-dark);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* ════════════════════════════════════════════════════════════
   BACK BUTTON / BREADCRUMB
   ════════════════════════════════════════════════════════════ */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-medium);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: var(--ease);
  border: none;
  background: transparent;
}

.back-btn:hover {
  background: var(--bg);
  color: var(--text);
}

.back-btn svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ════════════════════════════════════════════════════════════
   DETALLE PSICÓLOGA — Header
   ════════════════════════════════════════════════════════════ */
.detalle-header {
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  padding: var(--space-8);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.detalle-header-top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.detalle-avatar {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 4px solid var(--surface);
  box-shadow: var(--shadow-lg);
  flex-shrink: 0;
}

.detalle-avatar-fallback {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: white;
  border: 4px solid var(--surface);
  box-shadow: var(--shadow-lg);
  flex-shrink: 0;
}

.detalle-header-info { flex: 1; }

.detalle-header-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-2);
}

.detalle-header-specialty {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.detalle-header-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.detalle-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8125rem;
  color: var(--text-medium);
}

.detalle-meta-item svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--text-light);
}

.detalle-header-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-light);
}

.detalle-stat-box {
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.detalle-stat-box-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: var(--space-1);
}

.detalle-stat-box-value {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--text);
}

/* ════════════════════════════════════════════════════════════
   TABLA DE CONSULTAS
   ════════════════════════════════════════════════════════════ */
.consultas-section {
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.consultas-section-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.consultas-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.consultas-filters {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.consultas-table-wrapper {
  overflow-x: auto;
}

.consultas-table {
  width: 100%;
  border-collapse: collapse;
}

.consultas-table th {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-alt);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

.consultas-table td {
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--border-light);
  font-size: 0.875rem;
  color: var(--text);
  vertical-align: middle;
}

.consultas-table tr:last-child td { border-bottom: none; }

.consultas-table tr:hover td { background: var(--bg); }

.consultas-table .paciente-name {
  font-weight: 600;
  color: var(--text);
}

.consultas-table .paciente-initials {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary-light), var(--secondary-light));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--secondary-darker);
  flex-shrink: 0;
  margin-right: var(--space-2);
}

.paciente-cell {
  display: flex;
  align-items: center;
}

.consultas-table .fecha-cell {
  color: var(--text-medium);
  white-space: nowrap;
}

.consultas-table .hora-cell {
  font-size: 0.8125rem;
  color: var(--text-light);
  white-space: nowrap;
}

.consultas-table .valor-cell {
  font-weight: 700;
  color: var(--primary-dark);
  white-space: nowrap;
}

.consultas-table .sesion-cell {
  color: var(--text-light);
  font-size: 0.8125rem;
}

.consultas-empty {
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--text-light);
}

.consultas-empty svg {
  width: 48px; height: 48px;
  stroke: var(--border); fill: none; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  margin: 0 auto var(--space-3);
  display: block;
}

/* ════════════════════════════════════════════════════════════
   EMPTY STATE
   ════════════════════════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}

.empty-state-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-2xl);
  background: var(--primary-lighter);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
}

.empty-state-icon svg {
  width: 32px; height: 32px;
  stroke: var(--primary); fill: none; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

.empty-state h4 { color: var(--text); margin-bottom: var(--space-2); }
.empty-state p  { color: var(--text-medium); font-size: 0.875rem; }

/* ════════════════════════════════════════════════════════════
   LOADING SPINNER
   ════════════════════════════════════════════════════════════ */
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--primary-light);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: var(--space-8) auto;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════
   TOOLTIP
   ════════════════════════════════════════════════════════════ */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: white;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 200;
}

[data-tooltip]:hover::after { opacity: 1; }

/* ════════════════════════════════════════════════════════════
   MONTH SUMMARY CARD (resumen mensual en detalle)
   ════════════════════════════════════════════════════════════ */
.resumen-mes-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.resumen-mes-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  padding: var(--space-5);
  text-align: center;
  box-shadow: var(--shadow-xs);
}

.resumen-mes-card-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}

.resumen-mes-card-value.primary { color: var(--primary-dark); }
.resumen-mes-card-value.secondary { color: var(--secondary-dark); }

.resumen-mes-card-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* ════════════════════════════════════════════════════════════
   INVITE TOAST — notificación de link de invitación copiado
   ════════════════════════════════════════════════════════════ */
.invite-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 9999;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl, 16px);
  box-shadow: 0 8px 32px rgba(44,44,61,0.15);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  max-width: 480px;
  width: calc(100vw - 48px);
}

.invite-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.invite-toast-icon {
  width: 36px; height: 36px;
  background: var(--primary-lighter, #eef6f5);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.invite-toast-icon svg {
  width: 18px; height: 18px;
  stroke: var(--primary-darker, #5a8a87); fill: none;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}

.invite-toast-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.invite-toast-body strong {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
}

.invite-toast-body span {
  font-size: 0.8125rem;
  color: var(--text-medium);
}

.invite-toast-url {
  font-family: 'SF Mono', 'Fira Mono', monospace;
  font-size: 0.75rem;
  color: var(--primary-darker, #5a8a87);
  background: var(--primary-lighter, #eef6f5);
  padding: 4px 8px;
  border-radius: 6px;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.invite-toast-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  padding: 2px;
  flex-shrink: 0;
  line-height: 0;
}

.invite-toast-close svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.invite-toast-close:hover { color: var(--text-medium); }

/* ════════════════════════════════════════════════════════════
   DIALOG MODAL — sistema de modal centrado reutilizable
   ════════════════════════════════════════════════════════════ */

.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(28, 28, 45, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: dialogFadeIn 0.2s ease;
}

@keyframes dialogFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.dialog {
  background: var(--surface);
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 24px 64px rgba(28,28,45,0.22),
    0 8px 24px rgba(28,28,45,0.12);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  animation: dialogSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

@keyframes dialogSlideIn {
  from { transform: translateY(16px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 28px 0;
  flex-shrink: 0;
}

.dialog-header-text h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin: 0 0 4px;
}

.dialog-header-text p {
  font-size: 0.8125rem;
  color: var(--text-medium);
  margin: 0;
}

.dialog-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-medium);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  margin-left: 12px;
  margin-top: -2px;
}

.dialog-close:hover {
  background: var(--border);
  color: var(--text);
}

.dialog-close svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.dialog-body {
  padding: 20px 28px 24px;
  overflow-y: auto;
  flex: 1;
}

/* ── Secciones dentro del dialog ── */
.dialog-section-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 20px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dialog-section-label:first-child { margin-top: 0; }

.dialog-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Fila de campos ── */
.dialog-row {
  display: grid;
  /* 1 columna en mobile, 2 columnas cuando hay espacio suficiente (≥440px) */
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 440px) {
  .dialog-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Campo de formulario ── */
.dialog-field {
  margin-bottom: 14px;
}

.dialog-field:last-child { margin-bottom: 0; }

.dialog-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.dialog-label .req { color: #e53e3e; margin-left: 2px; }

.dialog-input-wrap { position: relative; }

.dialog-input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  line-height: 1.4;
}

.dialog-input.no-icon { padding-left: 14px; }

.dialog-input:focus {
  border-color: var(--primary-dark, #7aaba8);
  box-shadow: 0 0 0 3px rgba(156,195,192,0.18);
}

.dialog-input::placeholder { color: var(--text-light); }

.dialog-input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  pointer-events: none;
  line-height: 0;
}

.dialog-input-icon svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

.dialog-input-action {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  padding: 4px;
  line-height: 0;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}

.dialog-input-action:hover {
  color: var(--text-medium);
  background: var(--bg);
}

.dialog-input-action svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Footer con acciones ── */
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 28px 24px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}

/* ── Error box ── */
.dialog-error {
  display: none;
  padding: 10px 14px;
  background: #fff5f5;
  border: 1px solid #fed7d7;
  border-radius: 10px;
  font-size: 0.8125rem;
  color: #c53030;
  margin-bottom: 16px;
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   TABLA DE COMISIONES
   ════════════════════════════════════════════════════════════ */
.comision-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-10);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.comision-table-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-1);
}

.comision-table-header p {
  font-size: 0.875rem;
  color: var(--text-medium);
}

.comision-mes-select {
  padding: var(--space-2) var(--space-5);
  padding-right: 40px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: var(--ease);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239e9eaf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;
}

.comision-mes-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(156, 195, 192, 0.2);
}

.comision-table-scroll {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-8);
}

.comision-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: var(--surface);
}

.comision-table thead th {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}

.comision-table tbody tr {
  border-bottom: 1px solid var(--border-light);
  transition: background 0.1s;
}

.comision-table tbody tr:last-child {
  border-bottom: none;
}

.comision-table tbody tr:hover {
  background: var(--primary-lighter);
}

.comision-table td {
  padding: var(--space-4) var(--space-5);
  color: var(--text);
  vertical-align: middle;
}

.td-terapeuta {
  font-weight: 600;
  white-space: nowrap;
  color: var(--text) !important;
}

.td-paciente {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.td-paciente-nombre {
  font-weight: 600;
}

.td-fecha {
  font-size: 0.75rem;
  color: var(--text-light);
}

.td-espacio .comision-espacio {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-medium);
}

.td-espacio .comision-espacio.virtual {
  color: var(--tag-virtual-text, #5c6bc0);
}

.td-valor,
.td-comision {
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}

.td-comision {
  color: var(--primary-dark);
}

.td-pct {
  text-align: center;
}

.comision-pct {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--primary-lighter);
  color: var(--primary-darker);
}

.comision-pct.zero {
  background: var(--bg-alt);
  color: var(--text-light);
}

.comision-pagado--si {
  font-size: 0.75rem;
  font-weight: 600;
  color: #3d7a3a;
  white-space: nowrap;
}

.comision-pagado--no {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-light);
  white-space: nowrap;
}

/* Tfoot (totales) */
.comision-table tfoot tr {
  background: var(--bg);
  border-top: 2px solid var(--border);
}

.comision-table tfoot td {
  padding: var(--space-3) var(--space-4);
  font-weight: 700;
}

.tf-label {
  color: var(--text-medium);
  font-size: 0.8125rem;
}

.tf-valor,
.tf-comision {
  text-align: right;
  font-size: 1rem;
  color: var(--text);
}

.tf-comision {
  color: var(--primary-dark);
}

.comision-empty {
  padding: var(--space-8);
  text-align: center;
  color: var(--text-light);
  font-size: 0.875rem;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border);
  margin-bottom: var(--space-8);
}

/* ════════════════════════════════════════════════════════════
   DIRECTORIO — Tabs y tarjetas de contacto
   ════════════════════════════════════════════════════════════ */
.dir-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1.5px solid var(--border);
  margin-bottom: var(--space-6);
}

.dir-tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-medium);
  cursor: pointer;
  transition: var(--ease);
}
.dir-tab:hover { color: var(--text); }
.dir-tab.active { color: var(--primary-dark); border-bottom-color: var(--primary-dark); }

.dir-tab-count {
  background: var(--border-light);
  color: var(--text-medium);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
}
.dir-tab.active .dir-tab-count { background: var(--primary-lighter); color: var(--primary-dark); }

.dir-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.dir-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: var(--ease);
}
.dir-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.dir-card-header { display: flex; align-items: center; gap: var(--space-4); }

.dir-card-avatar {
  width: 48px; height: 48px; min-width: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700; color: #fff;
}

.dir-card-info { flex: 1; min-width: 0; }
.dir-card-name { font-size: 1rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.dir-card-title { font-size: 0.8125rem; color: var(--text-medium); margin-top: 2px; }
.dir-card-esp { font-size: 0.75rem; color: var(--text-light); margin-top: 2px; }

.dir-card-contacts { display: flex; flex-direction: column; gap: var(--space-2); }

.dir-contact-item {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 0.8125rem; color: var(--text-medium);
  text-decoration: none; transition: var(--ease);
}
.dir-contact-item:hover { color: var(--primary-dark); }
.dir-contact-item svg {
  width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2;
  flex-shrink: 0;
}

.dir-card-footer { display: flex; justify-content: flex-end; }
.dir-card-footer--row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }

.dir-card-name-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* Role badges */
.dir-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  flex-shrink: 0;
}
.dir-role-badge--admin     { background: #fdf0f4; color: #9c4a58; }
.dir-role-badge--dev       { background: #f0f4fd; color: #4a6a9c; }
.dir-role-badge--terapeuta { background: var(--primary-lighter); color: var(--primary-dark); }

/* WhatsApp share button */
.dir-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: #25d366;
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--ease);
  white-space: nowrap;
}
.dir-wa-btn:hover { background: #1da851; color: #fff; }
.dir-wa-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Section labels (Admins / Terapeutas) */
.dir-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-light);
  margin: var(--space-6) 0 var(--space-3);
}
.dir-section-label:first-child { margin-top: 0; }

.dir-card-btn {
  padding: var(--space-2) var(--space-4);
  background: none;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-medium);
  cursor: pointer;
  transition: var(--ease);
}
.dir-card-btn:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-lighter); }

/* Search bar */
.dir-search-wrap { position: relative; margin-bottom: var(--space-5); max-width: 480px; }

.dir-search-icon {
  position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-light); pointer-events: none;
}
.dir-search-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

.dir-search-input {
  width: 100%;
  padding: var(--space-3) var(--space-4) var(--space-3) 38px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 0.875rem;
  color: var(--text);
  outline: none;
  transition: var(--ease);
}
.dir-search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(156,195,192,.2); }

/* ════════════════════════════════════════════════════════════
   DATA TABLE — Tabla genérica reutilizable
   ════════════════════════════════════════════════════════════ */
.table-scroll {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}

.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

.data-table thead th {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-medium);
  background: var(--surface);
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
}

.data-table tbody tr { border-bottom: 1px solid var(--border); transition: background var(--ease); }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--primary-lighter, #f7f9f9); }
.data-table td { padding: var(--space-4) var(--space-5); color: var(--text); vertical-align: middle; }

/* Utility */
.fw-600 { font-weight: 600; }
.link-subtle { color: var(--text-medium); text-decoration: none; transition: var(--ease); }
.link-subtle:hover { color: var(--primary-dark); text-decoration: underline; }

/* ════════════════════════════════════════════════════════════
   PERFIL — Editar perfil de usuario
   ════════════════════════════════════════════════════════════ */
.perfil-wrap { max-width: 640px; }

.perfil-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
  margin-bottom: var(--space-6);
}

.perfil-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1.5px solid var(--border);
}

.perfil-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 640px) { .perfil-fields { grid-template-columns: 1fr; } }

.perfil-field { display: flex; flex-direction: column; gap: var(--space-2); }

.perfil-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-medium); }

.perfil-input {
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 0.875rem;
  color: var(--text);
  outline: none;
  transition: var(--ease);
}
.perfil-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(156,195,192,.2); }

.perfil-actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }

.perfil-feedback { font-size: 0.875rem; font-weight: 500; }
.perfil-feedback--ok    { color: #3d7a3a; }
.perfil-feedback--error { color: var(--danger); }

.perfil-card-desc {
  font-size: 0.8125rem;
  color: var(--text-light);
  margin-top: calc(-1 * var(--space-4));
  margin-bottom: var(--space-5);
}

/* ── Editor de bio (rich text) ── */
.pf-bio-wrap { display: flex; flex-direction: column; }

.pf-bio-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--surface-alt, #f5f7f9);
  border: 1.5px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.pf-bio-tool-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.4;
  transition: background 0.12s;
  min-width: 28px;
  text-align: center;
}
.pf-bio-tool-btn:hover { background: var(--border-light, #e8ecef); }
.pf-bio-tool-italic { font-style: italic; }

.pf-bio-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
}

.pf-bio-editor {
  min-height: 130px;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  outline: none;
  line-height: 1.65;
  cursor: text;
  white-space: pre-wrap;
}
.pf-bio-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-light);
  pointer-events: none;
  display: block;
}
.pf-bio-editor ul { margin: 4px 0 4px 1.2em; padding: 0; }
.pf-bio-editor li { margin-bottom: 2px; }

/* ── Certificaciones ── */
.pf-certs-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.pf-certs-empty {
  font-size: 0.8125rem;
  color: var(--text-light);
  font-style: italic;
  padding: var(--space-2) 0;
}

.pf-cert-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-alt, #f8fafa);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.pf-cert-text {
  flex: 1;
  font-size: 0.875rem;
  color: var(--text);
}

.pf-cert-del {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-light);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  transition: color 0.15s, background 0.15s;
}
.pf-cert-del:hover { color: var(--danger); background: rgba(220,38,38,.08); }

.pf-certs-add {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.pf-certs-add .perfil-input { flex: 1; }
@media (max-width: 480px) { .pf-certs-add { flex-direction: column; } }

/* ── Foto de perfil (sección en editar perfil) ── */
.pf-foto-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.pf-foto-preview {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pf-foto-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.pf-foto-initials {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: white;
}

.pf-foto-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.pf-foto-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
}

.pf-foto-delete {
  font-size: 0.8125rem;
  color: var(--danger);
  border-color: var(--danger);
}

.pf-foto-hint {
  font-size: 0.75rem;
  color: var(--text-light);
}

/* ── Modalidad de atención (radio buttons estilo pill) ────── */
.pf-modalidad-group {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-1);
}

.pf-modalidad-opt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-medium);
  cursor: pointer;
  transition: var(--ease);
  user-select: none;
}

.pf-modalidad-opt input[type="radio"] { display: none; }

.pf-modalidad-opt svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

.pf-modalidad-opt:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
  background: var(--primary-lighter);
}

.pf-modalidad-opt.selected {
  border-color: var(--primary-dark);
  background: var(--primary-lighter);
  color: var(--primary-dark);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   HISTORIAL INLINE EDIT
   ════════════════════════════════════════════════════════════ */

/* Hint en el header de columna */
.hst-edit-hint {
  font-size: 0.6875rem;
  font-weight: 400;
  opacity: 0.55;
  letter-spacing: 0;
}

/* Badge clicable de estado */
.hst-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--ease), transform var(--ease);
  white-space: nowrap;
}
.hst-badge-btn:hover { filter: brightness(0.93); transform: scale(1.03); }

.hst-edit-icon {
  width: 11px; height: 11px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
  transition: opacity var(--ease);
  flex-shrink: 0;
}
.hst-badge-btn:hover .hst-edit-icon { opacity: 0.7; }

/* Dropdown personalizado de estado */
.hst-estado-dropdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 6px;
  box-shadow: var(--shadow-md);
  z-index: 1000;
  min-width: 130px;
}

.hst-estado-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  transition: filter var(--ease), transform var(--ease);
}
.hst-estado-opt:hover { filter: brightness(0.9); transform: scale(1.02); }
.hst-estado-opt--active {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

/* Botón de pago clicable */
.hst-pago-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: filter var(--ease), transform var(--ease), box-shadow var(--ease);
}
.hst-pago-btn:hover { filter: brightness(0.93); transform: scale(1.03); }

.hst-pago-btn svg {
  width: 12px; height: 12px;
  stroke: currentColor; fill: none;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}

.hst-pago-btn--paid    { background: #eef6f5; color: #3d7a3a; border-color: #b8d9b6; }
.hst-pago-btn--pending { background: #fdf0f4; color: #9c4a58; border-color: #f0c4ce; }

/* Guardando... texto */
.hst-saving {
  font-size: 0.75rem;
  color: var(--text-light);
  font-style: italic;
  padding: 2px 4px;
}

/* Toast de error */
.hst-toast-error {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: #9c4a58;
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 9999;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}
.hst-toast-error.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Celda de teléfono en tabla de pacientes ─────────────────── */
.pac-phone-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.pac-phone-num {
  font-size: 0.875rem;
  color: var(--text);
}

.pac-phone-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--ease);
}
tr:hover .pac-phone-actions { opacity: 1; }

.pac-phone-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  transition: background var(--ease), transform var(--ease);
  flex-shrink: 0;
}
.pac-phone-action:hover { transform: scale(1.12); }

.pac-phone-action--call        { color: #3d7a3a; }
.pac-phone-action--call:hover  { background: #d1fae5; }

.pac-phone-action--call svg {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.pac-phone-action--wa       { color: #25d366; }
.pac-phone-action--wa:hover { background: #dcfce7; }

.pac-phone-action--wa svg {
  width: 14px; height: 14px;
}

/* ════════════════════════════════════════════════════════════
   DETALLE TERAPEUTA — nuevo layout (dt-*)
   ════════════════════════════════════════════════════════════ */

/* Hero card */
.dt-hero-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
  margin-bottom: var(--space-6);
}

.dt-hero-main {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.dt-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.dt-avatar-img {
  width: 110px;
  height: 110px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 4px solid var(--surface);
  box-shadow: var(--shadow-lg);
}

.dt-avatar-fallback {
  width: 110px;
  height: 110px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  font-weight: 700;
  color: white;
  border: 4px solid var(--surface);
  box-shadow: var(--shadow-lg);
  flex-shrink: 0;
}

.dt-status-dot {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--success);
  border: 2.5px solid var(--surface);
}

.dt-hero-info {
  flex: 1;
  min-width: 0;
  padding-top: var(--space-1);
}

.dt-hero-name {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

.dt-titulo {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-medium);
}

.dt-especialidad {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* ── Modalidad chip — admin detalle view ── */
.dt-modalidad-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-3);
}

.dt-modalidad-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--primary-lighter);
  border: 1.5px solid var(--primary-light);
  color: var(--primary-darker);
  white-space: nowrap;
}

.dt-modalidad-chip svg {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
  color: var(--primary-dark);
}

.dt-modalidad-chip--virtual {
  background: color-mix(in srgb, #6366f1 8%, transparent);
  border-color: color-mix(in srgb, #6366f1 25%, transparent);
  color: #4338ca;
}

.dt-modalidad-chip--virtual svg { color: #4f46e5; }

.dt-modalidad-chip--ambas {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  color: var(--primary-darker);
}

.dt-hero-contacts {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.dt-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--text-medium);
  text-decoration: none;
  transition: color 0.15s;
}

.dt-contact-item:hover { color: var(--primary-dark); }

.dt-contact-item svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
  color: var(--text-light);
}

/* Stats strip in hero */
.dt-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-1);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-light);
}

@media (max-width: 640px) {
  .dt-hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .dt-hero-main  { gap: var(--space-4); }
  .dt-hero-name  { font-size: 1.25rem; }
  .dt-avatar-img, .dt-avatar-fallback { width: 80px; height: 80px; font-size: 1.625rem; }
}

.dt-stat {
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  text-align: center;
}

.dt-stat-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: var(--space-1);
}

.dt-stat-value {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}

/* Section cards (bio, certs) */
.dt-section-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  padding: 28px var(--space-8);
  margin-bottom: var(--space-5);
}

.dt-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--space-6);
}

.dt-section-title svg {
  width: 18px; height: 18px;
  stroke: var(--primary-dark); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* Bio content (rendered HTML from contenteditable) */
.dt-bio-content {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--text-medium);
  padding-left: var(--space-4);
  border-left: 3px solid var(--primary-light);
}

.dt-bio-content b,
.dt-bio-content strong { font-weight: 700; color: var(--text); }

.dt-bio-content i,
.dt-bio-content em { font-style: italic; }

.dt-bio-content u { text-decoration: underline; }

.dt-bio-content br + br { display: block; margin-top: 0.4em; }

.dt-bio-content ul {
  list-style: none;
  padding-left: 0;
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dt-bio-content li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.dt-bio-content li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-dark);
  flex-shrink: 0;
  margin-top: 7px;
}

/* Certifications list */
.dt-certs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dt-cert-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-medium);
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-light);
  transition: border-color 0.15s, background 0.15s;
}

.dt-cert-item:hover {
  background: var(--primary-lighter);
  border-color: var(--primary-light);
  color: var(--text);
}

.dt-cert-item svg {
  width: 16px; height: 16px;
  stroke: var(--primary-dark); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* Sessions card */
.dt-sessions-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-6);
}

.dt-sessions-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.dt-sessions-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.dt-sessions-sub {
  font-size: 0.8125rem;
  color: var(--text-light);
  margin-top: 2px;
}