/* ============================================================
   TuTerapia — Design System
   Stack: Bootstrap 5.3 + CSS Custom Properties
   ============================================================ */

/* ── Variables ────────────────────────────────────────────── */
:root {
  /* Paleta violeta/azul + tipografías del landing y logins rediseñados
     (Figma "Uniflou"), para que el interior comparta la misma identidad. */
  --tt-primary:         #5B8DEF;
  --tt-primary-light:   #7F77DD;
  --tt-primary-dark:    #3E6BC7;
  --tt-primary-subtle:  #EEF1FE;
  --tt-gradient-primary: linear-gradient(120deg, #7F77DD 15%, #5B8DEF 85%);

  --tt-secondary:       #7BAE8E;
  --tt-secondary-light: #9DC5AD;
  --tt-secondary-dark:  #5A9070;
  --tt-secondary-subtle:#EDF5EF;

  --tt-accent:          #F0A500;
  --tt-accent-subtle:   #FEF6E4;
  --tt-danger:          #E05C5C;
  --tt-danger-subtle:   #FDECEA;
  --tt-warning:         #F5A623;
  --tt-warning-subtle:  #FEF8EC;
  --tt-success:         #52B788;
  --tt-success-subtle:  #EDFAF3;

  --tt-bg:              #F8FAFB;
  --tt-surface:         #FFFFFF;
  --tt-surface-2:       #F2F5F7;
  --tt-border:          #E2E8F0;
  --tt-border-light:    #EEF2F7;

  --tt-text:            #1A2332;
  --tt-text-muted:      #6B7A8D;
  --tt-text-light:      #A0AEBF;

  /* Capa semántica agregada con el modo oscuro (nov 2026). Cada token tiene
     su par oscuro más abajo, en [data-bs-theme="dark"]. Regla: en vistas y
     CSS nuevos NO escribir hex a mano para fondos, textos ni bordes; usar
     estos tokens, o el color se quedará claro en modo oscuro. */
  --tt-surface-3:        #E5E7EB;  /* rellenos neutros: barras de progreso, chips grises */
  --tt-surface-elevated: #FFFFFF;  /* modales, menús desplegables */
  --tt-text-secondary:   #374151;  /* texto de cuerpo un paso más suave que --tt-text */
  --tt-on-primary:       #FFFFFF;  /* texto sobre fondos de color sólido */
  --tt-navy:             #2D4A6B;  /* azul marino de marca usado como texto/títulos */
  --tt-success-text:     #15803D;
  --tt-success-border:   #BBF7D0;
  --tt-danger-text:      #B91C1C;
  --tt-danger-border:    #FECACA;
  --tt-warning-text:     #B45309;
  --tt-warning-border:   #FDE68A;
  --tt-info-text:        #4A6FA5;
  --tt-info-subtle:      #EEF2FA;
  --tt-info-border:      #BFDBFE;
  --tt-violet-text:      #5B54C4;
  --tt-violet-subtle:    #F3F1FD;
  --tt-violet-border:    #DDD6FE;
  --tt-overlay-hover:    rgba(15, 23, 42, 0.04);

  /* Etiquetas de pacientes: [fondo, texto] por color (PatientTagsHelper) */
  --tt-tag-azul-bg: #EEF2FA;    --tt-tag-azul-fg: #4A7FA5;
  --tt-tag-verde-bg: #E6F7F0;   --tt-tag-verde-fg: #0D7A4A;
  --tt-tag-ambar-bg: #FFF7ED;   --tt-tag-ambar-fg: #B45309;
  --tt-tag-rosa-bg: #FFF1F2;    --tt-tag-rosa-fg: #BE123C;
  --tt-tag-violeta-bg: #F5F3FF; --tt-tag-violeta-fg: #7C3AED;
  --tt-tag-teal-bg: #F0FDFA;    --tt-tag-teal-fg: #0D9488;
  --tt-tag-rojo-bg: #FEF2F2;    --tt-tag-rojo-fg: #DC2626;
  --tt-tag-gris-bg: #F1F5F9;    --tt-tag-gris-fg: #475569;

  --tt-sidebar-width:   240px;
  --tt-sidebar-bg:      #FFFFFF;
  --tt-sidebar-border:  #E8ECF1;

  --tt-shadow-sm:       0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --tt-shadow:          0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
  --tt-shadow-md:       0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.04);
  --tt-shadow-lg:       0 20px 25px rgba(0,0,0,0.08), 0 10px 10px rgba(0,0,0,0.04);

  --tt-radius-sm:       6px;
  --tt-radius:          10px;
  --tt-radius-md:       14px;
  --tt-radius-lg:       18px;
  --tt-radius-xl:       24px;

  --tt-transition:      all 0.2s ease;
  --tt-transition-fast: all 0.15s ease;

  --tt-font:            'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tt-font-heading:    'Plus Jakarta Sans', -apple-system, sans-serif;
  --tt-bottom-nav-height: 64px;
}

/* ── Modo oscuro: tokens ─────────────────────────────────────
   Se activa con <html data-bs-theme="dark">, que pone el script de
   shared/_theme_script según la preferencia (Sistema/Claro/Oscuro). Los
   layouts que no lo incluyen (landing, público, login) quedan siempre en
   claro. Base: pizarra azulada, para que el azul/violeta de marca siga
   reconociéndose. Contraste AA revisado contra --tt-surface. */
:root[data-bs-theme="dark"] {
  color-scheme: dark;

  --tt-primary:         #5B8DEF;  /* igual que en claro: legible sobre oscuro y con texto blanco encima */
  --tt-primary-light:   #9C95EA;
  --tt-primary-dark:    #A9C3F7;
  --tt-primary-subtle:  #1A2440;

  --tt-secondary:       #8FC4A2;
  --tt-secondary-light: #6FA585;
  --tt-secondary-dark:  #A8D4B8;
  --tt-secondary-subtle:#16281F;

  --tt-accent:          #F5B83D;
  --tt-accent-subtle:   #2E2616;
  --tt-danger:          #F07A7A;
  --tt-danger-subtle:   #321C20;
  --tt-warning:         #F5B54A;
  --tt-warning-subtle:  #30271A;
  --tt-success:         #5CC596;
  --tt-success-subtle:  #142A21;

  --tt-bg:              #0E141E;
  --tt-surface:         #161E2B;
  --tt-surface-2:       #1C2534;
  --tt-surface-3:       #2A3547;
  --tt-surface-elevated:#1C2534;
  --tt-border:          #2C3748;
  --tt-border-light:    #232D3D;

  --tt-text:            #E6EAF0;
  --tt-text-secondary:  #C5CDD8;
  --tt-text-muted:      #9AA6B6;
  --tt-text-light:      #8693A5;
  --tt-on-primary:      #FFFFFF;
  --tt-navy:            #B9CBE3;

  --tt-success-text:    #6EDBA4;
  --tt-success-border:  #23503A;
  --tt-danger-text:     #FCA5A5;
  --tt-danger-border:   #5A2A30;
  --tt-warning-text:    #FBCB6A;
  --tt-warning-border:  #5A4521;
  --tt-info-text:       #93BCEB;
  --tt-info-subtle:     #182841;
  --tt-info-border:     #2A4468;
  --tt-violet-text:     #B7B1F5;
  --tt-violet-subtle:   #221F3D;
  --tt-violet-border:   #3D3870;
  --tt-overlay-hover:   rgba(255, 255, 255, 0.05);

  --tt-tag-azul-bg: #1A2A42;    --tt-tag-azul-fg: #9CC3EA;
  --tt-tag-verde-bg: #13291F;   --tt-tag-verde-fg: #6EDBA4;
  --tt-tag-ambar-bg: #2E2416;   --tt-tag-ambar-fg: #FBC77A;
  --tt-tag-rosa-bg: #33171F;    --tt-tag-rosa-fg: #FDA4B8;
  --tt-tag-violeta-bg: #241C3D; --tt-tag-violeta-fg: #C4B5FD;
  --tt-tag-teal-bg: #10292A;    --tt-tag-teal-fg: #5EEAD4;
  --tt-tag-rojo-bg: #321A1C;    --tt-tag-rojo-fg: #FCA5A5;
  --tt-tag-gris-bg: #232D3D;    --tt-tag-gris-fg: #CBD5E1;

  --tt-sidebar-bg:      #131A26;
  --tt-sidebar-border:  #232D3D;

  --tt-shadow-sm:       0 1px 3px rgba(0,0,0,0.35);
  --tt-shadow:          0 4px 8px rgba(0,0,0,0.35);
  --tt-shadow-md:       0 10px 18px rgba(0,0,0,0.4);
  --tt-shadow-lg:       0 20px 30px rgba(0,0,0,0.45);

  /* Bootstrap 5.3 en oscuro, alineado a nuestra paleta */
  --bs-body-bg:            var(--tt-bg);
  --bs-body-color:         var(--tt-text);
  --bs-emphasis-color:     #FFFFFF;
  --bs-secondary-color:    var(--tt-text-muted);
  --bs-secondary-bg:       var(--tt-surface-2);
  --bs-tertiary-bg:        var(--tt-surface-2);
  --bs-tertiary-color:     var(--tt-text-light);
  --bs-border-color:       var(--tt-border);
  --bs-border-color-translucent: rgba(255,255,255,0.1);
  --bs-heading-color:      var(--tt-text);
  --bs-link-color:         var(--tt-primary);
  --bs-link-hover-color:   var(--tt-primary-dark);
  --bs-link-color-rgb:     91, 141, 239;
  --bs-link-hover-color-rgb: 169, 195, 247;
  --bs-primary-text-emphasis: var(--tt-primary);
  --bs-success-text-emphasis: var(--tt-success-text);
  --bs-danger-text-emphasis:  var(--tt-danger-text);
  --bs-warning-text-emphasis: var(--tt-warning-text);
  --bs-info-text-emphasis:    var(--tt-info-text);
  --bs-primary-bg-subtle:  var(--tt-primary-subtle);
  --bs-success-bg-subtle:  var(--tt-success-subtle);
  --bs-danger-bg-subtle:   var(--tt-danger-subtle);
  --bs-warning-bg-subtle:  var(--tt-warning-subtle);
  --bs-info-bg-subtle:     var(--tt-info-subtle);
  --bs-primary-border-subtle: var(--tt-info-border);
  --bs-success-border-subtle: var(--tt-success-border);
  --bs-danger-border-subtle:  var(--tt-danger-border);
  --bs-warning-border-subtle: var(--tt-warning-border);
  --bs-info-border-subtle:    var(--tt-info-border);
}

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--tt-font);
  color: var(--tt-text);
  background-color: var(--tt-bg);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.tt-page-title, .tt-card-title, .tt-logo-text, .tt-topbar-title {
  font-family: var(--tt-font-heading);
  font-weight: 800; /* Plus Jakarta Sans ExtraBold — design system de Figma */
}

/* Bootstrap overrides */
.btn-primary { background: var(--tt-gradient-primary); border-color: transparent; font-family: var(--tt-font-heading); font-weight: 700; color: #fff; }
.btn-primary:hover { filter: brightness(0.94); border-color: transparent; color: #fff; }
.btn-outline-primary { color: var(--tt-primary); border-color: var(--tt-primary); }
.btn-outline-primary:hover { background: var(--tt-gradient-primary); border-color: transparent; }
.form-control:focus, .form-select:focus { border-color: var(--tt-primary); box-shadow: 0 0 0 0.2rem rgba(91, 141, 239, 0.15); }

/* ── Layout Principal ─────────────────────────────────────── */
.tt-app-body {
  display: flex;
  min-height: 100vh;
  background: var(--tt-bg);
}

/* Sidebar */
.tt-sidebar {
  width: var(--tt-sidebar-width);
  height: 100vh;
  background: var(--tt-sidebar-bg);
  border-right: 1px solid var(--tt-sidebar-border);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.tt-sidebar-logo {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--tt-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tt-logo-text {
  font-size: 20px;
  font-weight: 700;
  color: var(--tt-primary);
  letter-spacing: -0.5px;
  text-decoration: none;
}

.tt-logo-dot { color: var(--tt-secondary); }

.tt-sidebar-nav {
  flex: 1;
  padding: 12px 0;
  overflow-y: auto;
}

.tt-nav-section {
  padding: 0 12px;
  margin-bottom: 4px;
}

.tt-nav-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--tt-text-light);
  padding: 8px 8px 4px;
  display: block;
}

.tt-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--tt-radius-sm);
  color: var(--tt-text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 450;
  transition: var(--tt-transition-fast);
  margin-bottom: 2px;
}

.tt-nav-item:hover {
  background: var(--tt-primary-subtle);
  color: var(--tt-primary);
  text-decoration: none;
}

.tt-nav-item.active {
  background: var(--tt-primary-subtle);
  color: var(--tt-primary);
  font-weight: 500;
}

.tt-nav-item i {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.tt-nav-badge {
  margin-left: auto;
  background: var(--tt-primary);
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 20px;
  min-width: 18px;
  text-align: center;
}

/* Badge "Nuevo" para funcionalidades recién lanzadas */
.tt-nav-new {
  margin-left: auto;
  background: var(--tt-gradient-primary);
  color: white;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(124, 58, 237, 0.35);
  animation: tt-nav-new-pulse 2.2s ease-in-out infinite;
}

@keyframes tt-nav-new-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.06); opacity: 0.9; }
}

/* Submenú colapsable dentro del sidebar (ej. "Configuración") */
.tt-nav-details summary.tt-nav-item {
  cursor: pointer;
  list-style: none;
}

.tt-nav-details summary.tt-nav-item::-webkit-details-marker {
  display: none;
}

.tt-nav-details-icon {
  margin-left: auto;
  font-size: 12px !important;
  width: auto !important;
  transition: transform var(--tt-transition-fast);
}

.tt-nav-details[open] summary .tt-nav-details-icon {
  transform: rotate(180deg);
}

.tt-nav-subitem {
  padding-left: 30px;
  font-size: 13px;
}

/* .tt-nav-item fija display:flex con especificidad de autor, lo que pisa la
   regla nativa del navegador (details:not([open]) > *) que oculta el
   contenido de un <details> cerrado -- hay que ocultarlo explícitamente. */
.tt-nav-details:not([open]) .tt-nav-subitem {
  display: none;
}

.tt-sidebar-profile {
  padding: 12px 16px;
  border-top: 1px solid var(--tt-border-light);
}

.tt-profile-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--tt-radius);
  cursor: pointer;
  transition: var(--tt-transition-fast);
  text-decoration: none;
}

.tt-profile-mini:hover { background: var(--tt-surface-2); }

.tt-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tt-primary) 0%, var(--tt-secondary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.tt-avatar-lg { width: 48px; height: 48px; font-size: 16px; }

/* Variante sin relleno, solo borde — usada en listados largos donde el
   degradado de color por fila se siente recargado (ej. lista de Pacientes). */
.tt-avatar-outline {
  background: none;
  border: 1.5px solid var(--tt-border);
  color: var(--tt-text-muted);
}

.tt-profile-info { flex: 1; min-width: 0; }

.tt-profile-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--tt-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tt-profile-role { font-size: 11px; color: var(--tt-text-muted); }

/* Main content area */
.tt-main-content {
  margin-left: var(--tt-sidebar-width);
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: hidden;
}

.tt-topbar {
  background: var(--tt-surface);
  border-bottom: 1px solid var(--tt-border-light);
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.tt-topbar-title {
  font-size: 15px;
  color: var(--tt-text);
  flex: 1;
}

.tt-page-content { padding: 24px; flex: 1; }

/* ── Cards ────────────────────────────────────────────────── */
.tt-card {
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md);
  box-shadow: var(--tt-shadow-sm);
  overflow: hidden;
}

.tt-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--tt-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tt-card-title { font-size: 14px; color: var(--tt-text); margin: 0; }

/* Chevron del boton que colapsa una tarjeta en movil (Proximas sesiones,
   Recordatorios): Bootstrap agrega/quita ".collapsed" solo en el boton
   trigger, asi que basta CSS para rotarlo -- mismo truco que el acordeon de
   Settings. */
.tt-collapse-toggle .bi-chevron-down { transition: transform .2s ease; }
.tt-collapse-toggle:not(.collapsed) .bi-chevron-down { transform: rotate(180deg); }
.tt-card-body { padding: 20px; }

/* Stat cards — KPIs con contenido centrado en todo el sistema */
.tt-stat-card {
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md);
  padding: 20px;
  box-shadow: var(--tt-shadow-sm);
  transition: var(--tt-transition);
  height: 100%;
  text-align: center;
}

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

/* Tarjetas KPI clickeables (dashboard del paciente) — el link envuelve la
   tarjeta entera; se resalta el borde con el color primario al pasar el
   mouse para que quede claro que es interactiva, no solo informativa. */
.tt-stat-card-link { display: block; text-decoration: none; color: inherit; }
.tt-stat-card-link:hover .tt-stat-card { border-color: var(--tt-primary); }
.tt-stat-card-link:active .tt-stat-card { transform: translateY(0); box-shadow: var(--tt-shadow-sm); }

.tt-stat-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  margin: 0 auto 12px;
}

.tt-stat-card-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--tt-text);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.tt-stat-card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--tt-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.tt-stat-card-sub {
  font-size: 12px;
  font-weight: 500;
}

/* Analytics section titles */
.analytics-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--tt-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--tt-border);
}

/* ── Analytics cards ──────────────────────────────────────── */
.tt-analytics-card {
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md);
  box-shadow: var(--tt-shadow-sm);
  overflow: hidden;
}

.tt-analytics-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--tt-border);
  font-size: 14px;
  color: var(--tt-text);
  flex-wrap: wrap;
}

.tt-analytics-card-header small {
  font-size: 12px;
}

.tt-analytics-card-body {
  padding: 20px;
}

.tt-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--tt-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin: 0 auto 14px;
}

.tt-stat-icon-primary   { background: var(--tt-primary-subtle);   color: var(--tt-primary); }
.tt-stat-icon-secondary { background: var(--tt-secondary-subtle); color: var(--tt-secondary); }
.tt-stat-icon-accent    { background: var(--tt-accent-subtle);    color: var(--tt-accent); }
.tt-stat-icon-danger    { background: var(--tt-danger-subtle);    color: var(--tt-danger); }
.tt-stat-icon-warning   { background: var(--tt-warning-subtle);   color: var(--tt-warning); }

.tt-stat-value { font-size: 32px; font-weight: 700; color: var(--tt-text); line-height: 1; margin-bottom: 6px; }
.tt-stat-label { font-size: 13px; color: var(--tt-text-muted); font-weight: 500; }

/* ── Page headers ─────────────────────────────────────────── */
.tt-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}

.tt-page-title { font-size: 22px; color: var(--tt-text); margin: 0; letter-spacing: -0.4px; }
.tt-page-subtitle { font-size: 14px; color: var(--tt-text-muted); margin: 2px 0 0; }

/* Header de la ficha del paciente — identidad a la izquierda, acciones a
   la derecha; en mobile las acciones bajan a su propia fila de solo
   íconos en vez de apretarse junto al nombre. */
.tt-patient-header { flex-wrap: wrap; }
.tt-patient-header-id { display: flex; align-items: flex-start; gap: 12px; min-width: 0; flex: 1 1 240px; }
.tt-patient-header-info { min-width: 0; }
.tt-patient-header-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.tt-patient-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tt-patient-header-actions { display: flex; gap: 6px; flex-shrink: 0; }

@media (max-width: 576px) {
  .tt-patient-header-id { flex: 1 1 100%; }
  .tt-patient-name { font-size: 19px; max-width: 58vw; }
  .tt-patient-header-actions {
    flex: 1 1 100%; overflow-x: auto; scrollbar-width: none;
    padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--tt-border-light);
  }
  .tt-patient-header-actions::-webkit-scrollbar { display: none; }
  .tt-patient-header-actions .tt-btn { flex-shrink: 0; }
}

/* ── Botones TuTerapia ────────────────────────────────────── */
.tt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--tt-radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: var(--tt-transition-fast);
  white-space: nowrap;
  font-family: var(--tt-font);
}

.tt-btn-primary { background: var(--tt-gradient-primary); color: white; font-family: var(--tt-font-heading); font-weight: 700; }
.tt-btn-primary:hover { filter: brightness(0.94); color: white; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(91,141,239,0.3); }

.tt-btn-secondary { background: var(--tt-surface); color: var(--tt-text); border-color: var(--tt-border); }
.tt-btn-secondary:hover { background: var(--tt-surface-2); color: var(--tt-text); }

.tt-btn-ghost { background: transparent; color: var(--tt-text-muted); }
.tt-btn-ghost:hover { background: var(--tt-surface-2); color: var(--tt-text); }

.tt-btn-danger { background: var(--tt-danger); color: white; }
.tt-btn-danger:hover { background: #c94e4e; color: white; }

.tt-btn-sm { padding: 5px 10px; font-size: 12px; }
.tt-btn-lg { padding: 12px 24px; font-size: 15px; border-radius: var(--tt-radius); }

/* ── Badges ───────────────────────────────────────────────── */
.tt-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.tt-badge-success  { background: var(--tt-success-subtle);  color: var(--tt-success); }
.tt-badge-primary  { background: var(--tt-primary-subtle);  color: var(--tt-primary); }
.tt-badge-warning  { background: var(--tt-warning-subtle);  color: var(--tt-warning); }
.tt-badge-danger   { background: var(--tt-danger-subtle);   color: var(--tt-danger); }
.tt-badge-muted    { background: var(--tt-surface-2);       color: var(--tt-text-muted); }
.tt-badge-accent   { background: var(--tt-accent-subtle);   color: var(--tt-accent); }

/* ── Flash / Toasts ───────────────────────────────────────── */
.tt-flash-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
  width: 100%;
}

.tt-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius);
  padding: 14px 16px;
  box-shadow: var(--tt-shadow-md);
  animation: tt-slide-in 0.25s ease;
}

.tt-toast-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.tt-toast-success .tt-toast-icon { color: var(--tt-success); }
.tt-toast-error   .tt-toast-icon { color: var(--tt-danger); }
.tt-toast-warning .tt-toast-icon { color: var(--tt-warning); }
.tt-toast-info    .tt-toast-icon { color: var(--tt-primary); }

.tt-toast-body { flex: 1; }
.tt-toast-message { font-size: 13px; font-weight: 500; color: var(--tt-text); line-height: 1.4; }

.tt-toast-close {
  background: none; border: none; color: var(--tt-text-light); cursor: pointer;
  padding: 0; font-size: 14px; line-height: 1; transition: color 0.15s;
}
.tt-toast-close:hover { color: var(--tt-text); }

@keyframes tt-slide-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Empty States ─────────────────────────────────────────── */
.tt-empty-state { text-align: center; padding: 60px 24px; }

.tt-empty-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--tt-surface-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--tt-text-light); margin-bottom: 16px;
}

.tt-empty-title { font-size: 16px; font-weight: 600; color: var(--tt-text); margin-bottom: 6px; }
.tt-empty-desc  { font-size: 14px; color: var(--tt-text-muted); max-width: 320px; margin: 0 auto 20px; line-height: 1.5; }

/* ── Skeleton Loaders ─────────────────────────────────────── */
.tt-skeleton {
  background: linear-gradient(90deg, var(--tt-surface-2) 25%, var(--tt-border-light) 50%, var(--tt-surface-2) 75%);
  background-size: 200% 100%;
  animation: tt-skeleton-loading 1.5s infinite;
  border-radius: var(--tt-radius-sm);
}

@keyframes tt-skeleton-loading {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.tt-skeleton-text   { height: 14px; margin-bottom: 8px; }
.tt-skeleton-title  { height: 20px; margin-bottom: 12px; }
.tt-skeleton-circle { border-radius: 50%; }
.tt-skeleton-card   { height: 80px; border-radius: var(--tt-radius-md); }

/* ── Forms ────────────────────────────────────────────────── */
.tt-form-label { font-size: 13px; font-weight: 500; color: var(--tt-text); margin-bottom: 5px; }

.tt-form-control {
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-sm);
  padding: 9px 12px;
  font-size: 14px;
  color: var(--tt-text);
  background: var(--tt-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: var(--tt-font);
  width: 100%;
}

.tt-form-control:focus {
  outline: none;
  border-color: var(--tt-primary);
  box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.12);
}

.tt-form-control::placeholder { color: var(--tt-text-light); }

/* ── Auth Layout ──────────────────────────────────────────── */
.tt-auth-body {
  background: linear-gradient(135deg, var(--tt-info-subtle) 0%, var(--tt-surface-2) 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: var(--tt-font);
}

.tt-auth-wrapper { width: 100%; max-width: 440px; }

.tt-auth-card {
  background: var(--tt-surface);
  border-radius: var(--tt-radius-xl);
  box-shadow: var(--tt-shadow-lg);
  padding: 40px;
  border: 1px solid var(--tt-border-light);
}

.tt-auth-logo { text-align: center; margin-bottom: 28px; }

.tt-auth-logo-text {
  font-size: 26px;
  font-weight: 700;
  color: var(--tt-primary);
  letter-spacing: -0.5px;
  text-decoration: none;
}

.tt-auth-title   { font-size: 20px; font-weight: 700; color: var(--tt-text); margin-bottom: 4px; text-align: center; }
.tt-auth-subtitle { font-size: 14px; color: var(--tt-text-muted); text-align: center; margin-bottom: 28px; }

/* ── Patient Cards ────────────────────────────────────────── */
.tt-patient-card {
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: var(--tt-transition-fast);
  text-decoration: none;
  color: inherit;
}

.tt-patient-card:hover {
  border-color: var(--tt-primary-light);
  box-shadow: var(--tt-shadow);
  color: inherit;
  transform: translateY(-1px);
}

/* ── Bottom Navigation (mobile) ───────────────────────────── */
.tt-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--tt-bottom-nav-height);
  background: var(--tt-surface);
  border-top: 1px solid var(--tt-border);
  z-index: 100;
  padding: 0 8px;
}

.tt-bottom-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
}

.tt-bottom-nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 8px 12px; border-radius: var(--tt-radius);
  color: var(--tt-text-muted); text-decoration: none; font-size: 10px; font-weight: 500;
  transition: var(--tt-transition-fast); min-width: 56px;
}

.tt-bottom-nav-item i { font-size: 20px; }
.tt-bottom-nav-item.active { color: var(--tt-primary); }

/* Numerito rojo de pendientes en el bottom nav (mobile) — mismo dato que
   el badge del sidebar de escritorio, ver patient_portal.html.erb. */
.tt-bottom-nav-icon-wrap { position: relative; display: inline-flex; }
.tt-bottom-nav-badge {
  position: absolute; top: -4px; right: -8px;
  background: #E53E3E; color: #fff;
  font-size: 9px; font-weight: 700; min-width: 15px; height: 15px;
  border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px; line-height: 1;
}

/* ── Hoja de "más opciones" del bottom nav (mobile) ────────── */
/* --bs-offcanvas-height: Bootstrap deja 30vh por defecto para el bottom
   sheet, que ya no alcanza con 7 opciones (venian siendo 3) -- mas alto para
   que quepan todas sin scroll, junto con tarjetas mas chicas abajo. */
.tt-bottom-sheet { border-top-left-radius: 20px; border-top-right-radius: 20px; --bs-offcanvas-height: min(60vh, 420px); }
.tt-bottom-sheet .offcanvas-title { font-size: 16px; font-weight: 700; color: var(--tt-text); }
.tt-bottom-sheet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-bottom: 8px;
}
.tt-bottom-sheet-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 10px 6px; border-radius: var(--tt-radius-md);
  border: 1px solid var(--tt-border-light); background: var(--tt-surface-2);
  color: var(--tt-text); text-decoration: none; font-size: 11px; font-weight: 600;
  text-align: center; line-height: 1.2;
  transition: var(--tt-transition-fast);
}
.tt-bottom-sheet-item:hover { color: var(--tt-text); background: var(--tt-bg); }
.tt-bottom-sheet-item.active { color: var(--tt-primary); border-color: var(--tt-primary-light); background: var(--tt-primary-subtle); }
.tt-bottom-sheet-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--tt-surface); font-size: 15px;
}

/* ── Appointment items ────────────────────────────────────── */
.tt-appointment-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-radius: var(--tt-radius); border: 1px solid var(--tt-border);
  background: var(--tt-surface); transition: var(--tt-transition-fast);
  margin-bottom: 8px;
}

.tt-appointment-item:hover { border-color: var(--tt-primary-light); box-shadow: var(--tt-shadow-sm); }

.tt-appointment-time {
  font-size: 13px; font-weight: 600; color: var(--tt-primary);
  white-space: nowrap; min-width: 50px; text-align: right;
}

.tt-appointment-divider { width: 3px; height: 36px; border-radius: 4px; background: var(--tt-primary-light); flex-shrink: 0; }

.tt-appointment-info { flex: 1; min-width: 0; }
.tt-appointment-patient { font-size: 14px; font-weight: 500; color: var(--tt-text); }
.tt-appointment-meta { font-size: 12px; color: var(--tt-text-muted); display: flex; align-items: center; gap: 8px; margin-top: 2px; }

/* ── Checkin scores ───────────────────────────────────────── */
.tt-score-bar {
  flex: 1; height: 6px; background: var(--tt-border); border-radius: 4px; overflow: hidden;
}
.tt-score-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }

/* ── Divider ──────────────────────────────────────────────── */
.tt-divider { height: 1px; background: var(--tt-border-light); margin: 16px 0; border: none; }

/* ── Utilities ────────────────────────────────────────────── */
.tt-text-primary   { color: var(--tt-primary) !important; }
.tt-text-secondary { color: var(--tt-secondary) !important; }
.tt-text-muted     { color: var(--tt-text-muted) !important; }
.tt-text-danger    { color: var(--tt-danger) !important; }
.tt-text-success   { color: var(--tt-success) !important; }
.tt-bg-surface     { background: var(--tt-surface) !important; }
.tt-bg-subtle      { background: var(--tt-surface-2) !important; }
.tt-shadow         { box-shadow: var(--tt-shadow) !important; }
.tt-shadow-sm      { box-shadow: var(--tt-shadow-sm) !important; }
.tt-rounded        { border-radius: var(--tt-radius) !important; }
.tt-rounded-md     { border-radius: var(--tt-radius-md) !important; }

/* ── Turbo progress bar ───────────────────────────────────── */
.turbo-progress-bar { height: 3px; background: var(--tt-primary); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --tt-sidebar-width: 200px; }
}

@media (max-width: 768px) {
  .tt-sidebar {
    transform: translateX(-100%);
    width: 100%;
    max-width: 280px;
    box-shadow: none;
  }

  .tt-sidebar.is-open {
    transform: translateX(0);
    box-shadow: var(--tt-shadow-lg);
  }

  .tt-main-content {
    margin-left: 0;
    padding-bottom: var(--tt-bottom-nav-height);
  }

  .tt-bottom-nav { display: block; }
  .tt-page-content { padding: 16px; }
  .tt-topbar { padding: 0 16px; }

  .tt-page-header {
    flex-direction: column;
    gap: 12px;
  }

  .tt-auth-card { padding: 28px 24px; }

  .tt-flash-container {
    top: auto;
    bottom: calc(var(--tt-bottom-nav-height) + 12px);
    right: 12px;
    left: 12px;
    max-width: 100%;
  }

  .tt-stat-value { font-size: 22px; }

  /* Stat cards mobile */
  .tt-stat-card { padding: 14px; }
  .tt-stat-card-icon { width: 32px; height: 32px; font-size: 14px; margin-bottom: 8px; }
  .tt-stat-card-value { font-size: 1.5rem; letter-spacing: -0.3px; margin-bottom: 4px; }
  .tt-stat-card-label { font-size: 10px; }
  .tt-stat-card-sub { font-size: 11px; }

  /* Analytics cards mobile */
  .tt-analytics-card-header {
    padding: 10px 14px;
    font-size: 12px;
    gap: 6px;
  }
  .tt-analytics-card-header small { display: none; }
  .tt-analytics-card-body { padding: 12px 10px; }

  /* Chart heights reducidas en mobile */
  .tt-chart-wrap { height: 180px !important; }
}

/* Sidebar overlay mobile */
.tt-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 99;
  backdrop-filter: blur(2px);
}
.tt-sidebar-overlay.is-visible { display: block; }

/* Scrollbar custom */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--tt-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--tt-text-light); }

/* ============================================================
   Patients
   ============================================================ */

/* Search box */
.tt-search-box {
  position: relative;
}
.tt-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tt-text-muted);
  font-size: 15px;
  pointer-events: none;
}
.tt-search-input {
  width: 100%;
  padding: 10px 14px 10px 40px;
  border: 1.5px solid var(--tt-border);
  border-radius: var(--tt-radius);
  font-size: 14px;
  font-family: var(--tt-font);
  background: var(--tt-surface);
  color: var(--tt-text);
  transition: border-color 0.15s;
}
.tt-search-input:focus {
  outline: none;
  border-color: var(--tt-primary);
  box-shadow: 0 0 0 3px var(--tt-primary-subtle);
}

/* Filters block (pacientes) */
.tt-filters-block {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Filter bar: búsqueda + chips integrados */
.tt-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tt-filter-search { flex: 1; }
.tt-filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  align-items: center;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.tt-filter-chips::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .tt-filter-bar {
    flex-direction: row;
    align-items: center;
  }
  .tt-filter-search { max-width: 300px; }
}

/* Filter chips */
.tt-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 500;
  border: 1.5px solid var(--tt-border);
  background: var(--tt-surface);
  color: var(--tt-text-muted);
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
  white-space: nowrap;
}
.tt-filter-chip:hover { border-color: var(--tt-primary); color: var(--tt-primary); }
.tt-filter-chip.active {
  background: var(--tt-primary-subtle);
  border-color: var(--tt-primary);
  color: var(--tt-primary);
}

/* Patient list */
.tt-patient-list { display: flex; flex-direction: column; }
.tt-patient-row {
  display: flex;
  align-items: flex-start;
  padding: 14px 16px;
  border-bottom: 1px solid var(--tt-border-light);
  gap: 12px;
  transition: background 0.12s;
  position: relative;
}
.tt-patient-row:last-child { border-bottom: none; }
.tt-patient-row:hover { background: var(--tt-bg); }
.tt-patient-info {
  flex: 1;
  min-width: 0;
}
.tt-patient-line1 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.tt-patient-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--tt-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt-patient-name:hover { color: var(--tt-primary); }
.tt-patient-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.tt-patient-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 3px;
  font-size: 13px;
  color: var(--tt-text-muted);
}
.tt-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tt-meta-next-appt {
  color: var(--tt-primary);
  font-weight: 500;
}
.tt-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--tt-text-muted);
  text-decoration: none;
  transition: all 0.15s;
  font-size: 13px;
  position: relative;
  z-index: 2;
}
.tt-icon-btn:hover {
  background: var(--tt-primary-subtle);
  color: var(--tt-primary);
}
.tt-row-chevron {
  font-size: 11px;
  color: var(--tt-text-muted);
  opacity: 0.35;
}
.tt-link { color: var(--tt-text); text-decoration: none; }
.tt-link:hover { color: var(--tt-primary); }

/* Session list (agenda / sesiones) */
.tt-session-list { display: flex; flex-direction: column; }
.tt-session-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--tt-border-light);
  position: relative;
  transition: background 0.12s;
}
.tt-session-row:last-child { border-bottom: none; }
.tt-session-row:hover { background: var(--tt-bg); }
.tt-session-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
  flex-shrink: 0;
  text-align: center;
  padding-right: 16px;
  border-right: 1px solid var(--tt-border-light);
}
.tt-session-date-day { font-size: 22px; font-weight: 700; color: var(--tt-text); line-height: 1; }
.tt-session-date-month { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--tt-text-muted); margin-top: 2px; }
.tt-session-date-year { font-size: 10px; color: var(--tt-text-light); margin-top: 1px; }
.tt-session-body { flex: 1; min-width: 0; }
.tt-session-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tt-session-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 13px;
  color: var(--tt-text-muted);
}
.tt-session-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
}

/* En desktop/tablet la lista scrollea dentro de la tarjeta; en mobile
   fluye con el scroll de la página (un scroll anidado con touch es
   confuso y poco confiable en iOS/Android). */
@media (min-width: 768px) {
  .tt-session-list {
    max-height: 520px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 576px) {
  .tt-session-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .tt-session-date {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    text-align: left;
    border-right: none;
    padding-right: 0;
  }
  .tt-session-actions { justify-content: flex-start; }
}

/* Acciones de solicitud de contacto — en mobile, las acciones secundarias
   (WhatsApp/Ya contacté/Rechazar) muestran solo el ícono para que quepan
   en una sola fila y la tarjeta no se estire tanto verticalmente. */
@media (max-width: 576px) {
  .tt-contact-actions .tt-contact-secondary { padding-left: 10px; padding-right: 10px; }
  .tt-contact-actions .tt-btn-label { display: none; }
}

/* Avatar sizes */
.tt-avatar-md { width: 44px; height: 44px; font-size: 15px; flex-shrink: 0; }
.tt-avatar-lg { width: 56px; height: 56px; font-size: 18px; flex-shrink: 0; }

/* Pagination */
.tt-pagination {
  padding: 16px 24px;
  border-top: 1px solid var(--tt-border-light);
  display: flex;
  justify-content: center;
}
.tt-pagination .pagination { margin: 0; gap: 4px; }
.tt-pagination .page-link {
  border-radius: var(--tt-radius-sm) !important;
  border-color: var(--tt-border);
  /* Bug real 2026-09-01: color: var(--tt-text-muted) sobre fondo blanco ya
     era flojo (~4.6:1), pero lo grave era el número activo — el fondo azul
     nunca tenía un color de texto propio, así que heredaba este mismo gris
     y quedaba casi ilegible sobre --tt-primary. Ver reglas de abajo. */
  color: var(--tt-text);
  font-size: 13px;
  padding: 6px 12px;
}
.tt-pagination .page-item.active .page-link {
  background: var(--tt-primary);
  border-color: var(--tt-primary);
  color: #fff;
}
.tt-pagination .page-item.disabled .page-link {
  color: var(--tt-text-light);
  background: var(--tt-surface-2);
}

/* Patient show header */
.tt-patient-header {
  margin-bottom: 20px;
}
.tt-patient-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tt-patient-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.tt-whatsapp-btn { background: #25D366 !important; color: #fff !important; border-color: #25D366 !important; }
.tt-whatsapp-btn:hover { background: #1ebe5d !important; border-color: #1ebe5d !important; color: #fff !important; }

/* Stats list en Resumen */
.tt-stats-list { display: flex; flex-direction: column; }
.tt-stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--tt-border-light);
}
.tt-stat-row:last-child { border-bottom: none; }
.tt-stat-row-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--tt-primary-subtle);
  color: var(--tt-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.tt-stat-row-label {
  flex: 1;
  font-size: 13px;
  color: var(--tt-text-muted);
}
.tt-stat-row-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--tt-text);
  min-width: 28px;
  text-align: right;
}

/* Tabs */
.tt-tabs { margin-top: 24px; }
.tt-tabs-nav {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--tt-border-light);
  margin-bottom: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tt-tabs-nav::-webkit-scrollbar { display: none; }
.tt-tab-btn {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--tt-text-muted);
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  font-family: var(--tt-font);
}
.tt-tab-btn:hover { color: var(--tt-text); }
.tt-tab-btn.active { color: var(--tt-primary); border-bottom-color: var(--tt-primary); }
.tt-tab-panel { display: none; }
.tt-tab-panel.active { display: block; }

/* Info grid */
.tt-info-grid { display: flex; flex-direction: column; gap: 0; padding: 0 20px 4px; }
.tt-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--tt-border-light);
  gap: 12px;
}
.tt-info-item:last-child { border-bottom: none; }
.tt-info-label { font-size: 13px; color: var(--tt-text-muted); font-weight: 500; }
.tt-info-value { font-size: 14px; color: var(--tt-text); text-align: right; }

/* Notes box */
.tt-notes-box {
  background: var(--tt-bg);
  border-radius: var(--tt-radius);
  padding: 16px;
  font-size: 14px;
  color: var(--tt-text);
  line-height: 1.6;
  border: 1px solid var(--tt-border-light);
}
/* notas clínicas dentro del info-grid necesitan margen lateral */
.tt-card .tt-notes-box { margin: 0 20px 20px; }

/* Stat mini */
.tt-stat-mini {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--tt-border-light);
}
.tt-stat-mini:last-child { border-bottom: none; }
/* primer stat-mini debe tener borde top para separar del header */
.tt-card-header + div .tt-stat-mini:first-child,
.tt-card-header + .d-flex .tt-stat-mini:first-child { border-top: none; }
.tt-stat-mini-value { font-size: 22px; font-weight: 700; color: var(--tt-primary); }
.tt-stat-mini-label { font-size: 13px; color: var(--tt-text-muted); }

/* Appointment row */
.tt-appointment-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--tt-border-light);
}
.tt-appointment-row:last-child { border-bottom: none; }
.tt-appt-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 40px;
}
.tt-appt-day { font-size: 20px; font-weight: 700; color: var(--tt-text); line-height: 1; }
.tt-appt-month { font-size: 11px; color: var(--tt-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.tt-appt-time { font-size: 14px; font-weight: 500; color: var(--tt-text); }

/* Empty state */
.tt-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
}
.tt-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--tt-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--tt-text-light);
  margin-bottom: 20px;
  border: 2px solid var(--tt-border-light);
}
.tt-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--tt-text);
  margin-bottom: 8px;
}
.tt-empty-description {
  font-size: 14px;
  color: var(--tt-text-muted);
  margin-bottom: 24px;
  max-width: 320px;
}

/* Checkin card */
.tt-checkin-card { padding: 20px 24px; }
.tt-scores-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.tt-score-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tt-score-icon { font-size: 18px; color: var(--tt-text-muted); }
.tt-score-item-label { font-size: 11px; color: var(--tt-text-muted); text-align: center; }
.tt-score-bar {
  width: 100%;
  height: 6px;
  background: var(--tt-bg);
  border-radius: 99px;
  overflow: hidden;
}
.tt-score-fill { height: 100%; background: var(--tt-primary); border-radius: 99px; transition: width 0.3s; }
.tt-score-value { font-size: 13px; font-weight: 600; }
.tt-checkin-topic {
  padding: 12px;
  background: var(--tt-secondary-subtle);
  border-radius: var(--tt-radius);
  font-size: 14px;
  color: var(--tt-text);
  border-left: 3px solid var(--tt-secondary);
}
.tt-score-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
}
.tt-score-badge.high { background: var(--tt-success-subtle); color: var(--tt-success); }
.tt-score-badge.medium { background: var(--tt-warning-subtle); color: var(--tt-warning); }
.tt-score-badge.low { background: var(--tt-danger-subtle); color: var(--tt-danger); }
.tt-card .tt-scores-grid { padding: 16px 20px; }

/* Padding para bloques sueltos dentro de tt-card (notas internas, tópico, etc) */
.tt-card > .mt-3,
.tt-card > .mt-4 { padding-left: 20px; padding-right: 20px; padding-bottom: 20px; }
.tt-checkin-presession .tt-scores-grid { padding: 0 20px 20px; }
.tt-checkin-presession .tt-checkin-topic { margin: 0 20px 20px; }
/* Clase genérica para contenido con padding dentro de tt-card */
.tt-card-content { padding: 20px; }
/* Notas sueltas dentro de tt-card (no hijos directos - usan mt-3/mt-4) */
.tt-info-grid + * { padding: 16px 20px 20px; }

/* Form */
.tt-form-group { display: flex; flex-direction: column; gap: 6px; }
.tt-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 0;
  padding: 20px 24px;
  border-top: 1px solid var(--tt-border-light);
  background: var(--tt-bg);
}
.tt-form-hint { font-size: 12px; color: var(--tt-text-muted); }
.tt-form-errors {
  background: var(--tt-danger-subtle);
  border: 1px solid var(--tt-danger);
  border-radius: var(--tt-radius);
  padding: 14px 16px;
  margin: 16px 24px 0;
  font-size: 14px;
  color: var(--tt-danger);
}

/* Responsive */
@media (max-width: 576px) {
  .tt-scores-grid { grid-template-columns: repeat(2, 1fr); }
  .tt-patient-row { flex-wrap: nowrap; }
  .tt-form-actions { flex-direction: column-reverse; }
  .tt-form-actions .tt-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Calendar (FullCalendar overrides)
   ============================================================ */

.tt-calendar-card { padding: 0; overflow: hidden; }
.tt-calendar-card #tt-calendar { padding: 20px; }
.tt-calendar-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 20px 14px;
  border-top: 1px solid var(--tt-border);
}
.tt-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--tt-muted);
  font-weight: 500;
}
.tt-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Días bloqueados: FullCalendar aplica opacity 0.3 a los eventos background,
   por lo que un gris claro resulta invisible; se fuerza opacidad completa
   con un rayado diagonal sutil */
.fc .tt-blocked-bg {
  opacity: 1 !important;
  background: repeating-linear-gradient(
    -45deg,
    rgba(100, 116, 139, 0.16) 0 8px,
    rgba(100, 116, 139, 0.05) 8px 16px
  ) !important;
}
.fc .tt-blocked-event { cursor: pointer; }

/* Menú contextual del calendario (clic en un día) */
.tt-cal-menu {
  position: absolute;
  z-index: 1060;
  min-width: 210px;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  padding: 6px;
}
.tt-cal-menu-date {
  font-size: 12px;
  font-weight: 700;
  color: var(--tt-text-muted);
  text-transform: capitalize;
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--tt-border);
  margin-bottom: 4px;
}
.tt-cal-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tt-text);
  cursor: pointer;
  text-align: left;
}
.tt-cal-menu-item:hover { background: var(--tt-surface-2); }
.tt-cal-menu-item-danger { color: var(--tt-danger-text); }
.tt-cal-menu-item-danger:hover { background: var(--tt-danger-subtle); }

/* Bloqueos del día dentro del menú, con su opción de desbloquear */
.tt-cal-menu-section {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tt-text-muted);
  padding: 10px 10px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--tt-border);
}
.tt-cal-menu-block { padding: 4px 10px 6px; }
.tt-cal-menu-block-label { font-size: 12px; color: var(--tt-text-muted); margin-bottom: 2px; }
.tt-cal-menu-block .tt-cal-menu-item { padding: 7px 8px; margin-left: -8px; width: calc(100% + 8px); }

/* Formulario "Bloquear un horario" dentro del modal */
.tt-cal-range { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; margin-bottom: 12px; }
.tt-cal-range label, .tt-cal-reason label { display: block; font-size: 12px; font-weight: 600; color: var(--tt-text-muted); margin-bottom: 4px; }
.tt-cal-reason { text-align: left; margin-bottom: 18px; }
.tt-cal-confirm-error { color: var(--tt-danger-text); font-size: 12px; margin: -8px 0 12px; }

/* Modal de confirmación de bloqueo de día */
.tt-cal-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1070;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tt-cal-confirm {
  background: var(--tt-surface);
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.25);
  padding: 28px 26px 22px;
  max-width: 380px;
  width: 100%;
  text-align: center;
}
.tt-cal-confirm-icon {
  width: 48px; height: 48px;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: var(--tt-danger-subtle);
  color: var(--tt-danger-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.tt-cal-confirm-title { font-size: 17px; font-weight: 700; color: var(--tt-text); margin: 0 0 8px; }
.tt-cal-confirm-text  { font-size: 13px; color: var(--tt-text-muted); margin: 0 0 20px; }
.tt-cal-confirm-text strong { text-transform: capitalize; }
.tt-cal-confirm-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tt-cal-confirm-actions .tt-btn { justify-content: center; min-width: 120px; }

/* Toolbar */
.fc .fc-toolbar { flex-wrap: wrap; gap: 8px; }
.fc .fc-toolbar-title { font-size: 18px; font-weight: 700; color: var(--tt-text); font-family: var(--tt-font); }
.fc .fc-toolbar-chunk { display: flex; align-items: center; gap: 6px; }
.fc .fc-button-group {
  display: flex !important;
  gap: 4px !important;
}
.fc .fc-button-group .fc-button {
  border-radius: var(--tt-radius-sm) !important;
}
.fc .fc-button {
  background: var(--tt-surface) !important;
  border: 1.5px solid var(--tt-border) !important;
  color: var(--tt-text-muted) !important;
  font-family: var(--tt-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: var(--tt-radius-sm) !important;
  padding: 6px 12px !important;
  box-shadow: none !important;
  transition: all 0.15s !important;
}
.fc .fc-button:hover {
  background: var(--tt-bg) !important;
  border-color: var(--tt-primary) !important;
  color: var(--tt-primary) !important;
}
.fc .fc-button-primary:not(.fc-button-active):not(.fc-today-button) {
  background: var(--tt-surface) !important;
}
.fc .fc-button-active,
.fc .fc-button-primary.fc-button-active {
  background: var(--tt-primary-subtle) !important;
  border-color: var(--tt-primary) !important;
  color: var(--tt-primary) !important;
}
.fc .fc-today-button {
  background: var(--tt-primary) !important;
  border-color: var(--tt-primary) !important;
  color: #fff !important;
}

/* Grid */
.fc .fc-col-header-cell { background: var(--tt-bg); }
.fc .fc-col-header-cell-cushion { font-size: 13px; font-weight: 600; color: var(--tt-text-muted); text-decoration: none; padding: 8px 4px; }
.fc .fc-timegrid-slot { height: 40px; }
.fc .fc-timegrid-slot-label { font-size: 12px; color: var(--tt-text-light); }
.fc .fc-day-today { background: var(--tt-primary-subtle) !important; }
.fc .fc-daygrid-day-number { font-size: 13px; color: var(--tt-text-muted); text-decoration: none; }
.fc .fc-day-today .fc-daygrid-day-number { color: var(--tt-primary); font-weight: 700; }

/* Events */
.fc .fc-event {
  border-radius: 6px !important;
  border-width: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: var(--tt-font) !important;
  padding: 3px 7px !important;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10) !important;
  transition: opacity 0.15s ease, transform 0.1s ease, box-shadow 0.15s !important;
}
.fc .fc-event:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.15) !important;
}

/* Event inner layout */
.tt-fc-inner {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-width: 0; /* si no, el flex item de abajo no se achica y corta feo en vez de "..." */
  overflow: hidden;
  line-height: 1.3;
  padding: 1px 0;
}
.tt-fc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  flex-shrink: 0;
}
.tt-fc-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
}
.tt-fc-modality {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  background: rgba(255,255,255,0.22);
  border-radius: 4px;
  padding: 0 4px;
  margin-left: auto;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

/* Chip simplificado de vistas Mes y Semana: el color solido ya distingue
   online/presencial, asi que solo hace falta hora + nombre. */
.tt-fc-inner-compact { gap: 4px; }
.tt-fc-time {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.85;
}
.tt-fc-checkin {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
  padding: 0 3px;
}

/* Status-specific event tweaks */
.fc .tt-appt-cancelled { opacity: 0.55 !important; }
.fc .tt-appt-cancelled .tt-fc-name { text-decoration: line-through; }
.fc .tt-appt-completed { opacity: 0.60 !important; }
.fc .tt-appt-no_show { opacity: 0.70 !important; }

/* Now indicator */
.fc .fc-timegrid-now-indicator-line { border-color: var(--tt-danger); }
.fc .fc-timegrid-now-indicator-arrow { border-top-color: var(--tt-danger); border-bottom-color: var(--tt-danger); }

/* Section title */
.tt-section-title { font-size: 16px; font-weight: 600; color: var(--tt-text); margin-bottom: 16px; }

/* Appointment show — checkin presession */
.tt-checkin-presession { border-left: 4px solid var(--tt-success); }

@media (max-width: 768px) {
  .fc .fc-toolbar { justify-content: center; }
  .fc .fc-toolbar-title { font-size: 15px; }
  .tt-calendar-card #tt-calendar { padding: 12px; }
}

/* ============================================================
   Check-in público
   ============================================================ */

.tt-checkin-public-body { background: var(--tt-bg); min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 32px 16px; }
.tt-checkin-public-wrap { width: 100%; max-width: 560px; }

.tt-checkin-card { background: var(--tt-surface); border-radius: var(--tt-radius-lg); padding: 40px 36px; box-shadow: var(--tt-shadow-md); }
.tt-checkin-header { text-align: center; margin-bottom: 32px; }
.tt-checkin-logo { font-size: 22px; font-weight: 700; color: var(--tt-primary); margin-bottom: 16px; }
.tt-checkin-logo span { color: var(--tt-secondary); }
.tt-checkin-title { font-size: 22px; font-weight: 700; color: var(--tt-text); margin-bottom: 8px; }
.tt-checkin-subtitle { font-size: 14px; color: var(--tt-text-muted); line-height: 1.5; margin: 0; }
.tt-checkin-thanks { text-align: center; padding: 48px 36px; }
.tt-checkin-icon-wrap { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 20px; }
.tt-checkin-icon-wrap.success { background: var(--tt-success-subtle); color: var(--tt-success); }
.tt-checkin-icon-wrap.muted   { background: var(--tt-bg); color: var(--tt-text-muted); }
.tt-checkin-icon-wrap.danger  { background: var(--tt-danger-subtle); color: var(--tt-danger); }
.tt-checkin-summary { border: 1px solid var(--tt-border); border-radius: var(--tt-radius); overflow: hidden; text-align: left; }
.tt-checkin-summary-item { display: flex; justify-content: space-between; padding: 10px 16px; font-size: 14px; border-bottom: 1px solid var(--tt-border); }
.tt-checkin-summary-item:last-child { border-bottom: none; }

.tt-score-group { margin-bottom: 28px; }
.tt-score-label { font-size: 15px; font-weight: 600; color: var(--tt-text); display: block; margin-bottom: 4px; }
.tt-score-hint  { font-size: 13px; color: var(--tt-text-muted); margin-bottom: 10px; }
.tt-score-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.tt-score-btn {
  width: 40px; height: 40px; border-radius: var(--tt-radius-sm);
  border: 1.5px solid var(--tt-border); background: var(--tt-surface);
  font-size: 14px; font-weight: 500; color: var(--tt-text-muted);
  cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center;
}
.tt-score-btn:hover { border-color: var(--tt-primary); color: var(--tt-primary); }
.tt-score-btn.active { background: var(--tt-primary); border-color: var(--tt-primary); color: #fff; font-weight: 700; }
.tt-score-btn-anxiety.active { background: var(--tt-warning); border-color: var(--tt-warning); }
.tt-score-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--tt-text-light); margin-top: 6px; }
.tt-optional { font-size: 12px; color: var(--tt-text-light); font-weight: 400; }

/* ============================================================
   Settings
   ============================================================ */

/* Bug real reportado 2026-08-27: con 9 pestañas, en pantallas de laptop/
   tablet (donde el sidebar ya come ancho) no entraban todas y las de más
   a la derecha (ej. "Integraciones") quedaban cortadas fuera de la vista
   sin ninguna forma de llegar a ellas — antes el scroll horizontal solo
   se activaba en el media query de celular (≤576px). Ahora es universal. */
.tt-settings-tabs {
  display: flex; gap: 4px; border-bottom: 2px solid var(--tt-border);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.tt-settings-tab {
  padding: 10px 20px; font-size: 14px; font-weight: 500; color: var(--tt-text-muted);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: all 0.15s; flex-shrink: 0; white-space: nowrap;
}
.tt-settings-tab:hover { color: var(--tt-primary); }
.tt-settings-tab.active { color: var(--tt-primary); border-bottom-color: var(--tt-primary); }
.tt-card-title { font-size: 16px; color: var(--tt-text); }
.tt-form-hint { font-size: 12px; color: var(--tt-text-light); }

/* Disponibilidad rows */
.tt-avail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--tt-border);
}
.tt-avail-row:last-child { border-bottom: none; }
.tt-avail-check { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.tt-avail-day { font-size: 14px; font-weight: 500; color: var(--tt-text); white-space: nowrap; }
.tt-avail-times { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tt-avail-separator { color: var(--tt-text-muted); font-size: 15px; flex-shrink: 0; }
.tt-time-select {
  width: 82px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 6px 6px !important;
  text-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: none !important;
}
/* Eliminar flecha nativa del select en webkit */
.tt-time-select::-ms-expand { display: none; }
/* Contenedor fecha + hora en tiempos bloqueados. flex-wrap (mismo patrón que
   .av-block del horario semanal) hace que la hora baje de línea cuando el
   ancho no alcanza, en vez de cortarse. */
.tt-blocked-datetime { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tt-blocked-date { flex: 1 1 130px; min-width: 0; }
@media (max-width: 576px) {
  .tt-time-select { width: 76px !important; font-size: 13px !important; }
}

/* Blocked times */
.tt-blocked-list { display: flex; flex-direction: column; gap: 8px; }
.tt-blocked-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--tt-bg); border-radius: var(--tt-radius-sm); }

/* Notifications */
.tt-notif-item { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--tt-border); }
.tt-notif-item:last-of-type { border-bottom: none; }

/* ============================================================
   Onboarding
   ============================================================ */

.tt-onboarding-body { background: var(--tt-bg); min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; }
.tt-onboarding-wrap { width: 100%; max-width: 520px; }
.tt-onboarding-logo { font-size: 24px; font-weight: 700; color: var(--tt-primary); text-align: center; margin-bottom: 32px; }
.tt-onboarding-logo span { color: var(--tt-secondary); }
.tt-onboarding-card { background: var(--tt-surface); border-radius: var(--tt-radius-lg); padding: 40px 36px; box-shadow: var(--tt-shadow-md); }
.tt-onboarding-title { font-size: 22px; font-weight: 700; color: var(--tt-text); margin-bottom: 8px; margin-top: 24px; }
.tt-onboarding-subtitle { font-size: 14px; color: var(--tt-text-muted); margin-bottom: 24px; }

/* Errores en onboarding */
.tt-onboarding-errors {
  background: var(--tt-danger-subtle);
  border: 1px solid var(--tt-danger-light);
  border-radius: var(--tt-radius);
  padding: 12px 16px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Alertas en layout onboarding */
.tt-onboarding-alert {
  border-radius: var(--tt-radius);
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tt-onboarding-alert-success { background: var(--tt-success-subtle); color: var(--tt-success); border: 1px solid var(--tt-success-light, #a3cfbb); }
.tt-onboarding-alert-danger  { background: var(--tt-danger-subtle);  color: var(--tt-danger);  border: 1px solid var(--tt-danger-light); }

.tt-onboarding-steps { display: flex; align-items: center; justify-content: center; gap: 0; }
.tt-step {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--tt-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--tt-text-muted); background: var(--tt-surface);
  flex-shrink: 0;
}
.tt-step.active { border-color: var(--tt-primary); color: var(--tt-primary); }
.tt-step.done   { border-color: var(--tt-success); background: var(--tt-success); color: #fff; }
.tt-step-line   { height: 2px; width: 48px; background: var(--tt-border); }
.tt-step-line.active { background: var(--tt-primary); }

/* Tarjetas de plan — paso de suscripción del onboarding */
.tt-onboarding-plan-card {
  display: flex; align-items: center; gap: 14px;
  border: 1.5px solid var(--tt-border); border-radius: 12px;
  padding: 16px 18px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.tt-onboarding-plan-card:has(input:checked),
.tt-onboarding-plan-card.selected {
  border-color: var(--tt-primary); background: var(--tt-primary-subtle);
}
.tt-onboarding-plan-card input[type="radio"] { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--tt-primary); }
.tt-onboarding-plan-card > div:nth-child(2) { flex: 1; min-width: 0; }
.tt-onboarding-plan-name { font-size: 15px; font-weight: 700; color: var(--tt-text); }
.tt-onboarding-plan-desc { font-size: 13px; color: var(--tt-text-muted); margin-top: 2px; }
.tt-onboarding-plan-price { font-size: 17px; font-weight: 700; color: var(--tt-text); white-space: nowrap; flex-shrink: 0; }
.tt-onboarding-plan-price span { font-size: 12px; font-weight: 500; color: var(--tt-text-muted); }

@media (max-width: 576px) {
  .tt-checkin-card, .tt-onboarding-card { padding: 24px 20px; }
  /* .tt-settings-tabs ya tiene overflow-x:auto siempre, ver arriba. */
}

/* ============================================================
   Clases faltantes / fixes
   ============================================================ */

/* Utilidades básicas */
.fw-600    { font-weight: 600 !important; }
.min-w-0   { min-width: 0 !important; }

/* Select estilizado (igual que tt-form-control) */
.tt-form-select {
  display: block;
  width: 100%;
  padding: 10px 36px 10px 12px;
  font-size: 14px;
  font-family: var(--tt-font);
  font-weight: 400;
  color: var(--tt-text);
  background-color: var(--tt-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%239EB3C2' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  border: 1.5px solid var(--tt-border);
  border-radius: var(--tt-radius-sm);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  line-height: 1.5;
}
.tt-form-select:focus {
  outline: none;
  border-color: var(--tt-primary);
  box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.12);
}
.tt-form-select.is-invalid { border-color: var(--tt-danger); }
.tt-form-select option { color: var(--tt-text); }

/* Botón outline (alias de secondary con borde más prominente) */
.tt-btn-outline {
  background: transparent;
  color: var(--tt-primary);
  border-color: var(--tt-primary);
}
.tt-btn-outline:hover {
  background: var(--tt-primary-subtle);
  color: var(--tt-primary);
}

/* Form hint text */
.tt-form-hint { font-size: 12px; color: var(--tt-text-muted); margin-top: 4px; }

/* Integrations page */
.tt-integration-info  { background: var(--tt-success-subtle); border-radius: var(--tt-radius); padding: 14px 16px; }
.tt-integration-features { border-left: 3px solid var(--tt-primary-light); padding-left: 14px; }

/* ── Acordeón de secciones (Settings) ─────────────────────────────────────── */
.tt-accordion { display: flex; flex-direction: column; gap: 12px; }
.tt-accordion-section {
  background: var(--tt-surface);
  border: 1.5px solid var(--tt-border);
  border-radius: var(--tt-radius-lg);
  overflow: hidden;
}
.tt-accordion-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--tt-text);
  transition: background 0.15s;
}
.tt-accordion-section summary::-webkit-details-marker { display: none; }
.tt-accordion-section summary:hover { background: var(--tt-bg); }
.tt-accordion-section[open] summary { border-bottom: 1.5px solid var(--tt-border); }
.tt-accordion-icon {
  font-size: 14px;
  color: var(--tt-text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.tt-accordion-section[open] .tt-accordion-icon { transform: rotate(180deg); }
.tt-accordion-body { padding: 20px; }
.tt-accordion-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1.5px solid var(--tt-border);
  background: var(--tt-bg);
}

/* ── Tabs responsive: icon-only en móvil pequeño ──────────────────────────── */
/* Contenedor con fade lateral para indicar scroll */
.tt-tabs-nav-scroll {
  position: relative;
}
.tt-tabs-nav-scroll::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  background: linear-gradient(to right, transparent, var(--tt-bg));
  pointer-events: none;
  display: none;
}
@media (max-width: 768px) {
  .tt-tabs-nav-scroll::after { display: block; }
}

/* En pantallas pequeñas: solo íconos (font-size:0 oculta texto, reset en icono) */
@media (max-width: 576px) {
  .tt-tabs-nav {
    justify-content: center;
  }
  .tt-tab-btn {
    font-size: 0;
    padding: 10px 12px;
    gap: 0;
  }
  .tt-tab-btn .bi {
    font-size: 18px;
    margin-right: 0 !important;
  }
  .tt-tab-btn .tt-nav-badge {
    font-size: 9px;
    padding: 1px 4px;
    margin-left: 2px;
  }
}

/* ── Dropzone de archivos ──────────────────────────────────────────── */
.tt-file-input {
  display: none;
}

.tt-dropzone {
  border: 2px dashed var(--tt-border);
  border-radius: 12px;
  background: var(--tt-surface-2);
  overflow: hidden;
  cursor: pointer;
}

.tt-dropzone--active {
  border-color: #9AA5B4;
  background: var(--tt-surface-2);
}

/* Variante compacta — usada en formularios de edición inline donde el
   dropzone grande de "Nueva nota"/"Nueva tarea" se ve sobredimensionado. */
.tt-dropzone-sm .tt-dropzone-placeholder { padding: 8px 12px; flex-direction: row; gap: 6px; }
.tt-dropzone-sm .tt-dropzone-title { font-size: 12px; color: var(--tt-text-muted); }

.tt-dropzone-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
}

.tt-dropzone-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--tt-surface-3);
  color: var(--tt-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 12px;
}

.tt-dropzone-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--tt-text);
  margin: 0 0 4px;
}

.tt-dropzone-link {
  color: var(--tt-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.tt-dropzone-hint {
  font-size: 11px;
  color: var(--tt-text-muted);
  margin: 0;
}

/* Preview con chips */
.tt-dropzone-preview {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tt-file-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
}

.tt-file-chip-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.tt-file-chip-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--tt-text);
}

.tt-file-chip-size {
  font-size: 11px;
  color: var(--tt-text-muted);
  flex-shrink: 0;
}

.tt-dropzone-change-btn {
  background: none;
  border: 1px dashed var(--tt-border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tt-text-muted);
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: color 0.15s, border-color 0.15s;
}

.tt-dropzone-change-btn:hover {
  color: var(--tt-primary);
  border-color: var(--tt-primary);
}

/* ── Notas clínicas ──────────────────────────────────────────────── */
.tt-notes-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--tt-border) transparent;
}
.tt-notes-scroll::-webkit-scrollbar { width: 4px; }
.tt-notes-scroll::-webkit-scrollbar-thumb { background: var(--tt-border); border-radius: 4px; }

.tt-notes-box {
  background: var(--tt-bg);
  border-radius: var(--tt-radius);
  padding: 16px;
  font-size: 14px;
  color: var(--tt-text);
  line-height: 1.6;
  border: 1px solid var(--tt-border-light);
}
.tt-card .tt-notes-box { margin: 0 20px 20px; }

.tt-note-card {
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius);
  padding: 16px;
  transition: box-shadow 0.15s;
}
.tt-note-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.07); }

/* Acciones secundarias (eliminar nota, editar/eliminar respuesta) — solo
   visibles al pasar el mouse, para reducir el ruido visual permanente. */
.tt-note-hover-action { opacity: 0; transition: opacity 0.15s; }
.tt-note-card:hover .tt-note-hover-action,
.tt-note-hover-action:focus { opacity: 1; }

/* Nuestros modales envuelven .modal-body + .modal-footer en un <form>, lo
   que rompe la cadena flex de Bootstrap: el <form> no es flex, así que ni
   se estira para llenar el modal fullscreen de mobile (deja un vacío
   enorme debajo del footer) ni fuerza el scroll interno cuando el
   contenido no cabe en viewports bajos (el botón de acción queda fuera de
   pantalla). Convertimos el <form> en el contenedor flex real y dejamos
   que sea .modal-body quien ocupe el espacio restante con scroll interno. */
.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
  flex-shrink: 0;
}
.modal-dialog-scrollable .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.tt-note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 6px;
}

.tt-note-category {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tt-note-category--session  { background: var(--tt-info-subtle); color: var(--tt-violet-text); }
.tt-note-category--personal { background: var(--tt-warning-subtle); color: var(--tt-warning-text); }
.tt-note-category--general  { background: var(--tt-success-subtle); color: var(--tt-success-text); }

.tt-note-content {
  font-size: 14px;
  color: var(--tt-text);
  line-height: 1.6;
}

/* Preview compacto de archivos adjuntos dentro de la tarjeta de nota —
   ver patient_notes/_archivos_compact. La vista completa va en el modal
   "Ver nota" (patient_notes/_archivos_full). */
.tt-note-archivos-compact { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.tt-note-archivo-thumb {
  width: 56px; height: 56px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--tt-border-light); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--tt-surface-2);
}
.tt-note-archivo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tt-note-archivo-thumb--file i { font-size: 20px; color: var(--tt-primary); }
.tt-note-archivo-thumb--more { font-size: 13px; font-weight: 700; color: var(--tt-text-muted); }

.tt-btn-danger-hover:hover { color: var(--tt-danger) !important; }

/* ── File upload area (modal boleta) ─────────────────────────────── */
.tt-file-upload-area {
  display: block;
  border: 2px dashed var(--tt-border);
  border-radius: var(--tt-radius);
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: var(--tt-surface);
}
.tt-file-upload-area:hover,
.tt-file-upload-area.drag-over {
  border-color: var(--tt-primary);
  background: rgba(91,141,239,0.04);
}
.tt-file-upload-names {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.tt-file-upload-name {
  font-size: 12px;
  color: var(--tt-text);
  background: var(--tt-bg);
  border-radius: 6px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Modal ───────────────────────────────────────────────────────── */
.tt-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: tt-fade-in 0.15s ease;
}
.tt-modal {
  background: var(--tt-surface);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  animation: tt-slide-up 0.2s ease;
}
.tt-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 20px 0;
  gap: 12px;
}
.tt-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--tt-text);
  margin: 0;
}
.tt-modal-close {
  color: var(--tt-text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 4px;
  flex-shrink: 0;
  text-decoration: none;
  transition: color 0.15s;
}
.tt-modal-close:hover { color: var(--tt-text); }
.tt-modal-body { padding: 20px; }

@keyframes tt-fade-in  { from { opacity: 0 } to { opacity: 1 } }
@keyframes tt-slide-up { from { transform: translateY(12px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

@media (max-width: 480px) {
  .tt-modal-backdrop { align-items: flex-end; padding: 0; }
  .tt-modal { border-radius: 16px 16px 0 0; max-width: 100%; max-height: 95vh; }
}

/* ── Feedback de navegación (Turbo) ─────────────────────────── */
/* Barra de progreso más visible y pronta (delay configurado en JS) */
.turbo-progress-bar {
  height: 3px;
  background: var(--tt-primary);
  box-shadow: 0 0 8px color-mix(in srgb, var(--tt-primary) 60%, transparent);
}

/* Elemento clickeado mientras llega la respuesta del servidor */
.tt-navigating {
  animation: tt-nav-pulse 0.9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes tt-nav-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.85; }
}

/* Mientras Turbo navega, el contenido se atenúa levemente (señal global
   de carga; el delay evita parpadeo en respuestas rápidas) */
html[aria-busy="true"] main.tt-page-content,
html[data-tt-loading] main.tt-page-content {
  opacity: 0.55;
  transition: opacity 0.2s ease 0.15s;
  pointer-events: none;
}
html[aria-busy="true"] body,
html[data-tt-loading] body { cursor: progress; }

/* Campanita de notificaciones */
.tt-notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--tt-danger);
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 20px;
  padding: 0 3px;
  animation: tt-badge-pulse 2s ease-in-out infinite;
}

/* Pulso sutil del contador de no-leídas + sacudida de la campanita cuando
   llega una notificación en vivo — la vista pasiva no llamaba la atención. */
@keyframes tt-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
  50%      { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); }
}
@keyframes tt-bell-ring {
  0%   { transform: rotate(0); }
  15%  { transform: rotate(18deg); }
  30%  { transform: rotate(-14deg); }
  45%  { transform: rotate(10deg); }
  60%  { transform: rotate(-7deg); }
  75%  { transform: rotate(4deg); }
  100% { transform: rotate(0); }
}
.tt-bell-ringing {
  display: inline-block;
  transform-origin: top center;
  animation: tt-bell-ring 0.8s ease-in-out 2;
}

/* Toast flotante de notificación en vivo */
#tt-toast-container {
  position: fixed;
  top: 70px;
  right: 16px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(360px, calc(100vw - 32px));
}
.tt-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-left: 4px solid var(--tt-primary);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.16);
  padding: 12px 14px;
  text-decoration: none;
  color: var(--tt-text);
  animation: tt-toast-in 0.25s ease;
}
.tt-toast:hover { color: var(--tt-text); box-shadow: 0 12px 34px rgba(0,0,0,0.22); }
.tt-toast-out { opacity: 0; transform: translateX(20px); transition: all 0.25s ease; }
@keyframes tt-toast-in {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.tt-toast-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--tt-primary-subtle);
  color: var(--tt-primary);
  font-size: 16px;
}
.tt-toast-body  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tt-toast-title { font-size: 13px; font-weight: 700; }
.tt-toast-desc  { font-size: 12px; color: var(--tt-text-muted); }
.tt-toast-close {
  background: none; border: none; color: var(--tt-text-light);
  font-size: 18px; line-height: 1; padding: 0 2px; cursor: pointer; flex-shrink: 0;
}
.tt-toast-close:hover { color: var(--tt-text); }

.tt-notif-menu {
  width: 340px;
  max-width: 90vw;
  padding: 0;
  overflow: hidden;
}

.tt-notif-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tt-border);
  font-weight: 600;
  font-size: 14px;
}

.tt-notif-mark-all {
  font-size: 12px;
  font-weight: 500;
  color: var(--tt-primary);
  text-decoration: none;
}

.tt-notif-mark-all:hover { text-decoration: underline; }

.tt-notif-list {
  max-height: 360px;
  overflow-y: auto;
}

.tt-notif-item.unread { background: var(--tt-primary-subtle); }

.tt-notif-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--tt-text);
  border-bottom: 1px solid var(--tt-border-light);
  position: relative;
}

.tt-notif-link:hover { background: var(--tt-surface-2); color: var(--tt-text); }

.tt-notif-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tt-primary-subtle);
  color: var(--tt-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}

.tt-notif-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tt-notif-title { font-size: 13px; font-weight: 600; }
.tt-notif-desc  { font-size: 12px; color: var(--tt-text-muted); }
.tt-notif-time  { font-size: 11px; color: var(--tt-text-light); }

.tt-notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tt-primary);
  flex-shrink: 0;
  margin-left: auto;
  margin-top: 6px;
}

.tt-notif-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--tt-text-muted);
}

.tt-notif-list-page .tt-notif-link { padding: 14px 16px; }

.tt-notif-menu-footer {
  border-top: 1px solid var(--tt-border);
  padding: 8px 12px;
}

.tt-notif-push-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  padding: 6px 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--tt-primary);
  cursor: pointer;
  border-radius: var(--tt-radius-sm);
}

.tt-notif-push-toggle:hover { background: var(--tt-primary-subtle); }

/* ── Login rediseñado (terapeuta) — basado en Figma ─────────── */
.ms-login-page {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow-y: auto;
  background: var(--tt-surface-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 24px;
  font-family: 'Work Sans', -apple-system, sans-serif;
}

.ms-login-blob { position: absolute; z-index: 0; pointer-events: none; opacity: 0.9; }
.ms-login-blob img { display: block; width: 100%; height: 100%; }
.ms-login-blob-lavanda { top: -120px; right: -140px; width: 480px; height: 480px; }
.ms-login-blob-verde   { top: 420px; left: -180px; width: 480px; height: 480px; }
.ms-login-blob-azul    { bottom: -80px; right: 10%; width: 320px; height: 320px; }

.ms-login-page.patient .ms-login-blob-lavanda { top: -100px; left: -160px; right: auto; width: 480px; height: 480px; }
.ms-login-page.patient .ms-login-blob-verde   { top: 260px; right: -60px; left: auto; width: 420px; height: 420px; }
.ms-login-page.patient .ms-login-blob-azul    { bottom: -100px; left: 50%; right: auto; transform: translateX(-60%); width: 360px; height: 360px; }

.ms-login-logo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.ms-login-logo-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(120deg, #7F77DD 15%, #5B8DEF 85%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ms-login-logo-icon img { width: 18px; height: 18px; }

.ms-login-logo-text {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: var(--tt-text);
}

.ms-login-card {
  position: relative;
  z-index: 1;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: 24px;
  box-shadow: 0 16px 16px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  padding: 40px;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ms-login-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  background: var(--tt-info-subtle);
  border: 1px solid var(--tt-info-border);
  color: var(--tt-violet-text);
  font-family: 'Spline Sans Mono', monospace;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 200px;
}

.ms-login-title {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: var(--tt-text);
  margin: 0 0 8px;
}

.ms-login-subtitle {
  font-size: 13px;
  line-height: 1.4;
  color: var(--tt-text-muted);
  margin: 0;
}

.ms-login-field { display: flex; flex-direction: column; gap: 6px; }

.ms-login-label {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--tt-text);
}

.ms-login-static-field {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: 12px;
  font-size: 14px;
  color: var(--tt-text);
}
.ms-login-static-field i { color: var(--tt-text-light); font-size: 14px; }

.ms-login-input-wrap { position: relative; }

.ms-login-input {
  height: 46px;
  width: 100%;
  padding: 0 16px;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: 12px;
  font-size: 14px;
  color: var(--tt-text);
  font-family: 'Work Sans', sans-serif;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ms-login-input::placeholder { color: var(--tt-text-light); }
.ms-login-input:focus {
  outline: none;
  border-color: #7f77dd;
  box-shadow: 0 0 0 3px rgba(127,119,221,0.15);
}
.ms-login-input.has-toggle { padding-right: 44px; }

.ms-login-toggle-visibility {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  color: var(--tt-text-light);
  cursor: pointer;
  line-height: 1;
}
.ms-login-toggle-visibility:hover { color: var(--tt-text-muted); }

.ms-login-row { display: flex; align-items: center; justify-content: space-between; }

.ms-login-remember { display: flex; align-items: center; gap: 8px; }
.ms-login-remember input[type="checkbox"] {
  width: 18px; height: 18px;
  border: 1px solid var(--tt-border);
  border-radius: 4px;
  accent-color: #4338ca;
}
.ms-login-remember label { font-size: 13px; color: var(--tt-text-muted); margin: 0; }

.ms-login-forgot { font-size: 13px; font-weight: 500; color: var(--tt-violet-text); text-decoration: none; }
.ms-login-forgot:hover { text-decoration: underline; }

.ms-login-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(120deg, #7F77DD 15%, #5B8DEF 85%);
  color: #fff;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 14px 24px;
  border: none;
  border-radius: 999px;
  box-shadow: 0 10px 12px rgba(67,56,202,0.15);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ms-login-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 20px rgba(67,56,202,0.22); }

.ms-login-divider { display: flex; align-items: center; gap: 16px; }
.ms-login-divider-line { flex: 1; height: 1px; background: var(--tt-surface-3); }
.ms-login-divider-text {
  font-family: 'Spline Sans Mono', monospace;
  font-size: 11px;
  color: var(--tt-text-light);
}

.ms-login-footer { font-size: 13px; color: var(--tt-text-muted); text-align: center; margin: 0; }
.ms-login-footer a { color: var(--tt-violet-text); font-weight: 600; text-decoration: none; }
.ms-login-footer a:hover { text-decoration: underline; }

.ms-login-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--tt-danger-subtle);
  color: var(--tt-danger-text);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
}

@media (max-width: 540px) {
  .ms-login-card { padding: 28px 24px; }
  .ms-login-blob { display: none; }
}

/* ── KPI cards (paneles admin: dashboard, suscripciones, etc.) ──────────
   Antes vivía solo dentro de admin/dashboard/index.html.erb como <style>
   inline — por eso cualquier otra vista admin que reusara las mismas
   clases (ej. admin/subscriptions/index.html.erb) no tenía ningún estilo
   real aplicado. Acá queda compartido para todo el panel. */
.tt-kpi-card {
  background: var(--tt-card-bg);
  border: 1px solid var(--tt-border);
  border-radius: 14px;
  padding: 20px;
  height: 100%;
  transition: box-shadow 0.15s, transform 0.15s;
  /* El tamaño del número se ajusta al ancho de la TARJETA (no de la
     pantalla): con col-6 en mobile, "$196.810" a 36px se salía (2026-10-12). */
  container-type: inline-size;
  min-width: 0;
  overflow: hidden;
}
.tt-kpi-card-link:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.tt-kpi-card-alert {
  border-left: 3px solid #F59E0B;
}
.tt-kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.tt-kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--tt-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  /* Sin esto, un flex item no puede achicarse más allá del ancho de su
     palabra más larga (min-width:auto implícito) — en tarjetas angostas
     de mobile eso empuja el ícono fuera de la tarjeta ("Consentimientos
     informados" no cabía y desbordaba). */
  min-width: 0;
  overflow-wrap: break-word;
}
.tt-kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.tt-kpi-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #F59E0B;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 5px;
  line-height: 1.4;
}
.tt-kpi-value {
  font-size: clamp(20px, 17cqi, 36px);
  font-weight: 800;
  color: var(--tt-text);
  line-height: 1.05;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.tt-kpi-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tt-kpi-trend {
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 2px;
}
.tt-kpi-trend-up   { color: var(--tt-success-text); }
.tt-kpi-trend-warn { color: #D97706; }
.tt-kpi-trend-neutral { color: var(--tt-text-muted); }
.tt-kpi-detail {
  font-size: 12px;
  color: var(--tt-text-muted);
  padding-left: 8px;
  border-left: 1px solid var(--tt-border);
}

@media (max-width: 576px) {
  /* Con col-6 el ancho de la tarjeta apenas alcanza para etiquetas de una
     palabra (Terapeutas, Solicitudes) al tamaño normal — se cortaban a
     mitad de palabra. Achicar tamaño/tracking evita el corte sin tener
     que apilar las tarjetas en una sola columna. */
  .tt-kpi-label { font-size: 10.5px; letter-spacing: 0.2px; hyphens: auto; }
  .tt-kpi-card { padding: 14px; }
  .tt-kpi-header { align-items: flex-start; margin-bottom: 10px; }
  .tt-kpi-icon { width: 30px; height: 30px; font-size: 14px; border-radius: 8px; }
  .tt-kpi-trend, .tt-kpi-detail { font-size: 11px; }
  .tt-kpi-detail { padding-left: 0; border-left: 0; flex-basis: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   Modal "Recordar sesiones por WhatsApp" (2026-10-06)
   appointments/_whatsapp_reminders_modal + whatsapp_reminders.html.erb
   ══════════════════════════════════════════════════════════════════════ */
.tt-wr-open { background: #25D366; color: #fff; border: 1px solid #25D366; font-weight: 600; }
.tt-wr-open:hover, .tt-wr-open:focus-visible { background: #1EBE5D; border-color: #1EBE5D; color: #fff; }

.tt-wr-dialog { max-width: 560px; }
.tt-wr-modal { border: none; border-radius: 20px; overflow: hidden; }
.tt-wr-loading { padding: 56px 24px; text-align: center; color: var(--tt-text-muted); font-size: 14px; }

.tt-wr-header { border: none; padding: 22px 24px 8px; align-items: flex-start; }
.tt-wr-title { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; color: var(--tt-text); margin: 0; }
.tt-wr-title-icon {
  width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center;
  background: var(--tt-success-subtle); color: #1EBE5D; font-size: 18px;
}
.tt-wr-sub { margin: 8px 0 0; font-size: 13.5px; color: var(--tt-text-muted); line-height: 1.5; }

.tt-wr-tabs { display: flex; gap: 8px; padding: 10px 24px 4px; }
.tt-wr-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--tt-border);
  background: var(--tt-surface); color: var(--tt-text-muted); font-size: 14px; font-weight: 600;
  transition: background .15s, border-color .15s, color .15s;
}
.tt-wr-tab:hover { border-color: var(--tt-primary); color: var(--tt-text); }
.tt-wr-tab:focus-visible { outline: 2px solid var(--tt-primary); outline-offset: 2px; }
.tt-wr-tab.is-active { background: var(--tt-primary-subtle); border-color: var(--tt-primary); color: var(--tt-primary-dark); }
.tt-wr-tab-date { font-weight: 500; font-size: 12.5px; opacity: .8; text-transform: capitalize; }
.tt-wr-tab-count {
  min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-variant-numeric: tabular-nums;
  background: var(--tt-border-light); color: var(--tt-text-muted);
}
.tt-wr-tab.is-active .tt-wr-tab-count { background: var(--tt-primary); color: #fff; }

.tt-wr-body { padding: 12px 24px 8px; }

.tt-wr-progress { margin-bottom: 12px; }
.tt-wr-progress-text { font-size: 13px; font-weight: 600; color: var(--tt-text-muted); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.tt-wr-progress-bar { height: 6px; border-radius: 99px; background: var(--tt-border-light); overflow: hidden; }
.tt-wr-progress-bar span { display: block; height: 100%; width: 0; background: #25D366; border-radius: 99px; transition: width .3s ease; }
.tt-wr-progress.is-complete .tt-wr-progress-text { color: #1A9E50; }

.tt-wr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tt-wr-item {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--tt-border); border-radius: 14px; background: var(--tt-surface);
  transition: background .2s, border-color .2s;
}
.tt-wr-item.is-reminded { background: var(--tt-surface-2); border-color: var(--tt-success-border); }
.tt-wr-time { font-size: 16px; font-weight: 800; color: var(--tt-text); font-variant-numeric: tabular-nums; }
.tt-wr-name { font-size: 14.5px; font-weight: 700; color: var(--tt-text); line-height: 1.3; }
.tt-wr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--tt-text-muted); }
.tt-wr-guardian { display: inline-flex; align-items: center; }
.tt-wr-status { font-size: 12px; color: #1A9E50; font-weight: 600; margin-top: 4px; }
.tt-wr-status:empty { display: none; }

.tt-wr-send {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 8px 14px; border-radius: 10px; border: 1px solid #25D366;
  background: #25D366; color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: background .15s, color .15s;
}
.tt-wr-send:hover { background: #1EBE5D; border-color: #1EBE5D; }
.tt-wr-send:focus-visible { outline: 2px solid #1EBE5D; outline-offset: 2px; }
.tt-wr-item.is-reminded .tt-wr-send { background: transparent; color: #1A9E50; border-color: #9BDDB4; }
.tt-wr-item.is-reminded .tt-wr-send:hover { background: var(--tt-success-subtle); }

.tt-wr-missing {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; font-weight: 600;
  color: var(--tt-text-muted); text-decoration: none; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--tt-border);
}
.tt-wr-missing:hover { color: var(--tt-primary-dark); border-color: var(--tt-primary); }

.tt-wr-empty { text-align: center; padding: 36px 12px; color: var(--tt-text-muted); }
.tt-wr-empty i { font-size: 28px; color: var(--tt-text-light); }
.tt-wr-empty p { margin: 8px 0 0; font-size: 14px; }

.tt-wr-footer { padding: 10px 24px 18px; font-size: 12.5px; color: var(--tt-text-muted); }

@media (max-width: 575px) {
  .tt-wr-header, .tt-wr-body { padding-left: 16px; padding-right: 16px; }
  .tt-wr-tabs { padding-left: 16px; padding-right: 16px; }
  .tt-wr-footer { padding-left: 16px; padding-right: 16px; }
  .tt-wr-item { grid-template-columns: 44px 1fr; }
  .tt-wr-action { grid-column: 1 / -1; }
  .tt-wr-send, .tt-wr-missing { width: 100%; justify-content: center; padding: 11px 14px; }
  .tt-wr-tab-date { display: none; }
}
.tt-wr-warning {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 5px;
  font-size: 12px; font-weight: 600; color: var(--tt-warning-text); text-decoration: none;
}
.tt-wr-warning:hover { color: var(--tt-warning-text); text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════
   Ficha clínica → Registro de atenciones (patients/_clinical_record_entries)
   ══════════════════════════════════════════════════════════════════════ */
.ficha-entries-hint {
  display: flex; align-items: flex-start; gap: 8px; margin: 0 20px; padding: 10px 14px;
  border-radius: 10px; background: var(--tt-primary-subtle); color: var(--tt-primary-dark);
  font-size: 13px; line-height: 1.5;
}
.ficha-entries-hint i { margin-top: 2px; }
.ficha-entries-empty { text-align: center; padding: 28px 20px 30px; color: var(--tt-text-muted); font-size: 13.5px; }
.ficha-entries-empty i { font-size: 26px; color: var(--tt-text-light); display: block; margin-bottom: 8px; }

/* Resumen: última atención (abre el visor) */
.ficha-last-entry {
  display: flex; flex-direction: column; gap: 4px; width: calc(100% - 40px); margin: 14px 20px 20px;
  padding: 14px 16px; text-align: left; border: 1px solid var(--tt-border); border-radius: 12px;
  background: var(--tt-surface); color: var(--tt-text); cursor: pointer; transition: var(--tt-transition-fast);
}
.ficha-last-entry:hover { border-color: var(--tt-primary); box-shadow: var(--tt-shadow-sm); }
.ficha-last-entry:focus-visible { outline: 2px solid var(--tt-primary); outline-offset: 2px; }
.ficha-last-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tt-text-muted); }
.ficha-last-date { font-size: 14px; font-weight: 600; }
.ficha-last-text { font-size: 13.5px; line-height: 1.55; color: var(--tt-text-muted); }
.ficha-last-cta { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--tt-primary-dark); }

/* ── Visor de atenciones (modal maestro-detalle) ── */
.av-modal { border: 0; border-radius: var(--tt-radius-lg); overflow: hidden; }
#attention-viewer .modal-dialog { max-width: 1140px; }
.av-header {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 22px; border-bottom: 1px solid var(--tt-border); background: var(--tt-surface);
}
.av-title { font-size: 18px; font-weight: 700; margin: 0; color: var(--tt-text); }
.av-sub { margin: 2px 0 0; font-size: 13px; color: var(--tt-text-muted); }
.av-layout { display: grid; grid-template-columns: 320px 1fr; height: min(74vh, 760px); }

.av-index { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--tt-border); background: var(--tt-bg); }
.av-filters { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--tt-border-light); }
.av-search { position: relative; flex: 1; min-width: 0; }
.av-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--tt-text-light); font-size: 13px; }
.av-search input, .av-year {
  width: 100%; height: 34px; border: 1px solid var(--tt-border); border-radius: 8px;
  background: var(--tt-surface); font-size: 13px; color: var(--tt-text);
}
.av-search input { padding: 0 10px 0 30px; }
.av-year { width: auto; padding: 0 8px; }
.av-search input:focus, .av-year:focus { outline: none; border-color: var(--tt-primary); box-shadow: 0 0 0 3px var(--tt-primary-subtle); }
.av-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.av-item {
  display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 10px 12px; text-align: left;
  border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--tt-text); cursor: pointer;
}
.av-item:hover { background: var(--tt-surface); border-color: var(--tt-border-light); }
.av-item:focus-visible { outline: 2px solid var(--tt-primary); outline-offset: -2px; }
.av-item.is-active { background: var(--tt-surface); border-color: var(--tt-primary); box-shadow: var(--tt-shadow-sm); }
.av-item-top { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.av-item-num { font-size: 11px; font-weight: 700; color: var(--tt-text-light); min-width: 24px; }
.av-item-date { font-size: 14px; font-weight: 600; }
.av-item-time { margin-left: auto; font-size: 12px; color: var(--tt-text-muted); }
.av-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 32px; font-size: 12px; color: var(--tt-text-muted); }
.av-item-preview { padding-left: 32px; font-size: 12.5px; line-height: 1.4; color: var(--tt-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-item.is-active .av-item-num { color: var(--tt-primary-dark); }
.av-item.is-voided .av-item-preview { text-decoration: line-through; }
.av-flag { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; background: var(--tt-surface-2); color: var(--tt-text-muted); }
.av-flag-voided { background: var(--tt-danger-subtle); color: var(--tt-danger-text); }
.av-noresults { padding: 20px; text-align: center; font-size: 13px; color: var(--tt-text-muted); }

.av-detail { overflow-y: auto; min-height: 0; background: var(--tt-surface); }
.av-pane { padding: 24px 32px 20px; display: flex; flex-direction: column; gap: 18px; min-height: 100%; }
.av-pane[hidden], .av-list li[hidden] { display: none; }
.av-back { align-self: flex-start; border: 0; background: none; padding: 0; font-size: 13px; font-weight: 600; color: var(--tt-primary-dark); }
.av-pane-num { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tt-primary-dark); }
.av-pane-title { font-size: 20px; font-weight: 700; margin: 4px 0 8px; color: var(--tt-text); text-wrap: balance; }
.av-pane-title::first-letter { text-transform: uppercase; }
.av-pane-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.av-pane-link { font-size: 13px; font-weight: 600; color: var(--tt-primary-dark); text-decoration: none; }
.av-pane-link:hover { text-decoration: underline; }
.av-voided { padding: 10px 14px; border-radius: 10px; background: var(--tt-danger-subtle); color: var(--tt-danger-text); font-size: 13px; line-height: 1.5; }
.av-body { max-width: 68ch; font-size: 15px; line-height: 1.7; color: var(--tt-text); }
.av-body p:last-child { margin-bottom: 0; }
.av-body.is-voided { color: var(--tt-text-muted); }
.av-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding-top: 14px; border-top: 1px solid var(--tt-border-light); }
.av-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tt-text-light); }
.av-facts dd { margin: 2px 0 0; font-size: 13.5px; color: var(--tt-text); }
.av-history summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--tt-text-muted); }
.av-version { margin-top: 10px; padding: 10px 14px; border-left: 2px solid var(--tt-border); background: var(--tt-bg); border-radius: 0 8px 8px 0; }
.av-version-head { font-size: 12px; font-weight: 600; color: var(--tt-text-muted); margin-bottom: 4px; }
.av-version-body { font-size: 13.5px; line-height: 1.6; color: var(--tt-text-muted); }
.av-version-body p:last-child { margin-bottom: 0; }
.av-nav { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--tt-border-light); }
.av-nav-hint { font-size: 12px; color: var(--tt-text-light); }

@media (max-width: 991.98px) {
  .av-layout { display: block; height: calc(100vh - 70px); }
  .av-index, .av-detail { height: 100%; border-right: 0; }
  .av-layout .av-detail { display: none; }
  .av-layout.show-detail .av-index { display: none; }
  .av-layout.show-detail .av-detail { display: block; }
  .av-pane { padding: 16px 18px; }
  .av-pane-title { font-size: 18px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Onboarding → selector Mensual / Anual (onboarding/subscriptions/_billing_cycle_selector)
   ══════════════════════════════════════════════════════════════════════ */
.tt-cycle-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tt-cycle-option {
  position: relative; display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  border: 1.5px solid var(--tt-border); border-radius: 12px; padding: 14px; background: var(--tt-surface);
  transition: border-color .15s, background .15s;
}
.tt-cycle-option:has(input:checked) { border-color: var(--tt-primary); background: var(--tt-primary-subtle); }
.tt-cycle-option:has(input:focus-visible) { outline: 2px solid var(--tt-primary); outline-offset: 2px; }
.tt-cycle-option input { margin-top: 3px; width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--tt-primary); }
.tt-cycle-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tt-cycle-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tt-cycle-name { font-size: 15px; font-weight: 700; color: var(--tt-text); }
.tt-cycle-badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: var(--tt-success-subtle); color: var(--tt-success-text);
}
.tt-cycle-price { font-size: 22px; font-weight: 800; color: var(--tt-text); font-variant-numeric: tabular-nums; }
.tt-cycle-price small { font-size: 13px; font-weight: 500; color: var(--tt-text-muted); }
.tt-cycle-note { font-size: 12px; line-height: 1.45; color: var(--tt-text-muted); }
@media (max-width: 480px) { .tt-cycle-options { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════
   Admin → embudo de conversión (admin/dashboard/_funnel)
   ══════════════════════════════════════════════════════════════════════ */
.tt-funnel-note { font-size: 11.5px; color: var(--tt-text-muted); }
.tt-funnel { list-style: none; margin: 0; padding: 14px 20px 6px; display: flex; flex-direction: column; gap: 4px; }
.tt-funnel-link { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; color: inherit; text-decoration: none; }
.tt-funnel-link:hover { background: var(--tt-surface-2); }
.tt-funnel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tt-funnel-label { font-size: 13.5px; font-weight: 600; color: var(--tt-text); }
.tt-funnel-value { font-size: 20px; font-weight: 800; color: var(--tt-text); font-variant-numeric: tabular-nums; line-height: 1; }
.tt-funnel-track { height: 10px; border-radius: 999px; background: var(--tt-surface-2); overflow: hidden; }
.tt-funnel-bar { display: block; height: 100%; border-radius: 999px; background: var(--tt-gradient-primary); }
.tt-funnel-step:last-child .tt-funnel-bar { background: #0D7A4A; }
.tt-funnel-rate { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--tt-text-muted); }
.tt-funnel-rate.is-low { color: var(--tt-warning-text); font-weight: 600; }
.tt-funnel-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 20px 18px; padding-top: 12px; border-top: 1px solid var(--tt-border-light); font-size: 13px; color: var(--tt-text-muted); }
.tt-funnel-total strong { font-size: 20px; color: var(--tt-primary-dark); font-variant-numeric: tabular-nums; }

/* Pie de listas paginadas del admin: total y página actual. */
.tt-list-footer { padding: 12px 20px; border-top: 1px solid var(--tt-border-light); font-size: 12px; color: var(--tt-text-muted); }

/* ══════════════════════════════════════════════════════════════════════
   Admin → solicitudes de acceso (admin/access_requests, rediseño 2026-10-12)
   ══════════════════════════════════════════════════════════════════════ */
.tt-req-tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--tt-border); overflow-x: auto; scrollbar-width: none; }
.tt-req-tabs::-webkit-scrollbar { display: none; }
.tt-req-tab {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 13px 12px 11px;
  border-bottom: 2px solid transparent; color: var(--tt-text-muted); font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.tt-req-tab:hover { color: var(--tt-text); }
.tt-req-tab-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--tt-surface-2); font-size: 11.5px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.tt-req-tab.is-active { font-weight: 700; color: var(--tt-req-accent); border-bottom-color: var(--tt-req-accent); }
.tt-req-tab.is-active .tt-req-tab-count { background: var(--tt-req-accent); color: #fff; }
.tt-req-tab-pending              { --tt-req-accent: #B45309; }
.tt-req-tab-pending_registration { --tt-req-accent: #6D28D9; }
.tt-req-tab-approved             { --tt-req-accent: #15803D; }
.tt-req-tab-rejected             { --tt-req-accent: #B91C1C; }

.tt-req-grid { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 16px; }
@media (min-width: 992px) { .tt-req-grid { grid-template-columns: 1fr 1fr; padding: 20px; } }

.tt-req {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px;
  border: 1px solid var(--tt-border); border-radius: 14px; background: var(--tt-surface);
}
.tt-req.is-duplicate { border-color: var(--tt-danger-border); background: var(--tt-surface-2); }
.tt-req-head { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 12px; }
.tt-req-avatar {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--tt-primary-dark); background: var(--tt-primary-subtle);
}
.tt-req-pending  .tt-req-avatar { color: var(--tt-warning-text); background: var(--tt-warning-subtle); }
.tt-req-invited  .tt-req-avatar { color: var(--tt-violet-text); background: var(--tt-violet-subtle); }
.tt-req-approved .tt-req-avatar { color: var(--tt-success-text); background: var(--tt-success-subtle); }
.tt-req-rejected .tt-req-avatar { color: var(--tt-text-muted); background: var(--tt-surface-2); }
.tt-req-who { min-width: 0; }
.tt-req-name { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--tt-text); overflow-wrap: anywhere; }
.tt-req-meta { margin: 2px 0 0; font-size: 12.5px; color: var(--tt-text-muted); }
.tt-req-dot { margin: 0 5px; }
.tt-req-when { font-size: 11.5px; color: var(--tt-text-light); white-space: nowrap; padding-top: 3px; }
.tt-req-contact { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-req-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 10px; border-radius: 8px;
  border: 1px solid var(--tt-border); background: var(--tt-bg); color: var(--tt-text); font-size: 12.5px; text-decoration: none;
}
.tt-req-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tt-req-chip:hover { border-color: var(--tt-primary); color: var(--tt-primary-dark); }
.tt-req-chip-wa i { color: #16A34A; }
.tt-req-message {
  margin: 0; padding: 10px 12px; border-left: 3px solid var(--tt-border); border-radius: 0 8px 8px 0;
  background: var(--tt-bg); font-size: 13px; line-height: 1.55; color: var(--tt-text-muted);
}
.tt-req-status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; font-size: 12.5px; color: var(--tt-text-muted); }
.tt-req-status.is-warning { color: var(--tt-warning-text); }
.tt-req-status.is-danger  { color: var(--tt-danger-text); font-weight: 600; }
.tt-req-status.is-success { color: var(--tt-success-text); }
.tt-req-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--tt-border-light); }
.tt-req-action-main { flex: 1; }
.tt-req-action-main .tt-btn { width: 100%; justify-content: center; }
.tt-req-reject { color: var(--tt-danger-text); }
.tt-req-reject:hover { background: var(--tt-danger-subtle); color: var(--tt-danger-text); }
@media (max-width: 400px) { .tt-req-head { grid-template-columns: auto 1fr; } .tt-req-when { grid-column: 2; padding-top: 0; } }

/* Admin → gráficos del panel (admin_charts_controller) y títulos de sección. */
.tt-chart-box { position: relative; height: 260px; padding: 12px 16px 16px; }
@media (max-width: 576px) { .tt-chart-box { height: 220px; padding: 10px 10px 12px; } }
.tt-section-label { font-size: 13px; font-weight: 700; color: var(--tt-text-muted); text-transform: uppercase; letter-spacing: .5px; margin: 4px 0 12px; }

/* ══════════════════════════════════════════════════════════════════════
   Configuración → Perfil público → "Para que te encuentren en el directorio"
   ══════════════════════════════════════════════════════════════════════ */
.tt-dir-box { border: 1px solid var(--tt-border); border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; }
.tt-dir-box-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.tt-dir-box-title { font-size: 14px; font-weight: 700; color: var(--tt-text); }
.tt-dir-meter {
  flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--tt-primary) var(--pct), var(--tt-surface-2) 0);
}
.tt-dir-meter span { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--tt-surface); font-size: 12.5px; font-weight: 800; color: var(--tt-text); font-variant-numeric: tabular-nums; }
.tt-dir-missing { margin: 0 0 14px; padding: 8px 12px; border-radius: 8px; background: var(--tt-warning-subtle); font-size: 12.5px; color: var(--tt-warning-text); }
.tt-chip-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-chip-check { position: relative; cursor: pointer; }
.tt-chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.tt-chip-check span {
  display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--tt-border); background: var(--tt-surface); color: var(--tt-text-muted); transition: var(--tt-transition-fast);
}
.tt-chip-check input:checked + span { border-color: var(--tt-primary); background: var(--tt-primary); color: #fff; }
.tt-chip-check input:focus-visible + span { outline: 2px solid var(--tt-primary); outline-offset: 2px; }

/* Admin → ficha de terapeuta → estadísticas del perfil público (ProfileStats). */
.tt-pstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); background: var(--tt-surface); border-bottom: 1px solid var(--tt-border-light); }
.tt-pstat { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; min-width: 0; box-shadow: inset -1px -1px 0 var(--tt-border-light); }
.tt-pstat-value { font-size: 24px; font-weight: 800; color: var(--tt-text); font-variant-numeric: tabular-nums; line-height: 1; }
.tt-pstat-label { font-size: 12px; color: var(--tt-text-muted); }
.tt-pstats-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 20px; }
.tt-pstats-sources-title { font-size: 12px; font-weight: 600; color: var(--tt-text-muted); margin-right: 4px; }
.tt-pstats-empty { margin: 0; padding: 12px 20px; font-size: 12.5px; color: var(--tt-text-muted); }

/* ══════════════════════════════════════════════════════════════════════
   Admin → ficha de terapeuta (admin/therapists/show, reorganizada 2026-10-12)
   ══════════════════════════════════════════════════════════════════════ */
.tt-tp-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--tt-text-muted); text-decoration: none; }
.tt-tp-back:hover { color: var(--tt-primary-dark); }
.tt-tp-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.tt-tp-id { flex: 1; min-width: 240px; }
.tt-tp-name { margin: 0; font-size: 24px; font-weight: 800; color: var(--tt-text); line-height: 1.2; }
.tt-tp-sub { margin: 4px 0 10px; font-size: 13.5px; color: var(--tt-text-muted); overflow-wrap: anywhere; }
.tt-tp-sub a { color: inherit; }
.tt-tp-dot { margin: 0 6px; color: var(--tt-text-light); }
.tt-tp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-tp-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.tt-tp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.tt-tp-kpi {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; min-width: 0;
  border: 1px solid var(--tt-border); border-radius: 12px; background: var(--tt-surface); color: inherit; text-decoration: none;
}
a.tt-tp-kpi:hover { border-color: var(--tt-primary); }
.tt-tp-kpi-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tt-text-muted); }
.tt-tp-kpi-value { font-size: 22px; font-weight: 800; color: var(--tt-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-tp-kpi-value small { font-size: 13px; font-weight: 500; color: var(--tt-text-muted); }
.tt-tp-kpi-note { font-size: 12px; color: var(--tt-text-muted); }
@media (max-width: 768px) { .tt-tp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tt-tp-name { font-size: 20px; } }

.tt-tp-tab { --tt-req-accent: var(--tt-primary-dark); }
.tt-tp-body { padding: 6px 20px 20px; }
.tt-tp-body > section { padding: 16px 0; }
.tt-tp-body > section + section { border-top: 1px solid var(--tt-border-light); }
.tt-tp-h { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tt-text-muted); }
.tt-tp-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 24px; margin: 0; }
.tt-tp-facts dt { font-size: 12px; font-weight: 600; color: var(--tt-text-muted); }
.tt-tp-facts dd { margin: 2px 0 0; font-size: 14px; color: var(--tt-text); }
.tt-tp-alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tt-tp-alert { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; }
.tt-tp-alert > span { flex: 1; min-width: 0; }
.tt-tp-alert i { font-size: 16px; flex-shrink: 0; }
.tt-tp-alert.is-danger  { background: var(--tt-danger-subtle); color: var(--tt-danger-text); }
.tt-tp-alert.is-warning { background: var(--tt-warning-subtle); color: var(--tt-warning-text); }
.tt-tp-alert.is-info    { background: var(--tt-primary-subtle); color: var(--tt-primary-dark); }
.tt-tp-ok { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--tt-success-text); }
.tt-tp-empty { margin: 0; font-size: 13.5px; color: var(--tt-text-muted); }
.tt-tp-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.tt-tp-table th { font-size: 11px; font-weight: 600; color: var(--tt-text-muted); text-transform: uppercase; letter-spacing: .5px; border: none; background: var(--tt-bg); }
.tt-tp-table td { vertical-align: middle; font-size: 14px; }
.tt-pstats-boxed { border: 1px solid var(--tt-border-light); border-radius: 12px; overflow: hidden; }
.tt-tp-registro { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tt-tp-registro-num { font-size: 16px; font-weight: 700; color: var(--tt-text); }
.tt-tp-reflection { padding: 12px 0; }
.tt-tp-reflection + .tt-tp-reflection { border-top: 1px solid var(--tt-border-light); }
.tt-tp-danger { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding: 14px 20px; border: 1px dashed var(--tt-danger-border); border-radius: 12px; }
@media (max-width: 576px) {
  .tt-tp-dot { display: none; }
  .tt-tp-sub a, .tt-tp-sub .tt-tp-phone { display: block; }
}

/* Admin → lista de terapeutas → estado en el directorio público. */
.tt-dir-badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--tt-surface-2); color: var(--tt-text-muted); }
.tt-dir-badge.is-listed { background: var(--tt-success-subtle); color: var(--tt-success-text); }
.tt-dir-badge.is-hidden { background: var(--tt-warning-subtle); color: var(--tt-warning-text); }

/* Dashboard de la terapeuta → aviso de perfil para el directorio. */
.tt-dir-nudge { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 16px; border: 1px solid var(--tt-info-border); border-radius: 12px; background: var(--tt-primary-subtle); font-size: 13.5px; color: var(--tt-text); }
.tt-dir-nudge[hidden] { display: none; }
.tt-dir-nudge-meter { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--tt-primary) var(--pct), var(--tt-surface) 0); }
.tt-dir-nudge-meter span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--tt-primary-subtle); font-size: 11.5px; font-weight: 800; color: var(--tt-primary-dark); }
.tt-dir-nudge-text { flex: 1; min-width: 0; line-height: 1.5; }
.tt-dir-nudge-sub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--tt-text-muted); }
.tt-dir-nudge-actions { display: flex; gap: 6px; flex-shrink: 0; }
@media (max-width: 640px) { .tt-dir-nudge { flex-wrap: wrap; } .tt-dir-nudge-actions { width: 100%; } }

/* Gráfico de barras de /admin/asistente (preguntas por día, apiladas). */
.tt-assistant-bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.tt-assistant-bar { flex: 1; height: 100%; display: flex; flex-direction: column-reverse; min-width: 4px; }
.tt-assistant-bar span { display: block; border-radius: 2px; }
.tt-assistant-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; vertical-align: middle; }
.tt-assistant-table th:first-child, .tt-assistant-table td:first-child { padding-left: 16px; }
.tt-assistant-table th:last-child, .tt-assistant-table td:last-child { padding-right: 16px; }

/* ── Dictado por voz en las notas (dictation_controller.js) ────────── */
.ms-dictation { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 0; }
.ms-dictation-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--tt-border); background: var(--tt-surface);
  color: var(--tt-text); font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ms-dictation-btn:hover { border-color: var(--tt-primary); color: var(--tt-primary); }
.ms-dictation-btn:focus-visible { outline: 2px solid var(--tt-primary); outline-offset: 2px; }
.ms-dictation-btn i { font-size: 13px; }
.ms-dictation-btn.is-listening { background: var(--tt-danger-subtle); border-color: #F87171; color: var(--tt-danger-text); }
.ms-dictation-btn.is-listening i { animation: ms-dictation-pulse 1.2s ease-in-out infinite; }
@keyframes ms-dictation-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ms-dictation-btn.is-listening i { animation: none; } }
.ms-dictation-status { font-size: 12px; color: var(--tt-text-muted); }
.ms-dictation-notice {
  margin-top: 10px; padding: 12px 14px; border-radius: 10px;
  background: var(--tt-info-subtle); border: 1px solid var(--tt-info-border); color: var(--tt-navy);
  font-size: 12.5px; line-height: 1.55;
}
.ms-dictation-notice p { margin: 0 0 8px; }
.ms-dictation-notice-title { font-weight: 700; font-size: 13px; }
.ms-dictation-notice-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Selector de apariencia (Sistema / Claro / Oscuro) ───────── */
.tt-theme-picker {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--tt-surface-2);
  border: 1px solid var(--tt-border);
  border-radius: 999px;
}
.tt-theme-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--tt-text-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--tt-transition-fast);
}
.tt-theme-option:hover { color: var(--tt-text); }
.tt-theme-option.active {
  background: var(--tt-surface);
  color: var(--tt-primary);
  box-shadow: var(--tt-shadow-sm);
}
.tt-theme-option:focus-visible { outline: 2px solid var(--tt-primary); outline-offset: 2px; }

/* ── Modo oscuro: ajustes de componentes ─────────────────────
   Lo que no se resuelve solo con los tokens: utilidades de Bootstrap que
   fijan blanco/negro, componentes de terceros (FullCalendar) y detalles
   como imágenes o bordes que en oscuro necesitan otro trato. */
[data-bs-theme="dark"] .bg-white { background-color: var(--tt-surface) !important; }
[data-bs-theme="dark"] .bg-light { background-color: var(--tt-surface-2) !important; }
[data-bs-theme="dark"] .text-dark { color: var(--tt-text) !important; }
[data-bs-theme="dark"] .text-black { color: var(--tt-text) !important; }
[data-bs-theme="dark"] .btn-light {
  --bs-btn-bg: var(--tt-surface-2); --bs-btn-border-color: var(--tt-border); --bs-btn-color: var(--tt-text);
  --bs-btn-hover-bg: var(--tt-surface-3); --bs-btn-hover-border-color: var(--tt-border); --bs-btn-hover-color: var(--tt-text);
}
[data-bs-theme="dark"] .table-light {
  --bs-table-bg: var(--tt-surface-2); --bs-table-color: var(--tt-text); --bs-table-border-color: var(--tt-border);
}
[data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--tt-text); --bs-table-border-color: var(--tt-border); }
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .popover,
[data-bs-theme="dark"] .offcanvas { background-color: var(--tt-surface-elevated); color: var(--tt-text); border-color: var(--tt-border); }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select { background-color: var(--tt-surface-2); color: var(--tt-text); border-color: var(--tt-border); }
[data-bs-theme="dark"] .form-control::placeholder { color: var(--tt-text-light); }
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly] { background-color: var(--tt-surface-3); }
[data-bs-theme="dark"] .modal-backdrop.show { opacity: .7; }
/* Logo: el PNG trae el texto en azul marino; en oscuro se muestra la
   variante logo_dark.png (mismo logo, texto claro). */
.tt-logo-for-light { display: block; }
.tt-logo-for-dark  { display: none; }
[data-bs-theme="dark"] .tt-logo-for-light { display: none; }
[data-bs-theme="dark"] .tt-logo-for-dark  { display: block; }

/* FullCalendar: sus estilos usan blanco/gris fijos */
[data-bs-theme="dark"] .fc {
  --fc-border-color: var(--tt-border);
  --fc-page-bg-color: var(--tt-surface);
  --fc-neutral-bg-color: var(--tt-surface-2);
  --fc-neutral-text-color: var(--tt-text-muted);
  --fc-list-event-hover-bg-color: var(--tt-surface-2);
  --fc-today-bg-color: rgba(127, 166, 243, 0.10);
  --fc-now-indicator-color: var(--tt-danger);
  --fc-non-business-color: rgba(0, 0, 0, 0.25);
  --fc-highlight-color: rgba(127, 166, 243, 0.18);
  --fc-button-bg-color: var(--tt-surface-2);
  --fc-button-border-color: var(--tt-border);
  --fc-button-text-color: var(--tt-text);
  --fc-button-hover-bg-color: var(--tt-surface-3);
  --fc-button-hover-border-color: var(--tt-border);
  --fc-button-active-bg-color: var(--tt-primary-subtle);
  --fc-button-active-border-color: var(--tt-primary);
  color: var(--tt-text);
}
[data-bs-theme="dark"] .fc .fc-col-header-cell-cushion,
[data-bs-theme="dark"] .fc .fc-daygrid-day-number,
[data-bs-theme="dark"] .fc .fc-timegrid-slot-label-cushion { color: var(--tt-text-muted); }