.pf-loader {
    display:flex; align-items:center; gap:.6rem;
    background:#f9ffe0; border:1px solid #d6df20; color:#3f4a00;
    padding:.5rem .75rem; border-radius:.75rem; font-size:.9rem;
  }
  .pf-dot {
    width:10px; height:10px; border-radius:999px; background:#d6df20;
    animation: pf-bounce .8s infinite ease-in-out alternate;
  }
  .pf-dot:nth-child(2){ animation-delay:.1s }
  .pf-dot:nth-child(3){ animation-delay:.2s }
  @keyframes pf-bounce {
    from{ transform: translateY(0); opacity:.6 }
    to  { transform: translateY(-6px); opacity:1 }
  }

  /* END */

  #cooldown-panel{
    position:fixed; z-index:9999; left:0px; top:500px; width:215px; user-select:none; pointer-events:auto;
    background:#f9ffe0; border:1px solid #d6df20; color:#3f4a00; border-radius:12px; box-shadow:0 10px 20px rgba(0,0,0,.12);
    font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu; font-size:12px; line-height:1.2;
  }
  html.dark #cooldown-panel{ background:#1f2937; color:#fde68a; border-color:#7c2d12; }
  #cooldown-panel .cdp-header{ cursor:move; display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.5rem .6rem; border-bottom:1px dashed rgba(124,45,18,.35); }
  #cooldown-panel .cdp-header .title{ font-weight:800; color:#9a3412; }
  html.dark #cooldown-panel .cdp-header .title{ color:#e5f26a; }
  #cooldown-panel .cdp-body{ padding:.55rem .6rem .6rem; }
  #cooldown-panel .cdp-badge{ display:inline-flex; align-items:center; gap:.35rem; font-size:11px; padding:.15rem .35rem; border-radius:.4rem; background:#f9ffe0; color:#3f4a00; border:1px solid #d6df20; }
  html.dark #cooldown-panel .cdp-badge{ background:#78350f; color:#fde68a; border-color:#a16207; }
  #cooldown-panel .cdp-timer{ font-weight:800; color:#9a3412; }
  html.dark #cooldown-panel .cdp-timer{ color:#e5f26a; }
  #cooldown-panel .cdp-actions{ display:flex; gap:.35rem; margin-top:.5rem; }
  #cooldown-panel .cdp-actions button{ flex:1; padding:.35rem .5rem; border-radius:.4rem; border:1px solid #e5e7eb; background:#fff; color:#374151; font-weight:600; }
  #cooldown-panel .cdp-actions button:hover{ background:#f9fafb; }
  html.dark #cooldown-panel .cdp-actions button{ background:#111827; color:#e5e7eb; border-color:#374151; }
  #cooldown-panel .cdp-close{ background:transparent; border:none; color:inherit; opacity:.8; }
  #cooldown-panel .cdp-close:hover{ opacity:1; }
  #cooldown-panel.hidden{ display:none; }
  #cooldown-panel .cdp-warning{ background:#f9ffe0; border:1px dashed #d6df20; color:#3f4a00; padding:.4rem; border-radius:.5rem; margin-top:.4rem; font-size:11px; }
  html.dark #cooldown-panel .cdp-warning{ background:#7c2d12; color:#fde68a; border-color:#d6df20; }
  #cooldown-panel .cdp-icon{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; }
  #cooldown-panel .cdp-muted{ color:#6b7280; }
  html.dark #cooldown-panel .cdp-muted{ color:#9ca3af; }
  /* Size similar to the client profile preload modal (compact card) */
  #cooldown-panel{ max-width: 260px; }
  #cooldown-panel .cdp-body p{ margin:.25rem 0; }
  #cooldown-panel .cdp-help{ font-size:10px; }


  /* END */

/* Clamp for task descriptions with See more/See less */
.task-desc.desc-clamped {
  --desc-line-limit: 20;
  max-height: calc(1.35em * var(--desc-line-limit));
  overflow: hidden;
  position: relative;
}
.task-desc.desc-clamped::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 30px;
  background: linear-gradient(to bottom, rgba(254,252,232,0), rgba(254,252,232,1));
}
html.dark .task-desc.desc-clamped::after {
  background: linear-gradient(to bottom, rgba(30,41,59,0), rgba(30,41,59,0.92));
}

/* (Removed) height clamp for task cards — using text half-clamp with See more/See less instead */
 

/* Tarjetas, paneles, filtros */
html.dark #logs-view .bg-white,
html.dark #logs-view .card,
html.dark #logs-view .panel,
html.dark #logs-view .filters {
  background:#0f172a !important;
  border-color:#243244 !important;
  color:#e5e7eb !important;
  box-shadow:0 6px 18px rgba(0,0,0,.45) !important;
}

/* Cabeceras y labels que quedaban negras */
html.dark #logs-view h2,
html.dark #logs-view h3,
html.dark #logs-view .stat-label,
html.dark #logs-view .text-gray-700,
html.dark #logs-view .text-gray-800,
html.dark #logs-view .text-gray-900 { color:#cbd5e1 !important; }
  html.dark #profile-summary > div{background:#0f172a !important;border-color:#1f2937 !important;box-shadow:0 20px 46px rgba(2,8,23,.55)}
  html.dark #profile-summary h3{color:#e2e8f0 !important}
  html.dark #profile-summary .text-gray-900,
  html.dark #profile-summary .text-gray-800,
  html.dark #profile-summary .text-gray-700,
  html.dark #profile-summary .text-gray-600{color:#cbd5e1 !important}
  html.dark #profile-summary .text-gray-500{color:#94a3b8 !important}
/* Tablas y bordes */
html.dark #logs-view thead {
  background:#111827 !important; color:#e5e7eb !important;
  border-bottom:1px solid #243244 !important;
}
html.dark #logs-view td, html.dark #logs-view th { border-color:#243244 !important; }
html.dark #logs-view tbody tr:hover { background:#141c2d !important; }

/* Colores utilitarios en dark */
html.dark #logs-view .bg-blue-100 { background:#0b1222 !important; }
html.dark #logs-view .bg-gray-50  { background:#0b1222 !important; }
html.dark #logs-view .divide-gray-200,
html.dark #logs-view .border-gray-200 { border-color:#243244 !important; }

/* Sticky header for log table inside scrollable container */
#raw-logs-view thead th {
  position: sticky; top: 0; z-index: 20;
  background: #ebf5ff; /* close to bg-blue-100 */
}
html.dark #raw-logs-view thead th { background: #111827 !important; }
/* Ensure thead itself is not sticky to avoid browser quirks */
#raw-logs-view thead { position: static !important; z-index: auto !important; }

/* Keep pagination visible at bottom of the scroll area */
#log-pagination { position: sticky; bottom: 0; z-index: 30; background: #f8fafc; }
html.dark #log-pagination { background: #0f172a !important; }
/* Force pagination to be visible in case a utility hides it */
#log-pagination { display: flex !important; }
#log-pagination * { visibility: visible !important; }

/* Disabled state for always-visible pagination controls */
#log-pagination button[disabled],
#log-pagination select[disabled],
#log-pagination .disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  border-color: #9ca3af;
}
/* Estilos de cache indicators removidos - ya no son necesarios en Node.js */
#task-cache-indicator[data-pending="1"] .cache-dot { animation: cachePulse 1.6s ease-out infinite; }
#task-cache-indicator[data-source="cache"] .cache-icon { color: #047857; }
#task-cache-indicator[data-source="live"] .cache-icon { color: #2563eb; }
#task-cache-indicator[data-pending="1"] .cache-icon { color: #d6df20; }
html.dark #task-cache-indicator {
  background: #1f2937;
  border-color: #334155;
  color: #e5e7eb;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
html.dark #task-cache-indicator[data-source="cache"] {
  background: #0f172a;
  border-color: #1d4ed8;
  color: #93c5fd;
}
html.dark #task-cache-indicator[data-source="live"] {
  background: #052e16;
  border-color: #34d399;
  color: #6ee7b7;
}
html.dark #task-cache-indicator[data-pending="1"] {
  background: #1a2b12;
  border-color: #d6df20;
  color: #e5f26a;
}
#task-cache-indicator .cache-label {
  white-space: nowrap;
}
html.dark #task-cache-indicator .cache-spinner { border-color: rgba(255,255,255,0.15); }



/* ===== TASK STATUS BADGES (client profile view) ===== */
.task-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  font-weight: 600;
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb;
  color: #374151 !important;
}

.note-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  background: #f9ffe0;
  color: #3f4a00;
  border: 1px solid #d6df20;
  line-height: 1;
}


.unread-toast-card {
  border-left: 6px solid #2563eb;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.15);
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
}

html.dark .unread-toast-card {
  border-left-color: #60a5fa;
  background: linear-gradient(135deg, rgba(37, 78, 108, 0.92) 0%, rgba(15, 23, 42, 0.92) 100%);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.55);
}

.unread-toast-card .note-unread-badge {
  background-color: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65);
}

html.dark .unread-toast-card .note-unread-badge {
  background-color: #60a5fa;
  color: #0f172a;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.65);
}

html.dark .unread-toast-card .text-blue-900 {
  color: #dbeafe;
}

html.dark .unread-toast-card .text-gray-600 {
  color: #cbd5f5;
}

.animate-unread-toast {
  animation: unreadToastEnter 0.35s ease-out;
}

@keyframes unreadToastEnter {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
html.dark .note-unread-badge {
  background: #1a2b12;
  color: #e5f26a;
  border-color: #d6df20;
}

.task-status-badge.status-pending {
  background: #f9ffe0 !important;
  border-color: #d6df20;
  color: #3f4a00 !important;
}

.task-status-badge.status-working {
  background: #dbeafe !important;
  border-color: #bfdbfe;
  color: #1d4ed8 !important;
}

.task-status-badge.status-review {
  background: #f9ffe0 !important;
  border-color: #d6df20;
  color: #3f4a00 !important;
}

.task-status-badge.status-completed {
  background: #dcfce7 !important;
  border-color: #bbf7d0;
  color: #166534 !important;
}

.task-status-badge.status-tobefixed {
  background: #ffe4e6 !important;
  border-color: #fecdd3;
  color: #be123c !important;
}

html.dark .task-status-badge {
  background: #374151 !important; /* gray-700 para modo oscuro por defecto */
  color: #E5E7EB !important; /* gray-200 para texto por defecto */
}

/* Task status badges con colores específicos por estado (aplicados via JS) */
html.dark .task-status-badge.status-pending {
  background: #f9ffe0 !important; 
  color: #111827 !important;
}

html.dark .task-status-badge.status-working {
  background: #DBEAFE !important; 
  color: #1F2937 !important;
}

html.dark .task-status-badge.status-review {
  background: #f9ffe0 !important; 
  color: #111827 !important;
}

html.dark .task-status-badge.status-completed {
  background: #D1FAE5 !important; 
  color: #1F2937 !important;
}

html.dark .task-status-badge.status-tobefixed {
  background: #FFE4E6 !important; 
  color: #1F2937 !important;
}



/* ====== Global toast stack (non-overlapping, stacked toasts) ====== */
#toast-stack {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 99999;
  pointer-events: none; /* clicks pass through except on items */
}
#toast-stack .toast-item {
  pointer-events: auto;
  min-width: 240px;
  max-width: 420px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #111827;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  transform: translateY(8px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
#toast-stack .toast-item.toast-in {
  transform: translateY(0);
  opacity: 1;
}
#toast-stack .toast-item.toast-out {
  transform: translateY(8px);
  opacity: 0;
}
#toast-stack .toast-item.toast-success { border-color: #a7f3d0; background: #ecfdf5; color: #065f46; }
#toast-stack .toast-item.toast-error   { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
#toast-stack .toast-icon { margin-top: 1px; }

html.dark #toast-stack .toast-item { background:#0f172a; border-color:#334155; color:#e5e7eb; }
html.dark #toast-stack .toast-item.toast-success { background:#052e16; border-color:#065f46; color:#a7f3d0; }
html.dark #toast-stack .toast-item.toast-error { background:#3f1d1d; border-color:#7f1d1d; color:#fecaca; }

/* Contenedor y estados */
#pf-apply {
  position: relative;
  background-color: #d6df20;
  color: #111827;
  border: 1px solid #c2cf1c;
  transition: background-color .2s ease, box-shadow .2s ease, transform .08s ease;
}
#pf-apply:hover {
  background-color: #e5f26a;
  box-shadow: 0 6px 16px rgba(214, 223, 32, .35);
}
#pf-apply:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(214, 223, 32, .25);
}
#pf-apply.is-loading { cursor: progress; opacity: .95; }
#pf-apply[disabled] { cursor: not-allowed; }

/* Oculta el texto mientras carga (suave) */
#pf-apply .btn-label { transition: opacity .15s ease; }
#pf-apply.is-loading .btn-label { opacity: 0; }

/* Capa centrada para el spinner */
#pf-apply .btn-spinner {
position: absolute; inset: 0;
display: none; place-content: center;
}
#pf-apply.is-loading .btn-spinner { display: grid; }

/* Anillo girando */
#pf-apply .btn-spinner::before{
content:"";
width: 1.1rem; height: 1.1rem;
border: 2px solid rgba(255,255,255,.85);
border-right-color: transparent; /* “hueco” para ver giro */
border-radius: 9999px;
animation: pfspin .8s linear infinite;
}

/* Giro */
@keyframes pfspin { to { transform: rotate(360deg); } }

/* Respeta accesibilidad si el usuario prefiere menos animación */
@media (prefers-reduced-motion: reduce){
#pf-apply .btn-spinner::before { animation: none; }
}




/* ===== Shortcuts (cards naranjas) ===== */
#client-shortcuts .sc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.sc-card {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 12px;
  background: #fff; border: 1px solid #e0f0a0;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.sc-card:hover {
  transform: translateY(-1px);
  border-color: #d6df20;
  box-shadow: 0 10px 24px rgba(2,8,23,.08);
  background: linear-gradient(0deg,#f9ffe0,#ffffff);
}
.sc-card i { opacity:.9; }

/* chip exterior para el icono */
.sc-chip {
display:inline-flex; align-items:center; justify-content:center;
width: 34px; height: 34px; border-radius: 10px;
background: #f9ffe0; border: 1px solid #d6df20;
}

/* título truncado */
.sc-title { font-weight: 700; font-size: .95rem; color:#111827; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-card .sc-title { font-size: .9rem; }

/* botón abrir en nueva pestaña */
.sc-open { margin-left:auto; opacity:.45; }
.sc-card:hover .sc-open { opacity:.7; }

/* botón Delete dentro del grid (solo en modo armado, fijo en esquina) */
.sc-del-grid {
  position: absolute; top: 6px; right: 6px;
  display: none; /* visible solo en .sc-armed */
  font-size:12px; color:#b91c1c; border:1px solid #fecaca; background:#fff;
  border-radius:8px; padding:4px 6px; z-index: 2;
}
.sc-card:hover .sc-del-grid { display: none !important; }
.sc-armed .sc-del-grid { display: inline-flex !important; align-items:center; gap:6px; }

/* botones base naranja (consistente) */
.btn-orange {
display:inline-flex; align-items:center; justify-content:center;
padding:8px 12px; border-radius:999px; font-weight:700; font-size:.92rem;
background:#d6df20; color:#111827; border:1px solid #d6df20;
transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.btn-orange:hover { background:#e5f26a; box-shadow:0 6px 16px rgba(214,223,32,.35); transform: translateY(-1px); }

/* tabla del modal más compacta */
#shortcutsModal table input, #shortcutsModal select {
border-color:#E5E7EB; border-radius:8px; padding:6px 8px; font-size:12px;
}

/* dark-mode neutro + acentos (se integra con tu base) */
html.dark #client-shortcuts .sc-card { background:#1b2130; border-color:#333a48; color:#e5e7eb; box-shadow:0 6px 18px rgba(0,0,0,.45); }
html.dark #client-shortcuts .sc-chip { background:#231f1a; border-color:#3a3025; }
html.dark #shortcutsModal .bg-white { background:#1b2130; color:#e5e7eb; border-color:#333a48; }
/* Full-card clickable cue */
.sc-card[data-clickable="true"]{ cursor: pointer; }
.sc-card[data-clickable="true"]:hover{ background: linear-gradient(0deg,#f9ffe0,#fff); border-color:#d6df20; }

/* Tarjeta especial de crédito: más ancha, menos alta, texto ordenado */
#client-shortcuts .cr-card { align-items: flex-start; position: relative; }
#client-shortcuts .cr-card .sc-title { white-space: normal; line-height: 1.2; }

/* Grupo de tarjetas de crédito: hasta 3 por línea */
#client-shortcuts .cr-grid{
  display:grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  gap: 12px;
  margin-top: 8px;
}
@media (min-width: 768px){
  #client-shortcuts .cr-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1280px){
  #client-shortcuts .cr-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Modo oscuro específico para tarjetas de crédito: texto oscuro sobre fondo claro */
html.dark #client-shortcuts .cr-card{
  background: linear-gradient(180deg,#f9ffe0,#ffffff) !important;
  color: #111827 !important;
  border-color: #d6df20 !important;
}
html.dark #client-shortcuts .cr-card .sc-title{ color:#111827 !important; }
html.dark #client-shortcuts .cr-card .cr-badge{
  background:#fff7ed !important; border-color:#fdba74 !important; color:#9a3412 !important;
}

/* Modal de detalles de usuario - Modo oscuro */
html.dark #user-details-modal { background-color: rgba(0, 0, 0, 0.7); }
html.dark #user-details-modal .bg-white { background-color: #1f2937; color: #f3f4f6; }
html.dark #user-details-modal .border-gray-200 { border-color: #374151; }
html.dark #user-details-modal .text-gray-900 { color: #f3f4f6; }
html.dark #user-details-modal .text-gray-400 { color: #9ca3af; }
html.dark #user-details-modal .text-gray-600 { color: #d1d5db; }
html.dark #user-details-modal .text-gray-700 { color: #e5e7eb; }
html.dark #user-details-modal .bg-blue-50 { background-color: #1e3a8a; }
html.dark #user-details-modal .text-blue-900 { color: #dbeafe; }
html.dark #user-details-modal .text-blue-700 { color: #93c5fd; }
html.dark #user-details-modal .bg-gray-50 { background-color: #374151; }
html.dark #user-details-modal .bg-gray-200 { background-color: #4b5563; }
html.dark #user-details-modal .bg-green-50 { background-color: #064e3b; }
html.dark #user-details-modal .text-green-700 { color: #a7f3d0; }
html.dark #user-details-modal .bg-green-200 { background-color: #065f46; }


/* Asegura stacking por encima de secciones */
#shortcutsModal { z-index: 1100; position: fixed; }

/* En algunos navegadores, el <select> puede sobreponerse: fuerza stacking */
#shortcutsModal select.sc-icon {
position: relative; /* crea nuevo contexto de apilamiento */
z-index: 1110; /* sobre la tarjeta del modal */
}

/* Contenedor */
.ul-wrap { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.ul-title { font-size: 1.5rem; font-weight: 700; margin: .5rem 0 1rem; }

/* Grid */
.ul-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}

/* Card */
.ul-card {
border: 1px solid #eee;
border-radius: 14px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
display: flex;
flex-direction: column;
}
.ul-img {
width: 100%;
height: 140px;
object-fit: cover;
background: #fafafa;
}
.ul-img.ul-icon {
object-fit: contain;
padding: 18px;
background: linear-gradient(0deg, #fff, #fff);
height: 120px;
}
.ul-body { padding: 14px; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.ul-body h3 { font-size: 1rem; font-weight: 700; margin: 0; }

/* Botón green */
.btn-orange {
display: inline-flex; align-items: center; justify-content: center;
padding: 8px 12px; border-radius: 999px; text-decoration: none;
font-weight: 700; font-size: .92rem; line-height: 1;
background: #d6df20; color: #111827; border: 1px solid #c2cf1c;
transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
gap: .45rem;
}
.btn-orange:hover { background: #e5f26a; box-shadow: 0 6px 16px rgba(214,223,32,.35); transform: translateY(-1px); }
.btn-orange:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(214,223,32,.25); }

/* === Podcast Help === */
.podcast-help-wrap { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
.podcast-help-header { text-align: left; margin-bottom: 2.5rem; }
.podcast-help-header h2 { font-size: 2rem; font-weight: 800; color: #7c2d12; }
.podcast-help-header p { margin-top: .75rem; font-size: 1rem; color: #475569; max-width: 720px; }

.podcast-grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.podcast-card { background: linear-gradient(180deg,#f9ffe0,#ffffff); border: 1px solid #d6df20; border-radius: 20px; padding: 1.5rem; box-shadow: 0 18px 32px rgba(214,223,32,.18); display: flex; flex-direction: column; gap: 1.25rem; }
.podcast-card::after { content: ""; position: absolute; inset: 0; border-radius: 20px; pointer-events: none; opacity: 0; transition: opacity .2s ease; box-shadow: 0 0 0 1px rgba(214,223,32,.45); }
.podcast-card:hover::after { opacity: 1; }
.podcast-card { position: relative; overflow: hidden; }

.podcast-thumb { width: 110px; flex-shrink: 0; }
.podcast-thumb img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 12px 28px rgba(214,223,32,.25); }

.podcast-body { display: grid; gap: .9rem; }
.podcast-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem; background: #fff; border: 1px solid #d6df20; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #3f4a00; letter-spacing: .01em; text-transform: uppercase; }
.podcast-body h3 { font-size: 1.25rem; font-weight: 800; color: #1f2937; margin: 0; }
.podcast-description { color: #334155; font-size: .95rem; line-height: 1.5; }

.podcast-topics { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.podcast-topics li { display: flex; align-items: flex-start; gap: .55rem; color: #475569; font-size: .9rem; line-height: 1.45; }
.podcast-topics i { color: #d6df20; margin-top: .25rem; }

.podcast-player-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 16px 28px rgba(15,23,42,.25); }
.podcast-player-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.podcast-action-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.podcast-link-alt { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .9rem; color: #3f4a00; text-decoration: none; transition: color .18s ease; }
.podcast-link-alt i { color: #d6df20; }
.podcast-link-alt:hover { color: #111827; }

.podcast-guide { margin-top: 3rem; }
.podcast-guide > p { margin-top: .6rem; color: #475569; max-width: 720px; }
.guide-top { display: flex; flex-direction: column; gap: .9rem; }
.guide-top h3 { font-size: 1.65rem; font-weight: 800; color: #7c2d12; margin: 0; }
.guide-toggle { display: inline-flex; border: 1px solid #d6df20; border-radius: 999px; padding: .2rem; background: rgba(214,223,32,.25); }
.guide-tab { border: none; background: transparent; color: #3f4a00; font-weight: 700; font-size: .85rem; padding: .35rem .9rem; border-radius: 999px; cursor: pointer; transition: background .18s ease, color .18s ease; }
.guide-tab.active { background: #d6df20; color: #111827; box-shadow: 0 8px 16px rgba(214,223,32,.35); }
.guide-pane { margin-top: 1.75rem; }
.podcast-guide-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.guide-card { background: #ffffff; border: 1px solid #e0f0a0; border-radius: 18px; padding: 1.4rem; box-shadow: 0 12px 24px rgba(2,8,23,.08); display: grid; gap: .75rem; }
.guide-card h4 { margin: 0; font-size: 1.1rem; font-weight: 800; color: #9a3412; }
.guide-card ul { margin: 0; padding-left: 1.2rem; list-style: disc; display: grid; gap: .55rem; font-size: .95rem; color: #475569; }
.guide-card li { margin: 0; line-height: 1.5; }
.guide-visuals { margin-top: 2.5rem; display: grid; gap: 1.5rem; }
.guide-visual { background: #ffffff; border: 1px solid #e0f0a0; border-radius: 18px; overflow: hidden; box-shadow: 0 14px 26px rgba(2,8,23,.1); justify-self: center; width: 100%; }
.guide-visual-wide { max-width: min(864px, 100%); }
.guide-visual-tall { max-width: min(672px, 100%); }
.guide-visual img { display: block; width: 100%; height: auto; }
.guide-visual figcaption { padding: 1rem 1.25rem; font-weight: 700; color: #3f4a00; font-size: 1rem; letter-spacing: .01em; }

@media (min-width: 768px){
  .podcast-card { flex-direction: row; align-items: flex-start; }
  .podcast-thumb { margin-right: 1.25rem; }
  .podcast-body { flex: 1; }
  .guide-top { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (max-width: 640px){
  .podcast-thumb { width: 90px; }
  .podcast-body h3 { font-size: 1.15rem; }
  .podcast-help-header h2 { font-size: 1.6rem; }
}

html.dark .podcast-card { background: linear-gradient(180deg,#1f2937,#0f172a); border-color: #d6df2033; box-shadow: 0 18px 38px rgba(15,23,42,.45); }
html.dark .podcast-card::after { box-shadow: 0 0 0 1px rgba(214,223,32,.45); }
html.dark .podcast-badge { background: rgba(214,223,32,.14); border-color: rgba(214,223,32,.55); color: #e5f26a; }
html.dark .podcast-body h3 { color: #f8fafc; }
html.dark .podcast-description, html.dark .podcast-topics li, html.dark .podcast-help-header p { color: #cbd5f5; }
html.dark .guide-card { background: linear-gradient(180deg,#1d2435,#101726); border-color: rgba(214,223,32,.35); box-shadow: 0 14px 30px rgba(2,8,23,.55); }
html.dark .guide-card h4 { color: #e5f26a; }
html.dark .guide-card ul { color: #d1d5f0; }
html.dark .podcast-help-header h2, html.dark .guide-top h3 { color: #e5f26a; }
html.dark .podcast-link-alt { color: #e5f26a; }
html.dark .podcast-link-alt i { color: #d6df20; }
html.dark .guide-visual { background: linear-gradient(180deg,#1d2435,#101726); border-color: rgba(214,223,32,.35); box-shadow: 0 16px 32px rgba(2,8,23,.6); }
html.dark .guide-visual figcaption { color: #e5f26a; }
html.dark .guide-toggle { border-color: rgba(214,223,32,.65); background: rgba(214,223,32,.25); }
html.dark .guide-tab { color: #e5f26a; }
html.dark .guide-tab.active { background: #d6df20; color: #0b1220; }


/* === GRID: 1 / 2 / 3 columnas responsivo === */
#task-list.gridify{
display:grid;
grid-template-columns: 1fr;
gap: .75rem; /* más aire entre cards */
}
@media (min-width: 1024px){
#task-list.gridify{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px){
#task-list.gridify{ grid-template-columns: repeat(3, 1fr); } /* 👈 3 columnas */
}

/* === Mobile layout up to 1024px (Task Dashboard cards) ===
   NOTE: MOBILE_CARD_WIDTH_TWEAK — adjust --mobile-card-max-width below to tune card width on phones
*/
@media (max-width: 1024px){
  /* Force single-column grid and center items on medium/large phones and tablets */
  #task-list.gridify{
    grid-template-columns: 1fr !important;
    justify-content: center;
    justify-items: center;
  }
  /* Make task cards narrower so content doesn't get cut off on mobile */
  .task-card,
  #task-list.gridify .card{
    width: 100%;
    max-width: var(--mobile-card-max-width, 400px); /* MOBILE_CARD_WIDTH_TWEAK: default now 400px */
  }
  /* Help long text wrap better within narrow cards */
  .task-card, .task-card *,
  #task-list.gridify .card, #task-list.gridify .card *{
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* === CARD look & feel === */
#profile-section .card{
background:#ffffff;
border:1px solid #E5E7EB; /* gris claro */
border-radius: 14px;
padding: 12px 14px;
display:flex; gap:10px; align-items:flex-start;
box-shadow: 0 1px 2px rgba(16,24,40,.04);
transition: box-shadow .18s ease, transform .08s ease, border-color .18s ease;
}
#profile-section .card:hover{
box-shadow: 0 10px 24px rgba(2,8,23,.08);
transform: translateY(-1px);
border-color:#FCD34D33; /* toque warm */
}
#profile-section .card:focus-within{
outline: 2px solid #FDBA74; /* orange-300 */
outline-offset: 2px;
}

/* título y flecha más “card” */
#profile-section .card h4{ font-weight: 700; color:#111827; }
#profile-section .card i{ opacity:.45; }

#profile-section .badge{
display:inline-flex; align-items:center; gap:.4rem;
font-size:12px; padding:2px 8px; border-radius:9999px; border:1px solid transparent;
}

/* colores por estado (ya los tenías; los dejo aquí por si faltaba alguno) */
.badge-pending{color:#3f4a00;background:#f9ffe0;border-color:#d6df20;}
.badge-working{color:#1D4ED8;background:#EFF6FF;border-color:#BFDBFE;}
.badge-review{color:#6D28D9;background:#F5F3FF;border-color:#DDD6FE;}
.badge-completed{color:#065F46;background:#ECFDF5;border-color:#A7F3D0;}
.dot-pending{background:#d6df20;} .dot-working{background:#3B82F6;}
.dot-review{background:#A855F7;} .dot-completed{background:#10B981;}

/* paginación, igual que antes */
#profile-pagination{display:flex;align-items:center;gap:.5rem;justify-content:flex-end;margin-top:.5rem;}
#profile-pagination .btn{border:1px solid #E5E7EB;border-radius:8px;padding:6px 10px;font-size:12px;background:#fff;}
#profile-pagination .btn[disabled]{opacity:.45;cursor:not-allowed;}

/* === Loading animation for purple Refresh list button === */
#refreshClientsViewBtn.is-loading { position: relative; cursor: progress; }
#refreshClientsViewBtn.is-loading i { opacity: 0; }
#refreshClientsViewBtn.is-loading span { opacity: 0; }
#refreshClientsViewBtn.is-loading::after{
  content:""; position:absolute; inset:auto auto auto 10px; width:16px; height:16px;
  border:2px solid rgba(255,255,255,.7); border-top-color: transparent; border-radius:999px;
  animation: rcv-spin .8s linear infinite; top: 50%; transform: translateY(-50%);
}
@keyframes rcv-spin { from{ transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg);} }



/* --- Microinteracciones para botones de acción --- */
.btn-action {
transition: transform 180ms ease, box-shadow 220ms ease, filter 180ms ease;
will-change: transform;
}
.btn-action:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.08); }
.btn-action:active { transform: translateY(0) scale(.97); filter: brightness(.97); }
.btn-action:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.4); }

/* Estados animados disparados por JS */
@keyframes btn-pop {
0% { transform: scale(1); }
55% { transform: scale(1.06); }
100% { transform: scale(1); }
}
@keyframes btn-shake {
0% { transform: translateX(0); }
20% { transform: translateX(-3px); }
40% { transform: translateX(3px); }
60% { transform: translateX(-2px); }
80% { transform: translateX(2px); }
100% { transform: translateX(0); }
}
@keyframes btn-send {
0% { transform: translateX(0) scale(1); opacity: 1; }
60% { transform: translateX(8px) scale(1.03); opacity: .95; }
100% { transform: translateX(14px) scale(.98); opacity: .92; }
}

/* Clases utilitarias para activar animaciones */
.anim-pop { animation: btn-pop 260ms ease-out; }
.anim-shake { animation: btn-shake 380ms cubic-bezier(.36,.07,.19,.97); }
.anim-send { animation: btn-send 420ms ease-in-out; }

#cmdTotalHours{
font-size: clamp(2rem, 3.5vw, 2.5rem); /* ~32px a ~40px */
font-weight: 800;
line-height: 1;
letter-spacing: -0.02em;
}

/* ===== Header "Create New Task" en modo oscuro (sin cambiar HTML) ===== */
/* Tu header tiene clases: sticky top-0 z-10 ... lo apuntamos con todas para subir especificidad */
html.dark header.sticky.top-0.z-10 {
background: rgba(15, 22, 37, .92) !important; /* oscuro translúcido */
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
border-color: #2b3240 !important; /* borde oscuro */
box-shadow: 0 6px 18px rgba(0,0,0,.35) !important;
}

/* Título dentro del header */
html.dark header.sticky.top-0.z-10 h1#task-title-header {
color: #e5e7eb !important; /* texto claro */
}

/* Botón "Volver a Lista": en light es azul claro; en dark lo volvemos botón oscuro con acento azul */
html.dark #backToListBtn {
background: #142039 !important; /* fondo oscuro azulado */
color: #cfe0ff !important; /* texto azul muy claro */
border: 1px solid #26324c !important;
}
html.dark #backToListBtn i { color: inherit !important; }

html.dark #backToListBtn:hover {
background: #1b2a4d !important; /* hover un poco más claro */
color: #ffffff !important;
border-color: #2f3e61 !important;
}

/* Si algún utility estuviera forzando hover claro (bg-white/blue-50), garantizamos contraste */
html.dark #backToListBtn:hover,
html.dark #backToListBtn.hover-text-dark:hover * {
color: #111827 !important;
}
html.dark #backToListBtn:hover:not(.bg-blue-600):not(.bg-green-600) {
/* fallback por si hay utilidades de hover claras; lo reasignamos a claro con texto oscuro */
background: #f8fafc !important;
color: #111827 !important;
border-color: #e5e7eb !important;
}

/* Botón "Save Cambios" (verde sólido): se respeta el color sólido; solo sombra en dark */
html.dark #saveTaskBtn {
box-shadow: 0 8px 20px rgba(0,0,0,.35) !important;
}

/* Botón "Refresh Client List" en modo oscuro */
html.dark #refreshClientListBtn {
background: #1f2937 !important;
color: #e5e7eb !important;
border-color: #374151 !important;
}

html.dark #refreshClientListBtn:hover {
background: #374151 !important;
color: #f3f4f6 !important;
border-color: #4b5563 !important;
}

/* ===== Refresh Client List: loading animation ===== */
#refreshClientListBtn { position: relative; }
#refreshClientListBtn.is-loading { pointer-events: none; opacity: .95; }
#refreshClientListBtn.is-loading .fa-sync-alt { display: none; }
#refreshClientListBtn.is-loading .label { opacity: 0; }

/* Spinner overlay */
#refreshClientListBtn.is-loading::after {
  content: "";
  position: absolute;
  right: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; border-radius: 9999px;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: rclSpin .8s linear infinite;
}

/* Subtle ring/pulse while loading */
#refreshClientListBtn.is-loading { box-shadow: 0 0 0 3px rgba(59,130,246,.15) inset; }
#refreshClientListBtn.is-loading::before{
  content:""; position:absolute; inset:-2px; border-radius:10px;
  box-shadow: 0 0 0 0 rgba(59,130,246,.35);
  animation: rclPulse 1.2s ease-in-out infinite;
}

@keyframes rclSpin { to { transform: translateY(-50%) rotate(360deg); } }
@keyframes rclPulse { 0%{box-shadow:0 0 0 0 rgba(59,130,246,.35)} 70%{box-shadow:0 0 0 8px rgba(59,130,246,0)} 100%{box-shadow:0 0 0 0 rgba(59,130,246,0)} }

/* Dark mode keeps good contrast */
html.dark #refreshClientListBtn.is-loading { box-shadow: 0 0 0 3px rgba(96,165,250,.18) inset; }


/* ✅ Ajustes mínimos (puedes dejarlo tal cual o moverlo a tu CSS global) */
/* Estilos mínimos (puedes moverlos a tu CSS global) */
#clientMiniDashboard .badge {
display:inline-flex; align-items:center; gap:.25rem;
font-size:10px; padding:2px 6px; border-radius:9999px;
border:1px solid #e5e7eb; background:#fff;
}
#clientMiniDashboard .dot { width:6px; height:6px; border-radius:9999px; }
#clientMiniDashboard .dot { width:6px; height:6px; border-radius:9999px; }
/* ====== Snapshot A4: layout limpio para PDF ====== */
/* Estos estilos se inyectan en el iframe; aquí te los dejo por si quieres tenerlos también en tu CSS */
.print-only {
width: 794px; /* A4 @96dpi aprox */
margin: 0 auto;
background: #fff;
color: #111827;
font-size: 13px;
line-height: 1.35;
}

.print-only img { max-width: 100%; height: auto; }
.print-only * { break-inside: avoid; page-break-inside: avoid; }

/* Quita sombras/tarjetas muy marcadas */
.print-only .shadow,
.print-only .shadow-md,
.print-only .shadow-lg { box-shadow: none !important; }

/* Expande cualquier clamp/collapsible */
.print-only .section-with-clamp .clamp-block {
max-height: none !important;
overflow: visible !important;
}


/* Efecto de brillo suave mientras refresca */
.animate-pulse {
animation: pulseAnim 1.2s ease-in-out infinite;
}
@keyframes pulseAnim {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(0.98); }
}

/* === Switch y botones === */
#clientViewSwitch button {
transition: all 0.2s ease;
}
#clientViewSwitch button[aria-pressed="true"] {
background-color: #2563eb;
color: #fff;
}
#clientViewSwitch button[aria-pressed="true"] i {
color: #fff;
}

/* === Spinner === */
#refreshSpinner {
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}



/* Spinner animado */
#task-search-busy .animate-spin {
animation: spin 0.7s linear infinite;
}


/* === Spinner inline para la barra de búsqueda === */
.search-busy{
position:absolute; right:10px; top:50%; transform:translateY(-50%);
width:16px; height:16px; border-radius:9999px;
border:2px solid #e5e7eb; border-top-color:#2563eb;
animation: spin .8s linear infinite;
}


/* === Skeleton muy sutil de filas mientras filtra/busca === */
.table-skeleton .skeleton-row{
position:relative; overflow:hidden; background:linear-gradient(90deg,#ffffff,#f7f7f7,#ffffff);
background-size:200% 100%; animation:skeletonSlide 900ms linear infinite;
}
@keyframes skeletonSlide { to { background-position:-200% 0; } }

/* === Nota temporal estilo LinkedIn === */
.li-note{
display:flex; gap:.5rem; padding:.5rem .25rem; border-bottom:1px solid #e5e7eb;
}
.li-note__avatar{
width:24px; height:24px; border-radius:9999px; flex-shrink:0;
display:flex; align-items:center; justify-content:center; font-weight:700; font-size:10px;
background:#e5f2ff; color:#1d4ed8; border:1px solid #bfdbfe;
}
.li-note__body{ flex:1; min-width:0; }
.li-note__meta{ font-size:11px; color:#6b7280; display:flex; gap:.35rem; align-items:center; }
.li-note__badge{ font-size:10px; padding:2px 6px; border:1px solid #cfe0ff; border-radius:9999px; color:#2563eb; background:#eef5ff; }
.li-note__bubble{
background:#ffffff; border:1px solid #e5e7eb; border-radius:8px;
padding:6px 8px; font-size:12px; color:#111827; margin-top:4px; white-space:pre-wrap;
}
.li-note--optimistic .li-note__bubble{
position:relative; overflow:hidden;
}
.li-note--optimistic .li-note__bubble::after{
content:""; position:absolute; inset:0;
background:linear-gradient(90deg, transparent, rgba(37,99,235,.08), transparent);
animation: shimmer 1100ms linear infinite;
}
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }



.card-client-notes{ background:#f9ffe0; border:1px solid #d6df20; }
.card-linkedin-notes{ background:#EAF2FF; border:1px solid #CFE0FF; }

/* ===== Client Info view/editor ===== */
.client-info-view{
font-size:13px; line-height:1.35; color:#111827;
background:#fff; border:1px solid transparent; border-radius:8px;
padding:2px 0; min-height:24px; white-space:pre-wrap;
}
.client-info-view.is-empty{ color:#6B7280; font-style:italic; }
.client-info-editor{
width:100%; border:1px solid #E5E7EB; border-radius:8px; padding:10px 12px;
font-size:13px; line-height:1.35; outline:none; background:#fff;
}
.client-info-editor:focus{ border-color:#C7D2FE; box-shadow:0 0 0 2px #EEF2FF; }
.hidden{ display:none !important; }

/* ===== Buttons (ripple/pulse) ===== */
.btn-ripple{ position:relative; overflow:hidden; }
.btn-ripple:active::after{
content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:0; height:0; border-radius:999px; background:rgba(255,255,255,.35);
animation:ripple 600ms ease forwards;
}
@keyframes ripple{ to{ width:300px; height:300px; opacity:0; } }
@keyframes pulse{ 0%{transform:scale(1)} 50%{transform:scale(1.06)} 100%{transform:scale(1)} }
.btn-pulse{ animation:pulse 1.4s ease-in-out infinite; }

/* ===== Optimistic states for notes ===== */
.note-item--saving{ opacity:.6; position:relative; }
.note-item--saving::after{
content:""; position:absolute; right:8px; top:8px; width:14px; height:14px;
border:2px solid rgba(0,0,0,.25); border-top-color: rgba(0,0,0,.65);
border-radius:50%; animation: spin .8s linear infinite;
}

.note-item--error{ animation: shake .35s ease-in-out; background:#FEF2F2; outline:1px solid #FCA5A5; border-radius:6px; }
@keyframes shake{
10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)}
30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)}
}

/* ===== Tasks search bar ===== */
.tasks-search{
display:flex; align-items:center; justify-content:space-between;
gap:12px; margin:4px 0 0;
}
.tasks-search .input-wrap{
flex:1; display:flex; align-items:center; gap:8px;
background:#fff; border:1px solid #E5E7EB; border-radius:10px; padding:6px 10px;
}
.tasks-search .input-wrap i{ color:#6B7280; }
.tasks-search input{
border:none; outline:none; width:100%; font-size:12px;
}
.tasks-search .filters select{
border:1px solid #E5E7EB; border-radius:10px; padding:6px 10px; font-size:12px; background:#fff;
}



/* Pulso suave (LinkedIn Add) */

.btn-pulse{ animation: pulse 1.4s ease-in-out infinite; }

/* ====== Color de cards ====== */
.card-client-notes{
background: #f9ffe0; /* verde claro */
border: 1px solid #d6df20; /* borde verde suave */
}
.card-linkedin-notes{
background: #EAF2FF; /* azul claro */
border: 1px solid #CFE0FF; /* borde azul suave */
}

/* ====== Clamp helpers (si ya tienes, respeta los tuyos) ====== */
.section-with-clamp .clamp-block.collapsed{
max-height: 240px; overflow: hidden;
}

/* ====== Search bar tareas ====== */
.tasks-search{
display:flex; align-items:center; justify-content:space-between;
gap: 12px; margin: 8px 0 14px;
}
.tasks-search .input-wrap{
flex:1; display:flex; align-items:center; gap:8px;
background:#fff; border:1px solid #E5E7EB; border-radius:10px; padding:6px 10px;
}
.tasks-search .input-wrap i{ color:#6B7280; }
.tasks-search input{
border:none; outline:none; width:100%; font-size:12px;
}
.tasks-search .filters select{
border:1px solid #E5E7EB; border-radius:10px; padding:6px 10px; font-size:12px;
background:#fff;
}

/* ====== Estados optimistas ====== */
.note-item--saving{ opacity:.6; position:relative; }
.note-item--saving::after{
content:""; position:absolute; right:8px; top:8px; width:14px; height:14px;
border:2px solid rgba(0,0,0,.25); border-top-color: rgba(0,0,0,.65);
border-radius:50%; animation: spin .8s linear infinite;
}


.note-item--error{
animation: shake .35s ease-in-out;
background: #FEF2F2; outline: 1px solid #FCA5A5;
}


/* ==== Cards de color por sección ==== */
.card-client-notes{
background: #f9ffe0; /* verde claro */
border: 1px solid #d6df20; /* borde verde suave */
}

.card-linkedin-notes{
background: #EAF2FF; /* azul claro */
border: 1px solid #CFE0FF; /* borde azul suave */
}

/* Estado optimista (guardando) para ítems */
.note-item--saving{
opacity:.6;
position: relative;
}
.note-item--saving::after{
content:"";
position:absolute;
right:8px; top:8px;
width:14px; height:14px;
border:2px solid rgba(0,0,0,.25);
border-top-color: rgba(0,0,0,.65);
border-radius:50%;
animation: spin .8s linear infinite;
}

/* Estado de error (muestra editable + feedback) */
.note-item--error{
animation: shake .35s ease-in-out;
background: #FEF2F2; /* rojo claro */
outline: 1px solid #FCA5A5; /* borde rojo suave */
}

/* Animación del botón Add (LinkedIn) */

.btn-pulse{
animation: pulse 1.4s ease-in-out infinite;
}

/* “ripple” rápido al click */
.btn-ripple{
position: relative; overflow: hidden;
}
.btn-ripple:active::after{
content:""; position:absolute; left:50%; top:50%;
transform: translate(-50%, -50%);
width:0; height:0; border-radius:999px; background: rgba(255,255,255,.35);
animation:ripple 600ms ease forwards;
}


/* Vibración en error */




/* Contenedor colapsable por SECCIÓN (card) */
/* Contenedor colapsable por SECCIÓN (card) */
.clamp-block {
position: relative;
}

.clamp-block.collapsed {
max-height: 180px;
overflow: hidden;
}

.clamp-block.expanded {
max-height: none;
}

/* Botón de More/menos de la SECCIÓN */
.see-more-section {
display: none;
/* solo se muestra si hace falta */
border: 1px solid #059669;
/* borde verde */
background: #ecfdf5;
/* verde muy claro */
color: #059669;
/* texto verde */
padding: 2px 8px;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
margin-top: 6px;
font-weight: 600;
transition: all .2s ease;
}

.see-more-section:hover {
background: #059669;
color: #fff;
}

.see-more-section:focus {
outline: 2px solid #6ee7b7;
outline-offset: 2px;
}


/* ===== Modal específico para notifyReview ===== */
/* --- Estilos base del Modal (los tuyos, ligeramente ajustados) --- */
/* ===== Modal notifyReview (robusto con .hidden) ===== */

/* Contenedor del modal (tapando toda la pantalla) */
#notifyReviewModal {
position: fixed;
inset: 0;
display: none; /* oculto por defecto */
z-index: 1050;
align-items: center; /* para centrar con flex */
justify-content: center; /* para centrar con flex */
}

/* Cuando el JS quita la clase .hidden, mostrar como flex */
#notifyReviewModal:not(.hidden) {
display: flex;
}

/* Backdrop detrás de la tarjeta */
#notifyReviewModal .modal-backdrop {
position: absolute; /* relativo al contenedor del modal */
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 0; /* detrás de la tarjeta */
}

/* Tarjeta del modal */
#notifyReviewModal .modal-card {
position: relative; /* se apila por encima del backdrop */
z-index: 1;
background: #fff;
border-radius: 10px;
width: min(720px, 95vw);
max-height: 90vh; /* limita alto total */
display: flex;
flex-direction: column;
box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
overflow: hidden; /* bordes redondeados conservados */
}

/* Encabezado */
#notifyReviewModal .modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
border-bottom: 1px solid #e9ecef;
flex-shrink: 0; /* no se encoja */
}

#notifyReviewModal .modal-title {
margin: 0;
font-size: 1.25rem;
font-weight: 500;
}

/* Botón cerrar (X) — tu HTML usa id="notifyClose",
pero por si usas .modal-close o .modal-close-btn, los dejamos listos */
#notifyReviewModal .modal-close,
#notifyReviewModal .modal-close-btn,
#notifyReviewModal #notifyClose {
border: none;
background: transparent;
font-size: 1.8rem;
font-weight: bold;
line-height: 1;
color: #000;
opacity: 0.5;
cursor: pointer;
padding: 0.5rem;
margin: -0.5rem; /* compensa el padding para alinear */
}

#notifyReviewModal .modal-close:hover,
#notifyReviewModal .modal-close-btn:hover,
#notifyReviewModal #notifyClose:hover {
opacity: 0.8;
}

/* Cuerpo con scroll independiente */
#notifyReviewModal .modal-body {
flex: 1; /* ocupa el espacio disponible */
overflow-y: auto; /* scroll interno */
padding: 1.5rem;
font-size: 0.9rem;
}

/* Preformateado (ICS / debug) */
#notifyReviewModal .modal-body pre {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 5px;
padding: 1rem;
font-size: 0.8rem;
white-space: pre-wrap; /* evita scroll horizontal */
word-wrap: break-word; /* rompe palabras largas si hace falta */
}

/* Footer con botones */
#notifyReviewModal .modal-footer {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
padding: 1rem 1.5rem;
border-top: 1px solid #e9ecef;
flex-shrink: 0; /* no se encoja */
}

/* (Opcional) accesibilidad: evita scroll de fondo al abrir modal */
html.overflow-hidden, body.overflow-hidden {
overflow: hidden;
}

/* (Opcional) soporte dark mode básico */
@media (prefers-color-scheme: dark) {
#notifyReviewModal .modal-card {
background: #1c1c1c;
color: #eaeaea;
}
#notifyReviewModal .modal-body pre {
background-color: #141414;
border-color: #2a2a2a;
color: #ddd;
}
#notifyReviewModal .modal-header,
#notifyReviewModal .modal-footer {
border-color: #2a2a2a;
}
}

/* --- Buttons --- */
.btn {
padding: 8px 16px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: background 0.2s;
}

.btn-primary {
background: #2563eb;
color: #fff;
border: none;
}

.btn-primary:hover {
background: #1e4fd6;
}

.btn-secondary {
background: #f3f4f6;
color: #111;
border: 1px solid #ddd;
}

.btn-secondary:hover {
background: #e5e7eb;
}

/* --- Animations --- */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}

to {
opacity: 1;
transform: translateY(0);
}
}


/* ===== Badges base ===== */
.badge {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .2rem .55rem;
border-radius: 9999px; /* pill */
font-size: 11px;
line-height: 1;
font-weight: 600;
border: 1px solid transparent;
user-select: none;
white-space: nowrap;
}

/* Tamaños opcionales */
.badge--sm { font-size: 10px; padding: .15rem .45rem; }
.badge--md { font-size: 11px; padding: .2rem .55rem; }
.badge--lg { font-size: 12px; padding: .3rem .7rem; }

/* ===== Colores STATUS ===== */
/* Pending ⌛️ → Amarillo */
.badge--status-pending {
background: #FEF3C7; /* amber-100 */
color: #92400E; /* amber-800 */
border-color: #FDE68A; /* amber-200 */
box-shadow: 0 0 0 1px rgba(251, 191, 36, .35) inset; /* amber-400 */
}

/* Working 👨🏼‍💻 → Azul */
.badge--status-working {
background: #DBEAFE; /* blue-100 */
color: #1E40AF; /* blue-800 */
border-color: #BFDBFE; /* blue-200 */
box-shadow: 0 0 0 1px rgba(59, 130, 246, .35) inset; /* blue-500 */
}

/* On review → Naranja */
.badge--status-onreview {
background: #FFEDD5; /* orange-100 */
color: #9A3412; /* orange-800 */
border-color: #FED7AA; /* orange-200 */
box-shadow: 0 0 0 1px rgba(249, 115, 22, .35) inset; /* orange-500 */
}

/* Completed 👌🏼 → Esmeralda */
.badge--status-completed {
background: #D1FAE5; /* emerald-100 */
color: #065F46; /* emerald-800 */
border-color: #A7F3D0; /* emerald-200 */
box-shadow: 0 0 0 1px rgba(16, 185, 129, .35) inset; /* emerald-500 */
}

/* To be reviewed/fixed ❌ → Rose/Rojo */
.badge--status-tbfixed {
background: #FFE4E6; /* rose-100 */
color: #9F1239; /* rose-800 */
border-color: #FECDD3; /* rose-200 */
box-shadow: 0 0 0 1px rgba(244, 63, 94, .35) inset; /* rose-500 */
}

/* ===== Colores PRIORITY ===== */
/* High → Rojo */
.badge--prio-high {
background: #FEE2E2; /* red-100 */
color: #991B1B; /* red-800 */
border-color: #FECACA; /* red-200 */
box-shadow: 0 0 0 1px rgba(239, 68, 68, .35) inset; /* red-500 */
}
/* Medium → Amarillo */
.badge--prio-medium {
background: #FEF3C7; /* amber-100 */
color: #92400E; /* amber-800 */
border-color: #FDE68A; /* amber-200 */
box-shadow: 0 0 0 1px rgba(251, 191, 36, .35) inset; /* amber-400 */
}
/* Low → Verde */
.badge--prio-low {
background: #DCFCE7; /* green-100 */
color: #166534; /* green-800 */
border-color: #BBF7D0; /* green-200 */
box-shadow: 0 0 0 1px rgba(34, 197, 94, .35) inset; /* green-500 */
}

/* ===== Hover/focus (opcional) ===== */
.badge[data-clickable="true"] { cursor: pointer; transition: filter .15s ease; }
.badge[data-clickable="true"]:hover { filter: brightness(0.97); }
.badge:focus-visible { outline: 2px solid rgba(2,132,199,.25); outline-offset: 2px; }


/* ===== Mantener colores de STATUS en Task Dashboard (modo oscuro) ===== */
/* En la columna STATUS de la tabla principal, conservamos las pills con los mismos colores que en modo claro */

/* Dark mode: fuerza los colores de las pills de STATUS solo en Task Dashboard */
html.dark #task-list-view .badge--status-pending {
  background: #FBBF24 !important; /* amber-400 (más vibrante) */
  color: #111827 !important;      /* texto oscuro para contraste */
  border-color: #F59E0B !important; /* amber-500 */
  box-shadow: 0 0 0 1px rgba(245, 158, 11, .45) inset !important; /* amber-500 */
}
html.dark #task-list-view .badge--status-working {
  background: #60A5FA !important; /* blue-400 (más vibrante) */
  color: #0F172A !important;      /* texto oscuro */
  border-color: #3B82F6 !important; /* blue-500 */
  box-shadow: 0 0 0 1px rgba(59, 130, 246, .45) inset !important; /* blue-500 */
}
html.dark #task-list-view .badge--status-onreview {
  background: #FB923C !important; /* orange-400 (más vibrante) */
  color: #111827 !important;
  border-color: #F97316 !important; /* orange-500 */
  box-shadow: 0 0 0 1px rgba(249, 115, 22, .45) inset !important; /* orange-500 */
}
html.dark #task-list-view .badge--status-completed {
  background: #34D399 !important; /* emerald-400 (más vibrante) */
  color: #052e2a !important;      /* texto muy oscuro */
  border-color: #10B981 !important; /* emerald-500 */
  box-shadow: 0 0 0 1px rgba(16, 185, 129, .45) inset !important; /* emerald-500 */
}
html.dark #task-list-view .badge--status-tbfixed {
  background: #FB7185 !important; /* rose-400 (más vibrante) */
  color: #111827 !important;
  border-color: #F43F5E !important; /* rose-500 */
  box-shadow: 0 0 0 1px rgba(244, 63, 94, .45) inset !important; /* rose-500 */
}

/* Compat: si se usan las clases alternativas status--* en esta vista, fuerza también su color */
html.dark #task-list-view .status--pending { background: #FBBF24 !important; color:#111827 !important; border-color:#F59E0B !important; box-shadow: 0 0 0 1px rgba(245,158,11,.45) inset !important; }
html.dark #task-list-view .status--working { background: #60A5FA !important; color:#0F172A !important; border-color:#3B82F6 !important; box-shadow: 0 0 0 1px rgba(59,130,246,.45) inset !important; }
html.dark #task-list-view .status--onreview { background: #FB923C !important; color:#111827 !important; border-color:#F97316 !important; box-shadow: 0 0 0 1px rgba(249,115,22,.45) inset !important; }
html.dark #task-list-view .status--completed { background: #34D399 !important; color:#052e2a !important; border-color:#10B981 !important; box-shadow: 0 0 0 1px rgba(16,185,129,.45) inset !important; }
html.dark #task-list-view .status--tbfixed { background: #FB7185 !important; color:#111827 !important; border-color:#F43F5E !important; box-shadow: 0 0 0 1px rgba(244,63,94,.45) inset !important; }





/* ----- Botón bonito ----- */
.send-btn {
--h: 48px;
--rad: 999px;
--padx: 22px;
--shadow: 0 8px 20px rgba(76, 110, 245, .35);
--glow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 3px rgba(76, 110, 245, .15);
height: var(--h);
padding: 0 var(--padx);
border-radius: var(--rad);
border: 0;
outline: none;
cursor: pointer;
font: 600 14px/1 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
letter-spacing: .2px;
color: #fff;
background: linear-gradient(135deg, #4c6ef5, #845ef7 55%, #5c7cfa);
box-shadow: var(--shadow);
position: relative;
transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
display: inline-flex;
align-items: center;
gap: 10px;
}

.send-btn:hover {
transform: translateY(-1px);
filter: brightness(1.05);
box-shadow: var(--shadow), var(--glow);
}

.send-btn:active {
transform: translateY(0);
filter: brightness(.98);
}

.send-btn .icon {
width: 18px;
height: 18px;
display: inline-block;
position: relative;
}

.send-btn .icon:before {
content: "";
position: absolute;
inset: 0;
background: conic-gradient(from 210deg, #fff 0 20%, transparent 20 100%);
mask: radial-gradient(circle at 70% 30%, transparent 6px, #000 7px);
opacity: .95;
}

/* Ripple */
.send-btn .ripple {
position: absolute;
border-radius: 999px;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, .35);
pointer-events: none;
animation: ripple .6s ease forwards;
}



/* Loading spinner */
.send-btn.loading {
pointer-events: none;
opacity: .85;
}

.send-btn.loading .label {
visibility: hidden;
}

.send-btn.loading:after {
content: "";
position: absolute;
right: 16px;
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, .5);
border-top-color: #fff;
animation: spin .9s linear infinite;
}



/* Variante secondary por si la necesitas */
.btn-secondary {
background: #fff;
color: #334155;
border: 1px solid #e5e7eb;
box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
}

.btn-secondary:hover {
box-shadow: 0 8px 22px rgba(15, 23, 42, .12);
}

/* ancho/alto consistentes */
th.w-40,
td.w-40 {
width: 10rem;
}

/* o usa Tailwind w-40 */
.client-row-logo {
max-height: 40px;
max-width: 120px;
object-fit: contain;
}

/* celda de logo consistente y sin solapes */
#clients-view table {
table-layout: fixed;
width: 100%;
}

.client-row-logo {
display: block;
max-height: 40px;
/* alto tope */
max-width: 120px;
/* ancho tope */
width: auto;
height: auto;
object-fit: contain;
/* conserva proporción */
}

/* por si alguna utilidad de Tailwind mete borde/redondeo en el preview del modal */
#clientLogoPreview {
max-width: auto;
height: auto;
object-fit: contain;
border: 0 !important;
border-radius: 0 !important;
}


/* ——— Tabla de Clients (columna de LOGO) ——— */
#clients-view td:first-child img {
width: auto !important;
height: auto !important;
max-height: 40px !important;
/* ~ h-10 */
max-width: 160px !important;
/* puedes ajustar */
object-fit: contain !important;
border: none !important;
border-radius: 0 !important;
display: inline-block !important;
}

/* ——— Preview en el modal Edit/New Client ——— */


tr:hover .task-cell .truncate {
overflow: visible;
text-overflow: clip;
white-space: normal;
max-width: none;
}


.btn-edit-task[aria-busy="true"]::after {
content: '';
display: inline-block;
vertical-align: middle;
margin-left: 8px;
width: 14px;
height: 14px;
border-radius: 9999px;
border: 2px solid #fff;
border-right-color: transparent;
animation: spin .6s linear infinite;
}

/* Forzar el estilo del spinner DENTRO del overlay */
/* ==== Loader naranja discreto (esquina) ==== */
/* ==== Loader naranja discreto (esquina, no tapa clics) ==== */
#loader{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 60;                 /* por encima de la tabla, por debajo de modales si tienes z > 100 */
  display: inline-flex;
  align-items: center;
  gap: 8px;

  background: rgba(249, 255, 224, .98);  /* verde muy claro */
  border: 1px solid #d6df20;
  color: #3f4a00;
  padding: 8px 10px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(214, 223, 32, .26);

  pointer-events: none;        /* NO bloquea clicks (los botones debajo siguen clicables) */
  opacity: 0;
  transform: translateY(6px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}
#loader.show{
  opacity: 1;
  transform: translateY(0) scale(1);
}
#loader .spinner{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #d6df20;
  border-top-color: #e5f26a;
  border-right-color: #e5f26a;
  animation: spin .8s linear infinite;
  flex: 0 0 auto;
}
#loader .msg{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap;
}
@keyframes spin { to { transform: rotate(360deg); } }

#taskPagination{
  min-height: 44px; /* asegura hueco visible para los botones */
}


/* Asegura layout estable en la tabla de Clients */
/* Tabla de Clients estable */
#clients-view table {
table-layout: fixed;
width: 100%;
}

#clients-view th,
#clients-view td {
vertical-align: top;
}

#clients-view td:nth-child(3) {
overflow: hidden;
}

/* evita desbordes laterales */

/* Caja interna con scroll controlado (no en el <td> directamente) */
.client-info-box {
font-size: .75rem;
line-height: 1rem;
max-height: 120px;
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
padding-right: .25rem;
scrollbar-gutter: stable;
}

body {
font-family: 'Inter', sans-serif;
}

.view {
display: none;
}

.view.active {
display: block;
animation: fadeIn .25s;
}

/* filas compactas */
#task-table-body tr td {
padding: 6px 8px !important;
}

table.tasks-table {
table-layout: fixed;
width: 100%;
}

table.tasks-table td:nth-child(1),
table.tasks-table th:nth-child(1) {
width: 250px;
max-width: 250px;
}

table.tasks-table td:nth-child(1)>*,
table.tasks-table td:nth-child(1) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

td.relative {
position: relative;
overflow: visible;
}

.actions-menu {
display: block;
}

/* ===== MEJORAS DE BOTONES Y NOTIFICACIONES ===== */
.btn-edit-task,
.btn-delete-task,
.btn-notify-task,
.btn-next-step {
font-weight: 500;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.btn-edit-task:hover,
.btn-delete-task:hover,
.btn-notify-task:hover,
.btn-next-step:hover {
transform: translateY(-1px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.contextual-notice {
animation: slideInDown 0.3s ease-out;
}

@keyframes slideInDown {
from {
opacity: 0;
transform: translateY(-20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

/* Loading state para botones */
.btn-loading {
opacity: 0.7;
pointer-events: none;
}

.btn-loading::after {
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-left: 8px;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}



/* ===== ESTILOS PARA MODAL DE ELIMINACIÓN DE NOTAS ===== */
#deleteNoteModal {
backdrop-filter: blur(4px);
}

#deleteNoteModal .bg-white {
animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
from {
opacity: 0;
transform: translate(-50%, -60%) scale(0.95);
}

to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}

/* Animación para Delete notas */
.note-anim-delete {
animation: noteDeleteAnimation 0.4s ease-in-out forwards;
}

@keyframes noteDeleteAnimation {
0% {
opacity: 1;
transform: translateX(0);
max-height: var(--h);
margin-top: var(--mt);
margin-bottom: var(--mb);
padding-top: var(--pt);
padding-bottom: var(--pb);
}

50% {
opacity: 0.3;
transform: translateX(20px);
}

100% {
opacity: 0;
transform: translateX(100px);
max-height: 0;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
overflow: hidden;
}
}

/* =========================================================
DARK MODE — NEUTRAL/CLARO → OSCURO (SIN TOCAR COLORES SÓLIDOS)
========================================================= */

/* =========================================================
DARK MODE — NEUTRAL/CLARO → OSCURO (SIN TOCAR COLORES SÓLIDOS)
========================================================= */

/* Fondo base y texto por defecto */
html.dark body { background:#0b1220 !important; color:#e5e7eb !important; }

/* 1) Superficies claras “neutras” → gris oscuro
(NO tocamos colores fuertes como .bg-blue-600, etc.) */
html.dark .bg-white,
html.dark .bg-gray-50, html.dark .bg-gray-100, html.dark .bg-gray-200,
html.dark .bg-yellow-50, html.dark .bg-yellow-100, html.dark .bg-yellow-200,
html.dark .bg-blue-50, html.dark .bg-blue-100, html.dark .bg-blue-200,
html.dark .bg-orange-50, html.dark .bg-orange-100, html.dark .bg-orange-200,
html.dark .bg-green-50, html.dark .bg-green-100, html.dark .bg-green-200,
html.dark .bg-red-50, html.dark .bg-red-100, html.dark .bg-red-200,
html.dark .bg-purple-50, html.dark .bg-purple-100, html.dark .bg-purple-200 {
background:#1b2130 !important; /* superficie */
}

/* 2) Bordes claros → gris medio */
html.dark .border,
html.dark .border-gray-50, html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-gray-300,
html.dark .border-yellow-200, html.dark .border-yellow-300, html.dark .border-yellow-400,
html.dark .border-blue-200, html.dark .border-blue-300, html.dark .border-blue-400,
html.dark .border-orange-200, html.dark .border-orange-300, html.dark .border-orange-400,
html.dark .border-green-200, html.dark .border-green-300, html.dark .border-green-400,
html.dark .border-red-200, html.dark .border-red-300, html.dark .border-red-400,
html.dark .border-purple-200, html.dark .border-purple-300, html.dark .border-purple-400 {
border-color:#333a48 !important;
}

/* 3) Texto neutro → claro (NO tocamos .text-red-*, .text-blue-* etc.) */
html.dark .text-gray-800 { color:#e5e7eb !important; }
html.dark .text-gray-700 { color:#d1d5db !important; }
html.dark .text-gray-600 { color:#cbd5e1 !important; }
html.dark .text-gray-500 { color:#9fb2c7 !important; }

/* 4) Sombras más suaves en oscuro */
html.dark .shadow, html.dark .shadow-md, html.dark .shadow-lg {
box-shadow: 0 6px 18px rgba(0,0,0,.45) !important;
}

/* 5) Inputs/Selects/Textareas “neutros” → oscuros
(los inputs coloreados custom se mantienen) */
html.dark input,
html.dark select,
html.dark textarea {
background:#121829 !important;
color:#e5e7eb !important;
border-color:#334155 !important;
}
html.dark ::placeholder { color:#93a4b6 !important; }

/* 6) Chips / badges / pills neutrales → oscuros
(los de color sólido se quedan igual) */
html.dark .badge,
html.dark .pill,
html.dark .priority {
background:#232a39 !important;
color:#e2e8f0 !important;
border-color:#3b4352 !important;
}
/* ==== PRIORITY colors in DARK MODE (override) ==== */
html.dark .badge--prio-high {
  background: #FEE2E2 !important;    /* red-100 */
  color: #991B1B !important;          /* red-800 */
  border-color: #FECACA !important;   /* red-200 */
  box-shadow: 0 0 0 1px rgba(239, 68, 68, .35) inset !important; /* red-500 */
}
html.dark .badge--prio-medium {
  background: #FEF3C7 !important;     /* amber-100 */
  color: #92400E !important;           /* amber-800 */
  border-color: #FDE68A !important;    /* amber-200 */
  box-shadow: 0 0 0 1px rgba(251, 191, 36, .35) inset !important; /* amber-400 */
}
html.dark .badge--prio-low {
  background: #DCFCE7 !important;     /* green-100 */
  color: #166534 !important;           /* green-800 */
  border-color: #BBF7D0 !important;    /* green-200 */
  box-shadow: 0 0 0 1px rgba(34, 197, 94, .35) inset !important;  /* green-500 */
}

/* 7) Cards “pastel” → grises oscuros (como pediste) */
html.dark .card-client-notes{
background:#232834 !important;
border-color:#363c49 !important;
color:#e5e7eb !important;
}
html.dark .card-linkedin-notes{
background:#1f2532 !important;
border-color:#333a48 !important;
color:#e5e7eb !important;
}

/* 8) Controles neutrales del header y filtros (botones blancos/gray → oscuros).
Los botones de color (.bg-blue-600, .bg-red-600, etc.) NO se tocan. */
html.dark .theme-toggle-btn:not([aria-pressed="true"]),
html.dark button.bg-white,
html.dark .btn-secondary,
html.dark .px-3.py-2.border, /* tu botón Refresh, etc. */
html.dark #refreshClientListBtn { /* Botón refresh de clientes */
background:#1f2937 !important;
color:#e5e7eb !important;
border-color:#374151 !important;
}

html.dark #refreshClientListBtn:hover {
background:#374151 !important;
color:#f3f4f6 !important;
border-color:#4b5563 !important;
}

html.dark .theme-toggle-btn[aria-pressed="true"] {
/* cuando está activo, respeta el azul sólido */
background:#2563eb !important;
color:#fff !important;
border-color:#2563eb !important;
}

/* 9) Search bar y filtros (estaban blancos) → oscuros */
html.dark .tasks-search .input-wrap {
background:#1b2130 !important;
border-color:#333a48 !important;
}
html.dark .tasks-search .input-wrap i { color:#a7b4c6 !important; }
html.dark .tasks-search .filters select {
background:#1b2130 !important;
color:#e5e7eb !important;
border-color:#333a48 !important;
}

/* 10) Tablas (lista grande): fondos y hover sutil en oscuro */
html.dark table { color:#e5e7eb !important; }
html.dark thead,
html.dark thead.bg-gray-50 {
background:#121829 !important;
color:#e5e7eb !important;
border-bottom:1px solid #2b3240 !important;
}
html.dark tbody tr { background:transparent !important; }
html.dark tbody tr:hover { background:#151c2b !important; }
html.dark td, html.dark th { border-color:#2b3240 !important; }

/* 11) Modales neutrales → oscuros (los de color se respetan) */
html.dark .modal-card,
html.dark #notifyReviewModal .modal-card,
html.dark #deleteNoteModal .bg-white {
background:#1b2130 !important;
color:#e5e7eb !important;
border-color:#333a48 !important;
}
html.dark .modal-backdrop,
html.dark #notifyReviewModal .modal-backdrop {
background:rgba(0,0,0,.55) !important;
}

/* 12) Zonas “skeleton” y barras informativas claras → oscuros */
html.dark .table-skeleton .skeleton-row{
background:linear-gradient(90deg,#1b2130,#202638,#1b2130) !important;
}
html.dark .li-note__meta { color:#9fb2c7 !important; }

/* 13) Botones neutrales con bordes grises (NO colores fuertes) → oscuros */
html.dark button.bg-gray-50,
html.dark button.bg-gray-100,
html.dark .border-gray-300.rounded-md {
background:#1f2937 !important;
color:#e5e7eb !important;
border-color:#374151 !important;
}

/* =========================================================
OPCIONAL: Mantener algo blanco a propósito (whitelist)
Usa .keep-white o [data-keep="white"] en ese bloque puntual
========================================================= */
html.dark .keep-white,
html.dark [data-keep="white"] {
background:#ffffff !important;
color:#111827 !important;
border-color:#e5e7eb !important;
}
html.dark .keep-white input,
html.dark .keep-white select,
html.dark .keep-white textarea {
background:#ffffff !important; color:#111827 !important; border-color:#e5e7eb !important;
}

/* ===== Hover contraste automático (Tailwind utilities comunes) ===== */
html.dark .hover\:bg-white:hover,
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-blue-50:hover,
html.dark .hover\:bg-slate-50:hover {
background:#f8fafc !important; /* blanco suave */
color:#111827 !important; /* texto negro */
border-color:#e5e7eb !important;
}

/* Si algún botón/link usa .hover:bg-white y además tiene ícono */
html.dark .hover\:bg-white:hover i,
html.dark .hover\:bg-gray-50:hover i,
html.dark .hover\:bg-blue-50:hover i,
html.dark .hover\:bg-slate-50:hover i {
color:#111827 !important;
filter:none !important;
}

/* ===== Barra lateral (nav) ===== */
/* Asegurar que el sidenav tenga el fondo correcto en modo light */
#sidenav {
  background: #ffffff !important; /* Fondo blanco en modo light */
}

html.dark #sidenav {
  background: #0f172a !important; /* Fondo oscuro en modo dark */
}

/* Cache notifications en sidenav */
#cache-notifications {
  min-height: 0;
  max-height: 120px;
  overflow-y: auto;
  scrollbar-width: thin;
}

#cache-notifications::-webkit-scrollbar {
  width: 4px;
}

#cache-notifications::-webkit-scrollbar-track {
  background: transparent;
}

#cache-notifications::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2px;
}

html.dark #cache-notifications::-webkit-scrollbar-thumb {
  background: #475569;
}

/* Elementos dentro del sidenav en modo light */
#sidenav .nav-item {
  color: #374151 !important; /* Texto gris oscuro en modo light */
}

html.dark #sidenav .nav-item {
  color: #e5e7eb !important; /* Texto claro en modo dark */
}

/* Hover en ítems de la izquierda: fondo claro = texto negro */
html.dark .sidebar .nav-item:hover,
html.dark .sidebar a:hover,
html.dark .sidebar button:hover,
html.dark #sidenav .nav-item:hover,
html.dark #sidenav a:hover,
html.dark #sidenav button:hover {
background:#f8fafc !important;
color:#111827 !important;
border-color:#e5e7eb !important;
}
html.dark .sidebar .nav-item:hover i,
html.dark .sidebar a:hover i,
html.dark .sidebar button:hover i,
html.dark #sidenav .nav-item:hover i,
html.dark #sidenav a:hover i,
html.dark #sidenav button:hover i { color:#111827 !important; }

/* Si tienes estado activo que queda claro, fuerza contraste */
html.dark .sidebar .nav-item.active,
html.dark .sidebar .nav-item[aria-current="page"],
html.dark #sidenav .nav-item.active,
html.dark #sidenav .nav-item[aria-current="page"] {
background:#f8fafc !important;
color:#111827 !important;
border-color:#e5e7eb !important;
}

/* ===== Botones neutros del header (Refresh/Light/Dark) en hover claro ===== */
html.dark .theme-toggle-btn:not([aria-pressed="true"]):hover,
html.dark button.bg-white:hover,
html.dark .btn-secondary:hover,
html.dark .px-3.py-2.border:hover {
background:#f8fafc !important;
color:#111827 !important;
border-color:#e5e7eb !important;
}

/* ===== “Tira”/barra superior de Create New Task si queda blanca ===== */
/* Aplica contraste automático si esa franja usa bg-white o similar */
html.dark .title-strip.bg-white,
html.dark .title-strip.bg-gray-50,
html.dark .title-strip.bg-slate-50 {
background:#f8fafc !important;
color:#111827 !important;
}
html.dark .title-strip.bg-white * ,
html.dark .title-strip.bg-gray-50 * ,
html.dark .title-strip.bg-slate-50 * { color:#111827 !important; }

/* ===== Utilidad por si necesitas forzarlo en cualquier bloque ===== */
/* Añade la clase "hover-text-dark" en el elemento que se vuelve claro al hover */
html.dark .hover-text-dark:hover,
html.dark .hover-text-dark:hover * {
color:#111827 !important;
}

/* Acento suave en tema oscuro, específico del sidenav (por si alguna regla global lo tapa) */
html.dark #sidenav #shortcut-cache-indicator:hover,
html.dark #sidenav #clearCacheBtn:hover{
  border-color:#38bdf8 !important;          /* sky-400 */
  box-shadow:0 0 0 1px #38bdf8, 0 6px 14px rgba(56,189,248,.18) !important;
}
html.dark #sidenav #shortcut-cache-indicator:focus-visible,
html.dark #sidenav #clearCacheBtn:focus-visible{
  outline:2px solid #38bdf8 !important;
  outline-offset:2px !important;
}

/* Forzar fondo correcto del bloque de cache en light/dark */
#cacheSection { background:#ffffff !important; }
html.dark #cacheSection { background:#0f172a !important; }

/* =========================
MEJORAS ADICIONALES (AÑADIDAS)
========================= */

/* Focus accesible en oscuro (inputs/selects/textarea) */
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
outline: 2px solid #2563eb !important;
outline-offset: 1px !important;
border-color:#2563eb !important;
box-shadow: 0 0 0 3px rgba(37,99,235,.25) !important;
}

/* Menús de <select> nativos (opciones) en oscuro */
html.dark select option {
background:#121829 !important;
color:#e5e7eb !important;
}

/* Checkbox / radio con buen contraste (si el navegador soporta accent-color) */
html.dark input[type="checkbox"],
html.dark input[type="radio"] {
accent-color: #2563eb;
}

/* Placeholders y labels débiles en zonas claras por hover */
html.dark .hover\:bg-white:hover .placeholder-gray,
html.dark .hover\:bg-gray-50:hover .placeholder-gray {
color:#6b7280 !important;
}

/* Ítems de menú desplegable neutrales (dropdowns) → oscuros */
html.dark .dropdown-menu,
html.dark .menu,
html.dark .menu .menu-item {
background:#1b2130 !important;
color:#e5e7eb !important;
border-color:#333a48 !important;
}
html.dark .menu .menu-item:hover { background:#151c2b !important; }

/* Paginadores y chips neutrales */
html.dark .pagination .page-link,
html.dark .chip {
background:#232a39 !important;
color:#e2e8f0 !important;
border-color:#3b4352 !important;
}

/* Tooltips neutrales */
html.dark .tooltip,
html.dark .tooltip .tooltip-inner {
background:#1b2130 !important;
color:#e5e7eb !important;
border-color:#333a48 !important;
}

/* Barra lateral: íconos SVG que heredan color */
html.dark .sidebar svg { fill: currentColor !important; }
html.dark #sidenav svg { fill: currentColor !important; }

/* Asegurar colores correctos para texto y elementos del sidenav en modo light */
#sidenav #userInfo {
  color: #374151 !important; /* Texto gris oscuro en modo light */
}

html.dark #sidenav #userInfo {
  color: #e5e7eb !important; /* Texto claro en modo dark */
}

/* Separadores dentro del sidenav */
#sidenav .border-gray-200 {
  border-color: #e5e7eb !important; /* Borde gris claro en modo light */
}

html.dark #sidenav .border-gray-200,
html.dark #sidenav .border-t {
  border-color: #374151 !important; /* Borde gris oscuro en modo dark */
}

/* Título del sidenav */
#sidenav .tm2-title {
  color: #374151 !important; /* Texto gris oscuro en modo light */
}

html.dark #sidenav .tm2-title {
  color: #e5e7eb !important; /* Texto claro en modo dark */
}

/* =========================================================
RESPONSIVE ANTI-OVERLAP PACK (append-only)
Evita solapes en pantallas angostas sin tocar tus clases.
========================================================= */

/* ---------- Utilidades generales ---------- */
.min-w-0 { min-width: 0 !important; } /* Para flex children que truncan */
.no-shrink { flex-shrink: 0 !important; } /* Botones/íconos que no deben encogerse */
.wrap { flex-wrap: wrap !important; } /* Forzar wrapping cuando sea necesario */
.nowrap { white-space: nowrap !important; }

/* Botón “fluido” para cabeceras estrechas */
.btn-fluid {
min-width: 0 !important;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

/* Contenedor de tabla con scroll horizontal seguro */
.rtable {
display: block;
width: 100%;
overflow-x: auto; /* Evita desbordes */
-webkit-overflow-scrolling: touch;
}
.rtable > table {
min-width: 900px; /* Ajusta si necesitas más ancho mínimo */
}

/* Celdas densas y truncadas para espacios pequeños */
.compact-cells td, .compact-cells th {
padding: 6px 8px !important;
vertical-align: top;
}
.truncate-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}

/* ---------- Header del detalle (Create/Edit Task) ---------- */
/* Permite que el header se parta en dos líneas sin solaparse */
@media (max-width: 1024px) {
#task-detail-view header,
#task-list-view header,
#client-profile-view header {
flex-wrap: wrap;
gap: .5rem;
}
#task-detail-view header > .min-w-0 { width: 100%; } /* Título a ancho completo */
#saveTaskBtn { align-self: flex-start; }
#backToListBtn { max-width: 100%; }
}

/* ---------- Sidebar colapsable en ancho medio ---------- */
@media (max-width: 1024px) {
nav.w-64 { width: 3.5rem !important; } /* Sidebar a solo iconos */
nav.w-64 .p-4 > h1,
nav.w-64 .p-4 > p,
nav.w-64 .nav-item { padding-left: .75rem !important; padding-right: .75rem !important; }
nav.w-64 .nav-item i { margin-right: 0 !important; }
nav.w-64 .nav-item,
nav.w-64 .nav-item * { white-space: nowrap; }
nav.w-64 .nav-item span,
nav.w-64 .nav-item .mr-3,
nav.w-64 .p-4 *:not(i) { display: none !important; } /* Oculta textos, deja iconos */
main.flex-1 { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* ---------- Buscador + filtros en stack ---------- */
@media (max-width: 860px) {
.tasks-search { flex-wrap: wrap; gap: .5rem; }
.tasks-search .filters { width: 100%; justify-content: flex-start; }
.tasks-search .filters select { width: 48%; }
}

/* ---------- Grids del formulario (detalle de tarea) ---------- */
@media (max-width: 1100px) {
/* Core Details: de 5 columnas -> 2 */
#task-detail-form fieldset:nth-of-type(1) .grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 720px) {
#task-detail-form fieldset .grid { grid-template-columns: 1fr !important; }
#task-detail-form select,
#task-detail-form input,
#task-detail-form textarea { width: 100% !important; }
}

/* ---------- Tabla principal: scroll + columnas opcionales ---------- */
/* Envuélvela con <div class="rtable">…</div> o aplica rtable al contenedor ya existente */
@media (max-width: 980px) {
/* Reduce tipografía levemente para ganar aire */
table.tasks-table { font-size: 12px; }
/* Oculta columnas menos críticas si quieres (aplica .col-hide-md en TH/TD) */
.col-hide-md { display: none !important; }
}
@media (max-width: 720px) {
.col-hide-sm { display: none !important; }
}

/* ---------- Cards y badges apilables ---------- */
@media (max-width: 860px) {
.section-with-clamp .see-more-section { width: 100%; }
#clientViewSwitch { flex-wrap: wrap; row-gap: .5rem; }
#clientViewSwitch > button { flex: 1 1 140px; }
}

/* ---------- Anti-solape de iconos + texto en botones blancos --------- */
@media (max-width: 640px) {
.px-3.py-2.border,
.btn-secondary,
button.bg-white {
gap: .5rem; padding-left: .5rem; padding-right: .5rem;
}
.px-3.py-2.border span,
.btn-secondary span,
button.bg-white span { max-width: 10rem; }
}

/* ---------- Títulos que recortan correctamente ---------- */
#task-title-header,
#clientNameTitle {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

/* ========== NOTIFICACIÓN DRAGGABLE DE PRECARGA ========== */
.draggable-notification {
  transition: box-shadow 0.2s ease;
  z-index: 9999 !important;
  position: fixed !important;
}

.draggable-notification:hover {
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.draggable-notification:active {
  box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

/* Indicador visual de que es movible */
.draggable-notification::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, #f97316, #f59e0b);
  border-radius: 1px;
  opacity: 0.3;
}

.draggable-notification::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 8px;
  width: 16px;
  height: 2px;
  background: linear-gradient(90deg, #f97316, #f59e0b);
  border-radius: 1px;
  opacity: 0.3;
}

/* ---------- Dark mode: header translúcido también en angosto ---------- */
html.dark #task-detail-view header,
html.dark #client-profile-view header,
html.dark #task-list-view header {
background: rgba(18, 24, 41, .92) !important; /* ~ #121829 */
border-color: #2b3240 !important;
}

/* ==== DARK MODE: Shortcuts (corrige texto negro) ==== */

/* Forzar el título y cualquier texto dentro de la card */
html.dark #client-shortcuts .sc-title,
html.dark #client-shortcuts .sc-card,
html.dark #client-shortcuts .sc-card * {
color: #f9fafb !important; /* blanco */
/* Improve contrast for credit badge in dark mode */
html.dark #client-shortcuts .cr-badge {
  background:#7c2d12 !important; border-color:#a16207 !important; color:#fff !important;
}
-webkit-text-fill-color: #f9fafb !important; /* Safari */
opacity: 1 !important; /* por si hay utilidades con opacidad */
mix-blend-mode: normal !important;
}

/* Ajuste de fondo/borde (en tu CSS ya hay uno, pero lo reforzamos) */
html.dark #client-shortcuts .sc-card {
background: #1b2130 !important;
border-color: #333a48 !important;
box-shadow: 0 6px 18px rgba(0,0,0,.45) !important;
}

/* Chip del ícono */
html.dark #client-shortcuts .sc-chip {
background: #231f1a !important;
border-color: #3a3025 !important;
}

/* Icono de "abrir" a la derecha un poco más claro */
html.dark #client-shortcuts .sc-open,
html.dark #client-shortcuts .sc-open i {
color: #cbd5e1 !important;
opacity: .9 !important;
}

/* Si alguna utilidad de Tailwind pisa el color, la neutralizamos */
html.dark #client-shortcuts .text-black,
html.dark #client-shortcuts .text-gray-900,
html.dark #client-shortcuts .text-gray-800 {
color: #f9fafb !important;
}

/* (por si también usas el id antiguo en algún render) */
html.dark #clientShortcutsGrid > a,
html.dark #clientShortcutsGrid > a * {
color: #f9fafb !important;
}

/* Credit summary chips dark mode */
html.dark #creditSummaryRow .credit-chip {
  background: #7c2d12 !important;
  color: #fff !important;
  border-color: #a16207 !important;
}

/* ---------- Sugerencia de helpers (aplícalos donde veas solapes) ---------- */
/* .min-w-0 a contenedores flex/h1 con truncate
.btn-fluid a botones largos en headers
.rtable al contenedor que envuelve tu tabla principal
.compact-cells a la tabla si necesitas más densidad */
/* Animación personalizada más suave y continua */
/* Animación suave del logo */

/* ==== ESTILOS ANIMACIÓN LOGO/NOTEBOOK (prefijo tm2-) ==== */

/* ===== Tamaño compacto tipo icono ===== */
.tm2-badge { width: 72px; height: 72px; }
.tm2-scene {
width: 100%; height: 100%;
display: grid; place-items: center;
perspective: 1000px; -webkit-perspective: 1000px;
transform: translateZ(0);
}

/* ===== Libreta ===== */
.tm2-nb {
position: relative;
width: 72px; height: 72px;
border-radius: 14px; overflow: visible;
transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
will-change: transform;
animation: tm2-tilt 11s ease-in-out infinite;
filter: drop-shadow(0 3px 8px rgba(0,0,0,.18));
}

/* ===== Tapas ===== */
.tm2-cover {
position: absolute; inset: 0;
border-radius: 14px;
backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.tm2-front {
background:
linear-gradient(90deg, #dc2626 0 24px, transparent 24px 100%),
linear-gradient(180deg,#ef4444 0 25%,#f97316 25% 50%,#eab308 50% 75%,#22c55e 75% 100%);
transform-origin: left center;
z-index: 3;
box-shadow: 0 5px 15px rgba(0,0,0,.2);
transform: rotateY(0deg) translateZ(2px);
animation: tm2-coverFlip 11s ease-in-out infinite, tm2-frontSheen 11s ease-in-out infinite;
}
.tm2-back { background:#0f172a; transform: rotateY(180deg); }

/* ===== Página interior ===== */
.tm2-page {
position: absolute; inset: 2px;
background:#fff; border-radius: 12px;
box-shadow: inset 0 0 4px rgba(0,0,0,.1);
display:flex; align-items:center; justify-content:center;
overflow:hidden; z-index:2; transform: translateZ(1px);
animation: tm2-pageBreath 11s ease-in-out infinite;
}

/* Dibujo (reveal) */
.tm2-draw { width: 56px; height: 20px; position:absolute; top:18px; left:8px; opacity:0; }
.tm2-stroke {
fill:none; stroke:#111827; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
stroke-dasharray:180; stroke-dashoffset:180;
animation: tm2-strokeDraw 2.9s ease-in-out 5.1s forwards, tm2-drawWindow 11s ease-in-out infinite;
}

/* ===== LOGO dentro de la página ===== */
.tm2-logo{
position: absolute;
width: 44px; height: 44px;
object-fit: contain;
inset: auto; /* centrado por flex del contenedor */
opacity: 0; transform: scale(.9);
filter: drop-shadow(0 2px 2px rgba(0,0,0,.12));
/* Aparece tras la escritura y luego se oculta */
animation:
tm2-logoReveal 11s ease-in-out infinite;
}

/* ===== Lápiz: entra desde abajo, escribe y sale otra vez hacia abajo ===== */

/* ===== Aros: 5 exactos, bien encajados (no sobresalen) ===== */
.tm2-rings{
position:absolute; left:2px; top:10px; height:52px; width:8px;
display:grid; grid-auto-rows:1fr; gap:6px; z-index:4; pointer-events:none;
transform: translateZ(2px);
}
.tm2-rings span{
display:block; width:8px; height:6px;
border:2px solid rgba(0,0,0,.22); border-radius:6px; background:#f3f4f6;
animation: tm2-ringShimmer 1.8s ease-in-out infinite;
}
.tm2-rings span:nth-child(1){ animation-delay: .0s; }
.tm2-rings span:nth-child(2){ animation-delay: .15s; }
.tm2-rings span:nth-child(3){ animation-delay: .30s; }
.tm2-rings span:nth-child(4){ animation-delay: .45s; }
.tm2-rings span:nth-child(5){ animation-delay: .60s; }

/* ===== Título externo debajo en naranja ===== */
.tm2-title{
margin-top:8px;
font-family: system-ui, -apple-system, Segoe UI, Roboto, "Poppins", sans-serif;
font-weight:800; letter-spacing:.4px;
font-size:12px; color:#f97316; /* naranja */
}

/* ====== ANIMACIONES ====== */
@keyframes tm2-tilt { 0%,100%{transform:rotateZ(0)} 50%{transform:rotateZ(2deg)} }
@keyframes tm2-coverFlip{
/* 0–8% cerrada; 18–45% abierta; 55–92% se cierra */
0%,8%,100%{transform:rotateY(0deg) translateZ(2px)}
18%,45%{transform:rotateY(-165deg) translateZ(2px)}
55%,92%{transform:rotateY(0deg) translateZ(2px)}
}
@keyframes tm2-strokeDraw{ to{ stroke-dashoffset:0 } }
@keyframes tm2-drawWindow{ 0%,20%,100%{opacity:0} 26%,52%{opacity:1} }

/* Ventana de visibilidad alineada con apertura */
@keyframes tm2-penWindow{ 0%,20%,100%{opacity:0} 26%,52%{opacity:1} }

/* ENTRAR -> ESCRIBIR -> SALIR (desde y hacia abajo; detrás al final) */
@keyframes tm2-penEnterWriteExit{
0% { opacity:0; transform: translate(10px, 84px) rotate(-18deg); z-index:4; }
15% { opacity:1; transform: translate(14px, 58px) rotate(-14deg); }
35% { transform: translate(24px, 36px) rotate(-10deg); }
55% { transform: translate(44px, 28px) rotate(-10deg); }
75% { transform: translate(58px, 40px) rotate(-14deg); }
100% { opacity:0; transform: translate(10px, 90px) rotate(-18deg); z-index:1; }
}

/* LOGO: aparece tras el trazo (52–70%) y se oculta (80–100%) */
@keyframes tm2-logoReveal{
0%,48% { opacity:0; transform: scale(.9); }
40%,60% { opacity:1; transform: scale(1); }
70%,100% { opacity:0; transform: scale(.96); }
}

/* Micro-animaciones extra (no afectan el flujo) */
@keyframes tm2-frontSheen{
/* brillo diagonal suave solo cuando abre (alrededor de 18–45%) */
0%,16%,46%,100% { filter: none; }
22%,40% { filter: drop-shadow(0 6px 14px rgba(0,0,0,.22)) brightness(1.02); }
}
@keyframes tm2-ringShimmer{
0%,100% { box-shadow: inset 0 0 0 rgba(0,0,0,0); transform: translateZ(2px); }
50% { box-shadow: inset 0 0 3px rgba(0,0,0,.12); transform: translateZ(2px) scale(1.02); }
}
@keyframes tm2-pageBreath{
0%,100% { box-shadow: inset 0 0 4px rgba(0,0,0,.10); }
50% { box-shadow: inset 0 0 6px rgba(0,0,0,.16); }
}

/* Accesibilidad / performance */
.tm2-nb, .tm2-front { will-change: transform; }
@media (prefers-reduced-motion: reduce){
.tm2-badge:not([data-allow-motion="true"]) .tm2-nb,
.tm2-badge:not([data-allow-motion="true"]) .tm2-front,
.tm2-badge:not([data-allow-motion="true"]) .tm2-pen,
.tm2-badge:not([data-allow-motion="true"]) .tm2-draw,
.tm2-badge:not([data-allow-motion="true"]) .tm2-logo,
.tm2-badge:not([data-allow-motion="true"]) .tm2-rings span,
.tm2-badge:not([data-allow-motion="true"]) .tm2-page { animation:none !important; }
}


/* === PRIORITY overlay visible sobre el gris === */
.priority-indicator {
  position: relative;
  display: inline-block;
  background-color: #e5e7eb;
  color: #374151;
  border-radius: 9999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  overflow: visible;
}
/* === CLIENTS CONTAINER === */
.clients-card-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  background: #f3f4f6; /* gris claro para modo claro */
  padding: 20px;
  border-radius: 14px;
}

/* MODO OSCURO */
html.dark .clients-card-grid {
  background: #1f1f1f; /* gris oscuro */
}

/* === CARD ESTILO === */
.client-card {
  display: flex;
  flex-direction: column;
  background: #ffffff; /* fondo claro */
  color: #333;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.client-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(255, 140, 0, 0.25);
}

/* MODO OSCURO */
html.dark .client-card {
  background: #2b2b2b;
  color: #e5e5e5;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* === LOGO CONTAINER NARANJA === */
.client-card__logo {
  width: 70px;
  height: 70px;
  background: linear-gradient(180deg, #ff8a00, #ff5500);
  border-radius: 12px;
  object-fit: contain;
  padding: 6px;
  border: 2px solid #ffb26b;
}

/* === HEADER === */
.client-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  position: relative; /* for absolute index badge */
}
html.dark .client-card__header {
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Total clients badge dark mode */
html.dark .client-total-badge {
  background: #7c2d12 !important; /* orange-900 */
  color: #fff !important; /* white text */
  border-color: #9a3412 !important; /* orange-800 border */
}
/* Search input dark mode in Clients header */
html.dark #clients-view input#clientSearchInput{
  background:#111827; border-color:#374151; color:#f3f4f6;
}
.client-card__header.stacked {
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.client-card__header.stacked .client-card__title {
  text-align: center;
}
.client-card__index {
  display:inline-flex;
  align-items:center;
  border-radius: 9999px;
  background: #ffedd5; /* orange-100 */
  color: #9a3412; /* orange-800 */
  font-weight: 800;
  font-size: 0.8rem;
  border: 1px solid #fdba74; /* orange-300 */
  position: absolute;
  top: 8px;
  left: 8px;
}
.client-card__title {
  font-weight: 700;
  font-size: 1rem;
  color: #111;
  white-space: normal; /* allow wrapping */
  overflow-wrap: anywhere; /* wrap long words */
}
html.dark .client-card__title {
  color: #fff;
}
.client-card__header.stacked .client-card__logo {
  background: linear-gradient(180deg, #ff8a00, #ff5500);
  margin-bottom: 4px;
}
.client-card__header.stacked .min-w-0 { width: 100%; }
.client-card__header.stacked .client-card__title { max-width: 100%; }
/* index badge for numbering cards */
.client-card__index {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  background: #ffedd5; /* orange-100 */
  color: #9a3412; /* orange-800 */
  font-weight: 800;
  font-size: 0.8rem;
  border: 1px solid #fdba74; /* orange-300 */
}

/* === BODY === */
.client-card__body {
  padding: 12px 16px;
  color: #4b5563;
  font-size: 0.9rem;
  line-height: 1.4;
}
html.dark .client-card__body {
  color: #d1d5db;
}
.client-card__info.clamped {
  max-height: 80px;
  overflow: hidden;
}
.morelessBtn {
  color: #ff7a00;
  background: none;
  border: none;
  padding: 4px 0;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.85rem;
}

/* === BOTONES COMPACTOS === */
.btn-orange,
.btn-yellow,
.btn-red {
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 4px 10px;
  transition: background 0.2s, transform 0.1s;
}
.btn-orange { background: #d6df20; color: #111827; }
.btn-orange:hover { background: #e5f26a; transform: scale(1.05); }

.btn-yellow { background: #facc15; color: #111; }
.btn-yellow:hover { background: #fde047; transform: scale(1.05); }

.btn-red { background: #ef4444; color: white; }
.btn-red:hover { background: #f87171; transform: scale(1.05); }

/* === ACCIONES === */
.client-card__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.07);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
html.dark .client-card__actions {
  background: rgba(255, 255, 255, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* === LOGO CONTAINER === */
.client-card__logo {
  width: 70px;
  height: 70px;
  background: transparent; /* transparente por defecto */
  border-radius: 12px;
  object-fit: contain;
  padding: 4px;
  border: 1px solid transparent;
  transition: background 0.3s, border 0.3s;
}

/* Si el logo detecta fondo blanco, se aplicará esta clase desde JS */
.client-card__logo--dark-bg {
  background: #111;
  border: 1px solid #000;
}

/* === BOTÓN DELETE MÁS OSCURO === */
.btn-red {
  background: #b91c1c; /* rojo más oscuro */
  color: white;
  border-radius: 9999px;
  padding: 4px 10px;
  font-weight: 600;
  font-size: 0.8rem;
  transition: background 0.2s, transform 0.1s;
}
.btn-red:hover {
  background: #dc2626; /* tono medio al hover */
  transform: scale(1.05);
}

/* Los demás botones quedan iguales */
.btn-orange {
  background: #d6df20;
  color: #111827;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 4px 10px;
  transition: background 0.2s, transform 0.1s;
}
.btn-orange:hover {
  background: #e5f26a;
  transform: scale(1.05);
}

.btn-yellow {
  background: #facc15;
  color: #111;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 4px 10px;
  transition: background 0.2s, transform 0.1s;
}
.btn-yellow:hover {
  background: #fde047;
  transform: scale(1.05);
}

/* === Shortcuts: modo eliminación por pulsación larga === */
@keyframes sc-jiggle {
  0% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg); }
  100% { transform: rotate(-1.5deg); }
}

.sc-card.sc-armed {
  animation: sc-jiggle 0.25s infinite;
  cursor: not-allowed;
  outline: 2px dashed rgba(239, 68, 68, 0.5); /* rojo tenue */
  outline-offset: 4px;
}

.sc-card .sc-del-grid {
  transition: opacity .2s ease, transform .2s ease;
  opacity: 0;
  pointer-events: none;
  transform: scale(.95);
}
.sc-armed .sc-del-grid {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* === Animación del botón Save === */
#scSave.sc-saving {
  position: relative;
  opacity: .85;
}
#scSave.sc-saving::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: .5rem;
  animation: sc-pulse 1.1s ease-in-out infinite;
}
@keyframes sc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,.35); }
  50% { box-shadow: 0 0 0 6px rgba(59,130,246,0); }
}
#scSave .sc-spinner {
  display: inline-block;
  width: 1em; height: 1em;
  border: 2px solid rgba(255,255,255,.6);
  border-top-color: white;
  border-radius: 9999px;
  margin-left: .5rem;
  animation: sc-spin .8s linear infinite;
  vertical-align: -2px;
}
@keyframes sc-spin { to { transform: rotate(360deg); } }

/* ===== ACTIVITY DASHBOARD STYLES ===== */

/* Dashboard card animations */
.dashboard-card {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.dashboard-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Stats icon wrapper gradient */
.stats-icon-wrapper {
  background: linear-gradient(135deg, var(--tw-gradient-from), var(--tw-gradient-to));
}

/* Dashboard animation for cards */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.6s ease-out;
}

/* Dashboard loader improvements */
.dashboard-loader {
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.8);
}

html.dark .dashboard-loader {
  background: rgba(27, 33, 48, 0.8);
}

/* Toggle button styles */
.toggle-group button.active {
  background: white;
  color: #1f2937;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.toggle-group button:not(.active) {
  color: #6b7280;
}

.toggle-group button:not(.active):hover {
  color: #1f2937;
}

html.dark .toggle-group button.active {
  background: #1b2130;
  color: #e5e7eb;
}

html.dark .toggle-group button:not(.active) {
  color: #9ca3af;
}

html.dark .toggle-group button:not(.active):hover {
  color: #e5e7eb;
}

/* User stats table enhancements */
.user-stats-table tr:hover {
  background-color: #f9fafb;
  transition: background-color 0.15s ease-in-out;
}

html.dark .user-stats-table tr:hover {
  background-color: #374151;
}

.user-avatar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Activity metrics badges */
.activity-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 500;
}

.activity-badge--high {
  background-color: #fee2e2;
  color: #dc2626;
}

.activity-badge--medium {
  background-color: #fef3c7;
  color: #d97706;
}

.activity-badge--low {
  background-color: #d1fae5;
  color: #059669;
}

html.dark .activity-badge--high {
  background-color: #7f1d1d;
  color: #fca5a5;
}

html.dark .activity-badge--medium {
  background-color: #78350f;
  color: #fbbf24;
}

html.dark .activity-badge--low {
  background-color: #064e3b;
  color: #6ee7b7;
}

/* Session Timer Styles removidos - ya no es necesario */

/* Dashboard responsive improvements */
@media (max-width: 1024px) {
  .dashboard-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .user-stats-table {
    font-size: 0.875rem;
  }
  
  .user-stats-table th,
  .user-stats-table td {
    padding: 0.5rem;
  }
  
  /* Smaller toggle buttons on mobile */
  #show-dashboard-btn,
  #show-logs-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
}

@media (max-width: 640px) {
  /* Stack stats cards vertically on small screens */
  .dashboard-stats-grid {
    grid-template-columns: 1fr;
  }
  
  /* Hide some columns on very small screens */
  .user-stats-table th:nth-child(3),
  .user-stats-table td:nth-child(3),
  .user-stats-table th:nth-child(4),
  .user-stats-table td:nth-child(4) {
    display: none;
  }
  
  /* Session timer responsive adjustments removidos */
}

/* ===== Estilos para tareas en estado pendiente (guardando) ===== */
.task-row-pending {
  opacity: 0.6;
  background-color: #f8fafc !important;
  position: relative;
  pointer-events: none;
}

html.dark .task-row-pending {
  background-color: #1e293b !important;
  opacity: 0.7;
}

.task-row-pending::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 5px,
    rgba(156, 163, 175, 0.1) 5px,
    rgba(156, 163, 175, 0.1) 10px
  );
  pointer-events: none;
}

.task-row-pending .task-cell {
  color: #6b7280 !important;
}

/* Estilos genéricos para badges en filas pending, EXCEPTO las pills de STATUS y PRIORITY */
.task-row-pending .badge:not(.badge--status-pending):not(.badge--status-working):not(.badge--status-onreview):not(.badge--status-completed):not(.badge--status-tbfixed):not(.badge--prio-high):not(.badge--prio-medium):not(.badge--prio-low) {
  background-color: #e5e7eb !important;
  color: #6b7280 !important;
  border: 1px solid #d1d5db !important;
}

html.dark .task-row-pending .task-cell {
  color: #9ca3af !important;
}

/* Estilos genéricos para badges en modo dark en filas pending, EXCEPTO las pills de STATUS y PRIORITY */
html.dark .task-row-pending .badge:not(.badge--status-pending):not(.badge--status-working):not(.badge--status-onreview):not(.badge--status-completed):not(.badge--status-tbfixed):not(.badge--prio-high):not(.badge--prio-medium):not(.badge--prio-low) {
  background-color: #374151 !important;
  color: #9ca3af !important;
  border: 1px solid #4b5563 !important;
}

/* Indicador de guardando */
.saving-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
}

.saving-indicator .spinner {
  width: 12px;
  height: 12px;
  border: 2px solid #e5e7eb;
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* END */


  /* Off-canvas sidenav for small screens */
  @media (max-width: 1024px) {
    /* Oculta el sidenav clásico en móvil, usa top dropdown */
    #sidenav { display: none; }
    #sidenavOverlay { display: none; }
    #app { overflow-x: hidden; }
  }

  /* Hide close button on lg+ (≥1025px) to match hamburger up to 1024px) */
  @media (min-width: 1025px) {
    #sidenavClose { display: none; }
  }

  /* Task Dashboard: compact professional cards on mobile and tablets */
  @media (max-width: 1024px) {
    table.tasks-table thead { display: none; }
    table.tasks-table, table.tasks-table tbody { display: block; width: 100%; }
    table.tasks-table tr {
      display: grid;
      position: relative;
      grid-template-columns: minmax(0,1fr) auto; /* izquierda info, derecha controles */
      grid-template-rows: auto auto auto auto auto auto;
      gap: 3px 6px;
      background: #ffffff;
      border: 1px solid #e5e7eb; /* gray-200 */
      border-radius: .6rem; /* rounded */
      box-shadow: 0 1px 2px rgba(0,0,0,.05);
      width: 600px; /* 1024px → 600px */
      margin: 0 auto .55rem; /* center each row card */
      padding: 8px 10px;
      overflow: hidden;
    }
    html.dark table.tasks-table tr {
      background: #0f172a; /* slate-900 */
      border-color: #243244;
      box-shadow: 0 6px 18px rgba(0,0,0,.45);
    }
    table.tasks-table td {
      display: block;
      border: 0 !important;
      padding: 2px 0;
      font-size: 12px; /* compacto */
      line-height: 1.25;
      word-break: break-word;
    }
    table.tasks-table td::before {
      content: attr(data-label);
      display: inline-block;
      min-width: 0;
      margin-right: .3rem;
      font-weight: 600;
      color: #6b7280; /* gray-500 */
      text-transform: none;
    }
    html.dark table.tasks-table td::before { color: #94a3b8; /* slate-400 */ }
  /* CLIENT a la izquierda, cabecera */
  #task-table-body tr td:nth-child(4) { grid-column: 1; grid-row: 1; font-weight: 600; color: #0f172a; }
    html.dark #task-table-body tr td:nth-child(4) { color: #e5e7eb; }
  /* Etiqueta con icono para CLIENT */
  #task-table-body tr td:nth-child(4)::before { content: "\f0c0"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: .35rem; color: #64748b; }

  /* STATUS (derecha) con icono */
  #task-table-body tr td:nth-child(8) { grid-column: 2; grid-row: 2; justify-self: end; }
  #task-table-body tr td:nth-child(8)::before { content: "\f111"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: .3rem; color: #64748b; }

    /* TASK como título, clamp para no desbordar */
    #task-table-body tr td:nth-child(2) {
      grid-column: 1; grid-row: 2;
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      display: -webkit-box;
  line-clamp: var(--task-title-lines, 3);
  -webkit-line-clamp: var(--task-title-lines, 3);
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    html.dark #task-table-body tr td:nth-child(2) { color: #e5e7eb; }
    #task-table-body tr td:nth-child(2)::before { content: none; }

  /* Izquierda: PRIORITY/ASSIGNED/DEADLINE/START y Derecha: controles */
  #task-table-body tr td:nth-child(7) { grid-column: 2; grid-row: 3; justify-self: end; }
  #task-table-body tr td:nth-child(3) { grid-column: 1; grid-row: 3; }
  #task-table-body tr td:nth-child(6) { grid-column: 1; grid-row: 4; border-top: 1px dashed #e5e7eb; padding-top: 6px; }
  #task-table-body tr td:nth-child(5) { grid-column: 1; grid-row: 5; }
  html.dark #task-table-body tr td:nth-child(6) { border-top-color: #243244; }

  /* Iconos en etiquetas (Font Awesome) */
  #task-table-body tr td:nth-child(7)::before { content: "\f024"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
  #task-table-body tr td:nth-child(3)::before { content: "\f007"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
  #task-table-body tr td:nth-child(6)::before { content: "\f133"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
  #task-table-body tr td:nth-child(5)::before { content: "\f017"; font-family: "Font Awesome 6 Free"; font-weight: 900; }

    /* Acciones compactas al final */
  #task-table-body tr td:nth-child(9) { grid-column: 2; grid-row: 1; justify-self: end; padding: 0; }
  #task-table-body tr td:nth-child(9)::before { content: none; }
  #task-table-body tr td:nth-child(9) .action-menu,
  #task-table-body tr td:nth-child(9) .actions { display: flex; flex-wrap: nowrap; gap: .25rem; }
  #task-table-body tr td:nth-child(9) .btn,
  #task-table-body tr td:nth-child(9) button { padding: .22rem .38rem; font-size: 11px; }

    /* Icon-only actions up to 1024px: hide labels and use compact icon buttons */
    @media (max-width: 1024px){
      #task-table-body tr td:nth-child(9) .btn span,
      #task-table-body tr td:nth-child(9) button span { display: none !important; }
      #task-table-body tr td:nth-child(9) .btn,
      #task-table-body tr td:nth-child(9) button {
        display: inline-flex; align-items: center; justify-content: center;
        width: 30px; height: 30px; min-width: 30px; min-height: 30px;
        padding: 0 !important; border-radius: 8px;
      }
      #task-table-body tr td:nth-child(9) .btn i,
      #task-table-body tr td:nth-child(9) button i { font-size: 14px; line-height: 1; }
    }

    /* NOTIFIED como icono con tooltip en móvil */
    #task-table-body tr td:nth-child(10) {
      grid-column: 2; grid-row: 4; justify-self: end;
      font-size: 0; /* ocultar texto original */
    }
    #task-table-body tr td:nth-child(10)::before {
      content: "\f0f3"; /* bell */
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      font-size: 12px;
      color: #64748b; /* default slate-500 */
      vertical-align: middle;
    }
    #task-table-body tr td:nth-child(10)[data-notified="yes"]::before { color: #16a34a; } /* green-600 */
    #task-table-body tr td:nth-child(10)[data-notified="no"]::before { color: #94a3b8; } /* slate-400 */
    /* Meta (#) muy discreto al fondo */
    #task-table-body tr td:nth-child(1) {
      grid-column: 1; grid-row: 6;
      display: inline-block;
      margin-left: .5rem;
      opacity: .7;
      font-size: 11px;
    }
  }

  /* Ancho escalonado por breakpoints (cards) */
  @media (max-width: 900px) {
    table.tasks-table tr { width: 500px; } /* 900px → 500px */
  }
  @media (max-width: 800px) {
    table.tasks-table tr { width: 400px; } /* 800px → 400px */
  }
  @media (max-width: 700px) {
    table.tasks-table tr { width: 360px; } /* 700px → 360px */
  }

  /* Ajustes fluidos para pantallas pequeñas: <= 480px */
  @media (max-width: 480px) {
    table.tasks-table tr {
      grid-template-columns: minmax(0,1fr) 68px; /* reservar ancho fijo a la derecha */
      gap: 2px 6px;
      padding: 6px 8px;
    }
    table.tasks-table td { font-size: 11px; line-height: 1.2; }
    #task-table-body tr td:nth-child(2) { font-size: 12px; line-clamp: 2; -webkit-line-clamp: 2; }
    /* Botones aún más compactos */
    #task-table-body tr td:nth-child(9) .btn,
    #task-table-body tr td:nth-child(9) button { padding: .18rem .32rem; font-size: 10px; }
    /* Iconos algo más pequeños */
    #task-table-body tr td:nth-child(10)::before,
    #task-table-body tr td:nth-child(4)::before,
    #task-table-body tr td:nth-child(8)::before,
    #task-table-body tr td:nth-child(7)::before,
    #task-table-body tr td:nth-child(3)::before,
    #task-table-body tr td:nth-child(6)::before,
    #task-table-body tr td:nth-child(5)::before { font-size: 11px; }
  }

  /* Ultra compacto: <= 380px, evitar cualquier overflow */
  @media (max-width: 380px) {
    table.tasks-table tr {
      grid-template-columns: 1fr; /* apilar todo en una columna */
    }
    /* Ubicar controles a la derecha pero en su propia fila */
    #task-table-body tr td:nth-child(9) { grid-column: 1; grid-row: 1; justify-self: end; }
    #task-table-body tr td:nth-child(8) { grid-column: 1; grid-row: 2; justify-self: end; }
    #task-table-body tr td:nth-child(7) { grid-column: 1; grid-row: 3; justify-self: end; }
    #task-table-body tr td:nth-child(10) { grid-column: 1; grid-row: 4; justify-self: end; }
    #task-table-body tr td:nth-child(4) { grid-column: 1; grid-row: 5; }
    #task-table-body tr td:nth-child(2) { grid-column: 1; grid-row: 6; display: block; -webkit-line-clamp: unset; line-clamp: unset; -webkit-box-orient: unset; overflow: visible; }
    #task-table-body tr td:nth-child(3) { grid-column: 1; grid-row: 7; }
    #task-table-body tr td:nth-child(6) { grid-column: 1; grid-row: 8; }
    #task-table-body tr td:nth-child(5) { grid-column: 1; grid-row: 9; }
    #task-table-body tr td:nth-child(1) { grid-column: 1; grid-row: 10; }
  }