/* =============================================================================
   BF-mktlab — styles.css
   =============================================================================
   Solo overrides / resets que no se pueden expresar con utilities de Tailwind.
   Cualquier cosa que se pueda hacer con `class=` debe ir ahí, no aquí.
   ============================================================================= */

/* Scrollbars sutiles en dark */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: #2a2a30;
  border-radius: 5px;
  border: 2px solid #09090b;
}
*::-webkit-scrollbar-thumb:hover {
  background: #3a3a44;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #2a2a30 transparent;
}

/* Selección de texto con tono cyan */
::selection {
  background: rgba(6, 182, 212, 0.35);
  color: #f4f4f5;
}

/* Input autofill override (para que no se vea azul amarillento del navegador) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgb(24 24 27 / 0.7) inset !important;
  -webkit-text-fill-color: #e4e4e7 !important;
  caret-color: #e4e4e7;
  transition: background-color 5000s ease-in-out 0s;
}

/* Animación sutil al cargar la shell */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
#app-root > div {
  animation: fade-in 0.25s ease-out;
}

/* Mejoras tipográficas para Barlow Condensed */
.font-display {
  letter-spacing: -0.01em;
}

/* =============================================================================
   Responsive / mobile-first helpers (Bloque 3.5)
   ============================================================================= */

/* Safe areas para iPhone con notch / dynamic island / home indicator.
   Se suman al padding existente vía clase, no lo reemplazan. */
.safe-top    { padding-top:    env(safe-area-inset-top, 0); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
.safe-left   { padding-left:   env(safe-area-inset-left, 0); }
.safe-right  { padding-right:  env(safe-area-inset-right, 0); }

/* Hover-only: elementos que aparecen en hover en desktop pero que en
   touch deben mantenerse visibles (ej. botones edit/delete de comments).
   Se combina con la clase `group` del contenedor padre Tailwind. */
@media (hover: hover) {
  .show-on-hover { opacity: 0; transition: opacity 150ms ease-out; }
  .group:hover .show-on-hover { opacity: 1; }
  .group:focus-within .show-on-hover { opacity: 1; }
}
@media (hover: none) {
  /* En touch no hay hover — botones edit/delete siempre visibles, un
     poco más discretos con opacidad para no dominar la tarjeta. */
  .show-on-hover { opacity: 0.7; }
}

/* Evitar zoom automático de iOS Safari al enfocar inputs.
   iOS solo zoomea cuando font-size computado < 16px. Forzamos 16px en
   móvil para TODOS los controles de formulario. En desktop dejamos que
   las clases Tailwind decidan el tamaño. */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* =============================================================================
   Shimmer badge — efecto sutil para badges de source en research
   Opacidad baja (0.08) y ciclo largo (4s) para que no distraiga del contenido.
   ============================================================================= */
.shimmer-badge {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.shimmer-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(103, 232, 249, 0.08) 50%,
    transparent 100%
  );
  animation: shimmer 4s infinite;
  pointer-events: none;
  z-index: 0;
}
.shimmer-badge > * {
  position: relative;
  z-index: 1;
}
@keyframes shimmer { to { transform: translateX(200%); } }
@media (prefers-reduced-motion: reduce) {
  .shimmer-badge::before { animation: none; }
}

/* =============================================================================
   Heatmap — stagger animation al cargar / cambiar filtros
   ============================================================================= */
@keyframes heatmap-cell-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
.heatmap-cell {
  animation: heatmap-cell-in 0.3s ease-out backwards;
  animation-delay: calc(0.015s * var(--i, 0));
}
@media (prefers-reduced-motion: reduce) {
  .heatmap-cell { animation: none; }
}

/* =============================================================================
   DatePicker — popup, header, grid de días, footer
   z-index 100 para estar por encima del modal (z-60).
   ============================================================================= */
.date-picker-popup {
  position: absolute;
  z-index: 100;
  background: rgb(9 9 11);
  border: 1px solid rgb(39 39 42);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  padding: 12px;
  min-width: 280px;
  user-select: none;
  animation: date-picker-in 0.15s ease-out;
}
@keyframes date-picker-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .date-picker-popup { animation: none; }
}

.date-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 4px;
}
.date-picker-nav {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: rgb(212 212 216);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s;
  flex-shrink: 0;
}
.date-picker-nav:hover { background: rgb(39 39 42); }

.date-picker-selectors {
  display: flex;
  gap: 8px;
  flex: 1;
  justify-content: center;
}
.date-picker-select {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgb(39 39 42);
  border-radius: 8px;
  color: rgb(228 228 231);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s;
  text-transform: capitalize;
}
.date-picker-select:hover { border-color: rgb(63 63 70); }
.date-picker-select:focus-within {
  border-color: rgb(34 211 238);
  box-shadow: 0 0 0 3px rgb(34 211 238 / 0.2);
}
.date-picker-select select {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  border: none;
  background: transparent;
  font-size: 16px; /* iOS no zoomea */
}
.date-picker-label {
  pointer-events: none;
}

.date-picker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 4px 0;
  border-bottom: 1px solid rgb(24 24 27);
  margin-bottom: 4px;
}
.date-picker-weekdays > span {
  text-align: center;
  font-size: 11px;
  color: rgb(113 113 122);
  font-weight: 500;
  padding: 4px 0;
  letter-spacing: 0.05em;
}

.date-picker-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.date-picker-day {
  aspect-ratio: 1;
  min-height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: rgb(212 212 216);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  position: relative;
  transition: background-color 0.15s, color 0.15s;
}
.date-picker-day:hover:not(:disabled):not(.is-selected) {
  background: rgb(39 39 42);
}
.date-picker-day.is-outside { color: rgb(82 82 91); }
.date-picker-day.is-today::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgb(34 211 238);
}
.date-picker-day.is-selected {
  background: rgb(6 182 212);
  color: rgb(9 9 11);
  font-weight: 600;
}
.date-picker-day.is-selected.is-today::after { background: rgb(9 9 11); }
.date-picker-day:disabled {
  color: rgb(63 63 70);
  cursor: not-allowed;
  text-decoration: line-through;
}

.date-picker-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid rgb(24 24 27);
}
.date-picker-footer button {
  padding: 6px 12px;
  border-radius: 8px;
  color: rgb(34 211 238);
  background: transparent;
  border: none;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.15s;
}
.date-picker-footer button:hover { background: rgb(39 39 42); }

@media (max-width: 640px) {
  .date-picker-day { min-height: 44px; font-size: 15px; }
  .date-picker-popup { min-width: min(320px, calc(100vw - 16px)); }
}

/* Profile chip — estado "sugerido por IA" (dashed cyan, transparente).
   Usado en el form de nuevo comment: IA sugiere perfiles que el user
   confirma con click (pasan a estado selected cyan sólido). */
.profile-chip-suggested {
  border: 1.5px dashed #22d3ee;
  background: transparent;
  color: #22d3ee;
  opacity: 0.85;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.profile-chip-suggested:hover { opacity: 1; border-color: #67e8f9; }

/* ============================================================
   LIGHT MODE — overrides completos para BF-mktlab
   ============================================================ */
html.light { color-scheme: light; }
html.dark  { color-scheme: dark;  }

html.light body {
  background-color: #fafafa !important;
  color: #09090b !important;
}

/* Sidebar */
html.light #sidebar {
  background-color: #ffffff !important;
  border-color: #e4e4e7 !important;
}
html.light [data-nav-item] {
  color: #52525b !important;
}
html.light [data-nav-item]:hover,
html.light [data-nav-item].active {
  background-color: #f4f4f5 !important;
  color: #09090b !important;
}

/* Fondo general zinc-950 / zinc-900 / zinc-800 */
html.light .bg-zinc-950 { background-color: #fafafa !important; }
html.light .bg-zinc-900,
html.light .bg-zinc-900\/70,
html.light .bg-zinc-900\/50,
html.light .bg-zinc-900\/40 { background-color: #f4f4f5 !important; }
html.light .bg-zinc-800 { background-color: #e4e4e7 !important; }
html.light .bg-zinc-800\/50 { background-color: rgba(228, 228, 231, 0.5) !important; }
html.light .bg-zinc-700 { background-color: #d4d4d8 !important; }
html.light .hover\:bg-zinc-900:hover { background-color: #f4f4f5 !important; }
html.light .hover\:bg-zinc-800:hover { background-color: #e4e4e7 !important; }
html.light .hover\:bg-zinc-700:hover { background-color: #d4d4d8 !important; }

/* Textos */
html.light .text-zinc-50  { color: #09090b !important; }
html.light .text-zinc-100 { color: #09090b !important; }
html.light .text-zinc-200 { color: #18181b !important; }
html.light .text-zinc-300 { color: #27272a !important; }
html.light .text-zinc-400 { color: #52525b !important; }
html.light .text-zinc-500 { color: #71717a !important; }
html.light .text-zinc-600 { color: #a1a1aa !important; }
html.light .text-zinc-700 { color: #a1a1aa !important; }
html.light .hover\:text-zinc-100:hover { color: #09090b !important; }
html.light .hover\:text-zinc-200:hover { color: #18181b !important; }
html.light .hover\:text-zinc-300:hover { color: #27272a !important; }

/* Bordes */
html.light .border-zinc-950 { border-color: #e4e4e7 !important; }
html.light .border-zinc-900 { border-color: #e4e4e7 !important; }
html.light .border-zinc-800 { border-color: #e4e4e7 !important; }
html.light .border-zinc-800\/50 { border-color: #e4e4e7 !important; }
html.light .border-zinc-700 { border-color: #d4d4d8 !important; }
html.light .hover\:border-zinc-700:hover { border-color: #71717a !important; }

/* Divisores h-px bg-zinc-900 */
html.light .bg-zinc-900.h-px { background-color: #e4e4e7 !important; }

/* ------------------------------------------------------------------
   Light mode — HUECOS de contraste (auditoría julio 2026)
   El override base listaba opacidades sueltas de zinc y NO cubría los
   colores de acento. Acá se cubren con selectores por atributo (todas
   las opacidades) para que nada de acento quede invisible en claro.
   ------------------------------------------------------------------ */
/* Opacidades de zinc que el override base se saltaba. ESPECÍFICAS (no por
   atributo) para NO atrapar los hover:bg-zinc-* — que pintaban un fondo gris
   en reposo en el menú lateral y otros botones. */
html.light .bg-zinc-950\/30, html.light .bg-zinc-950\/40, html.light .bg-zinc-950\/50,
html.light .bg-zinc-950\/60, html.light .bg-zinc-950\/80, html.light .bg-zinc-950\/85,
html.light .bg-zinc-950\/95 { background-color: #fafafa !important; }
html.light .bg-zinc-900\/60, html.light .bg-zinc-900\/90 { background-color: #f4f4f5 !important; }
html.light .bg-zinc-700\/50, html.light .bg-zinc-700\/60 { background-color: #d4d4d8 !important; }

/* Texto de acento: en claro debe ser un tono OSCURO del acento (legible
   sobre blanco). Antes quedaba claro sobre claro = invisible. */
html.light [class*="text-cyan-300"], html.light [class*="text-cyan-400"], html.light [class*="text-cyan-500"] { color: #0e7490 !important; }
html.light [class*="text-emerald-300"], html.light [class*="text-emerald-400"] { color: #047857 !important; }
html.light [class*="text-amber-300"], html.light [class*="text-amber-400"] { color: #b45309 !important; }
html.light [class*="text-red-300"], html.light [class*="text-red-400"], html.light [class*="text-red-500"] { color: #dc2626 !important; }
html.light [class*="text-pink-300"], html.light [class*="text-pink-400"] { color: #be185d !important; }
html.light [class*="text-blue-300"] { color: #1d4ed8 !important; }

/* Fondos tintados de acento (avisos/paneles 950/900): tinte CLARO del acento
   para que el texto de acento oscuro se lea encima. :not(hover) para no pintar
   el color de hover en reposo. NO se tocan los bg-*-500/xx (rellenos de barras). */
html.light [class*="bg-cyan-950"]:not([class*="hover:bg-cyan-950"]), html.light [class*="bg-cyan-900"]:not([class*="hover:bg-cyan-900"]) { background-color: #ecfeff !important; }
html.light [class*="bg-emerald-950"]:not([class*="hover:bg-emerald-950"]), html.light [class*="bg-emerald-900"]:not([class*="hover:bg-emerald-900"]) { background-color: #ecfdf5 !important; }
html.light [class*="bg-amber-950"]:not([class*="hover:bg-amber-950"]), html.light [class*="bg-amber-900"]:not([class*="hover:bg-amber-900"]) { background-color: #fffbeb !important; }
html.light [class*="bg-red-950"]:not([class*="hover:bg-red-950"]), html.light [class*="bg-red-900"]:not([class*="hover:bg-red-900"]) { background-color: #fef2f2 !important; }

/* Bordes de acento en claro: tonos medios visibles sobre blanco. */
html.light [class*="border-cyan-700"], html.light [class*="border-cyan-800"], html.light [class*="border-cyan-900"] { border-color: #67e8f9 !important; }
html.light [class*="border-amber-700"], html.light [class*="border-amber-900"] { border-color: #fcd34d !important; }
html.light [class*="border-red-700"], html.light [class*="border-red-800"], html.light [class*="border-red-900"] { border-color: #fca5a5 !important; }
html.light [class*="border-emerald-700"], html.light [class*="border-emerald-800"], html.light [class*="border-emerald-900"] { border-color: #6ee7b7 !important; }

/* Grises muy tenues (notas al pie): en claro subir contraste vs #a1a1aa. */
html.light .text-zinc-600, html.light .text-zinc-700 { color: #71717a !important; }

/* ============================================================
   Asistente — barra de entrada "pro" (gradiente teal).
   Es una caja OSCURA autónoma: se ve igual en claro y oscuro.
   El gradiente reemplaza la imagen externa del diseño original
   (self-contained, sin dependencias). Textarea autoexpandible.
   ============================================================ */
.asst-querybox {
  position: relative;
  border-radius: 1.1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: radial-gradient(125% 140% at 50% 135%,
              #0d93a8 0%, #0a5a6b 28%, #0a2c34 52%, #08181d 76%, #070b0e 100%);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.30);
}
.asst-querybox:focus-within { border-color: rgba(34, 211, 238, 0.45); }

.asst-querybox-input {
  display: block;
  width: 100%;
  min-height: 56px;
  max-height: 220px;
  resize: none;
  border: none;
  background: transparent;
  color: #f1f5f9;
  padding: 1rem 6.25rem 1rem 1.25rem; /* espacio a la derecha para los botones */
  font-size: 0.95rem;
  line-height: 1.45;
  outline: none;
  overflow-y: auto;
}
.asst-querybox-input::placeholder { color: rgba(241, 245, 249, 0.55); }
/* Modo claro: NO dejar que el override global de textarea la pinte blanca. */
html.light .asst-querybox-input {
  background: transparent !important;
  color: #f1f5f9 !important;
  border: none !important;
}
html.light .asst-querybox-input::placeholder { color: rgba(241, 245, 249, 0.55) !important; }

.asst-querybox-actions {
  position: absolute;
  bottom: 0.6rem;
  right: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.asst-qb-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: #475569;
  border: none;
  cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
}
.asst-qb-btn:hover { background: #ffffff; }
.asst-qb-btn:active { transform: scale(0.94); }
.asst-qb-btn svg { width: 1rem; height: 1rem; }
.asst-qb-btn.hidden { display: none !important; } /* el mic oculto gana sobre el flex */
.asst-qb-send:not(:disabled) { background: #0a5563; color: #ffffff; }
.asst-qb-send:not(:disabled):hover { background: #0c6a7c; }
.asst-qb-send:disabled { color: #94a3b8; cursor: not-allowed; }
/* Micrófono grabando. */
.asst-qb-btn.asst-mic-on { background: #fecaca; color: #dc2626; animation: asst-mic-pulse 1.2s ease-in-out infinite; }
@keyframes asst-mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.45); } 50% { box-shadow: 0 0 0 5px rgba(220,38,38,0); } }

/* Inputs, selects, textareas */
html.light input,
html.light select,
html.light textarea {
  background-color: #ffffff !important;
  color: #09090b !important;
  border-color: #d4d4d8 !important;
}
html.light input::placeholder,
html.light textarea::placeholder { color: #a1a1aa !important; }

/* Cards y panels */
html.light .rounded-xl,
html.light .rounded-2xl {
  background-color: inherit;
}

/* Header / top bar */
html.light #page-header,
html.light header {
  background-color: #ffffff !important;
  border-color: #e4e4e7 !important;
}

/* Drawers y modales */
html.light [data-drawer-panel],
html.light .bg-zinc-950[class*="absolute"] {
  background-color: #ffffff !important;
  border-color: #e4e4e7 !important;
}

/* Botón theme toggle */
html.light #theme-toggle { color: #52525b !important; }
html.light #theme-toggle:hover { background-color: #f4f4f5 !important; color: #09090b !important; }

/* Scrollbar */
html.light ::-webkit-scrollbar-track { background: #f4f4f5; }
html.light ::-webkit-scrollbar-thumb {
  background: #d4d4d8;
  border: 2px solid #fafafa;
}
html.light ::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }
html.light * { scrollbar-color: #d4d4d8 transparent; }

/* Autofill light */
html.light input:-webkit-autofill,
html.light input:-webkit-autofill:hover,
html.light input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #09090b !important;
  caret-color: #09090b;
}

/* ============================================================
   DatePicker — light mode (clases reales: .date-picker-*)
   Popup, header, navs, selectors, weekdays, days, footer + el dropdown
   NATIVO que abren los <select> invisibles de mes/año: para que el OS
   lo pinte claro, se fuerza color-scheme: light en el <select>.
   Todos con !important porque las reglas base usan colores rgb() con
   la misma especificidad y en algunos engines empataba la cascada.
   ============================================================ */

/* Popup */
html.light .date-picker-popup {
  background: #ffffff !important;
  border-color: #e4e4e7 !important;
  color: #09090b !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
}

/* Input visible (DD/MM/YYYY) ya cubierto por `html.light input`;
   garantizamos el placeholder claro */
html.light .date-picker-input {
  background-color: #ffffff !important;
  color: #09090b !important;
  border-color: #d4d4d8 !important;
}

/* Header navs (chevrons < >) */
html.light .date-picker-nav {
  color: #3f3f46 !important;
  background: transparent !important;
}
html.light .date-picker-nav:hover {
  background: #f4f4f5 !important;
  color: #09090b !important;
}

/* Selectores de mes / año */
html.light .date-picker-select {
  color: #18181b !important;
  background: #ffffff !important;
  border-color: #e4e4e7 !important;
}
html.light .date-picker-select:hover {
  border-color: #a1a1aa !important;
}
html.light .date-picker-select:focus-within {
  border-color: #0891b2 !important;
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.2) !important;
}
html.light .date-picker-label {
  color: #09090b !important;
}
/* El <select> nativo es transparente; al abrirlo despliega el popup NATIVO
   del OS que respeta color-scheme. Forzamos light para que no se abra en
   dark aunque el browser intente heredar del body. */
/* Dark mode: forzar color-scheme:dark también en los selects nativos para
   que el popup del OS/browser respete el tema oscuro incluso cuando el OS
   del usuario está en claro. El selector sin prefijo es fallback. */
html.dark .date-picker-select select,
.date-picker-select select {
  color-scheme: dark;
}
html.light .date-picker-select select {
  color-scheme: light !important;
  color: #09090b !important;
  background: #ffffff !important;
}
html.light .date-picker-select select option {
  background: #ffffff !important;
  color: #09090b !important;
}

/* Weekdays (Do Lu Ma ...) */
html.light .date-picker-weekdays {
  border-bottom-color: #e4e4e7 !important;
}
html.light .date-picker-weekdays > span {
  color: #71717a !important;
}

/* Días */
html.light .date-picker-day {
  color: #3f3f46 !important;
  background: transparent !important;
}
html.light .date-picker-day:hover:not(:disabled):not(.is-selected) {
  background: #f4f4f5 !important;
  color: #09090b !important;
}
html.light .date-picker-day.is-outside {
  color: #a1a1aa !important;
}
html.light .date-picker-day.is-today {
  border: 1px solid #0891b2;
}
html.light .date-picker-day.is-today::after {
  background: #0891b2 !important;
}
html.light .date-picker-day.is-selected {
  background: #0891b2 !important;
  color: #ffffff !important;
}
html.light .date-picker-day.is-selected.is-today::after {
  background: #ffffff !important;
}
html.light .date-picker-day:disabled {
  color: #d4d4d8 !important;
}

/* Footer (Borrar / Hoy) */
html.light .date-picker-footer {
  border-top-color: #e4e4e7 !important;
}
html.light .date-picker-footer button {
  color: #0891b2 !important;
}
html.light .date-picker-footer button:hover {
  background: #f4f4f5 !important;
}

/* ============================================================
   LIGHT MODE — overrides adicionales (dashboard, chips, parrilla)
   ============================================================ */

/* Dashboard sticky header — forzar fondo claro */
html.light .sticky,
html.light [class*="sticky"] {
  background-color: #fafafa !important;
}

/* Chips de perfil en light mode — fondo visible */
html.light .profile-chip-suggested {
  border-color: #0891b2 !important;
  color: #0891b2 !important;
}

/* Chips de perfil seleccionados — mantener cyan legible */
html.light [data-profile-chip][data-selected="1"],
html.light [data-profile-chip].selected {
  background-color: #0891b2 !important;
  color: #ffffff !important;
  border-color: #0891b2 !important;
}

/* Chips de perfil NO seleccionados en light */
html.light [data-profile-chip] {
  background-color: #f4f4f5 !important;
  color: #3f3f46 !important;
  border-color: #d4d4d8 !important;
}

/* Badges frecuencia objeciones (alta/media/baja) */
html.light .bg-red-500\/20   { background-color: #fee2e2 !important; }
html.light .text-red-300     { color: #dc2626 !important; }
html.light .bg-amber-500\/20 { background-color: #fef3c7 !important; }
html.light .text-amber-300   { color: #d97706 !important; }
html.light .bg-zinc-700\/50  { background-color: #e4e4e7 !important; }
html.light .text-zinc-400    { color: #52525b !important; }

/* Chips de fuente y perfil en research/comments (badges dark) */
html.light .bg-zinc-800 { background-color: #e4e4e7 !important; }
html.light .text-zinc-300 { color: #27272a !important; }

/* Parrilla — celdas días del mes */
html.light #parrilla-grid > div {
  border-color: #e4e4e7 !important;
  background-color: #ffffff;
}
html.light #parrilla-grid > div.outside-month {
  background-color: #f4f4f5 !important;
}

/* Content chips en la parrilla — hacer fondo más visible */
html.light .content-chip {
  opacity: 1 !important;
  font-weight: 500;
}

/* Objeción recurrente badge (amber) */
html.light .bg-amber-500\/10 { background-color: #fef3c7 !important; }
html.light .text-amber-400   { color: #d97706 !important; }
html.light .border-amber-500\/30 { border-color: #f59e0b !important; }

/* Source badges en research (fondo oscuro con texto) */
html.light .bg-zinc-900.rounded-full,
html.light .bg-zinc-800.rounded-full {
  background-color: #e4e4e7 !important;
  color: #27272a !important;
}
html.light .bg-zinc-900.rounded-full svg,
html.light .bg-zinc-800.rounded-full svg {
  color: #27272a !important;
}

/* ============================================================
   LIGHT MODE — source badges (shimmer) + chip perfil seleccionado
   ============================================================ */

/* Source badge (render real: .shimmer-badge + gradient zinc-900→zinc-800).
   El gradient gana sobre cualquier bg-* utility, así que lo neutralizamos. */
html.light .shimmer-badge {
  background-image: none !important;
  background-color: #e4e4e7 !important;
  color: #18181b !important;
  border-color: #d4d4d8 !important;
}
html.light .shimmer-badge svg {
  stroke: #18181b !important;
  color: #18181b !important;
}
/* Shimmer overlay — más sutil sobre fondo claro (cyan ya pálido). */
html.light .shimmer-badge::before {
  background: linear-gradient(90deg, transparent 0%, rgba(6, 182, 212, 0.12) 50%, transparent 100%) !important;
}

/* Genéricos por si algún badge no usa .shimmer-badge */
html.light .bg-zinc-900.rounded-md,
html.light .bg-zinc-900.rounded-lg,
html.light .bg-zinc-800.rounded-md,
html.light .bg-zinc-800.rounded-lg {
  background-color: #e4e4e7 !important;
  color: #18181b !important;
}
html.light .bg-zinc-900.rounded-md svg,
html.light .bg-zinc-900.rounded-lg svg,
html.light .bg-zinc-800.rounded-md svg,
html.light .bg-zinc-800.rounded-lg svg {
  stroke: #18181b !important;
  color: #18181b !important;
}

/* Skeleton/pulse loaders */
html.light .animate-pulse {
  background-color: #e4e4e7 !important;
}

/* Chip de perfil seleccionado — selector real es [data-chip-profile][data-active="1"].
   En dark usa bg-cyan-500/20 + text-cyan-200 (suficientemente legible en dark
   pero ilegible en light). Forzamos cyan-700 sólido con texto blanco. */
html.light [data-chip-profile][data-active="1"] {
  background-color: #0e7490 !important;
  color: #ffffff !important;
  border-color: #0e7490 !important;
}
html.light [data-chip-profile][data-active="1"] svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}
/* Chips no activos: legibles sobre light */
html.light [data-chip-profile][data-active="0"]:not(.profile-chip-suggested) {
  background-color: #f4f4f5 !important;
  color: #3f3f46 !important;
  border-color: #d4d4d8 !important;
}
html.light [data-chip-profile][data-active="0"]:not(.profile-chip-suggested):hover {
  border-color: #a1a1aa !important;
  color: #18181b !important;
}

/* ============================================================
   Custom tooltip — usado en parrilla content chips (reemplaza title=)
   ============================================================ */
.bf-tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: #18181b;
  color: #ffffff;
  border: 1px solid #27272a;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-family: 'Manrope', system-ui, sans-serif;
  max-width: 320px;
  white-space: normal;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  animation: bf-tooltip-in 0.12s ease-out;
}
@keyframes bf-tooltip-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
html.light .bf-tooltip {
  background: #18181b;
  color: #ffffff;
  border-color: #27272a;
}

/* ============================================================
   LIGHT MODE — badge "editado", content chips por tipo
   ============================================================ */

/* Badge "editado hace Xh" — clases reales: bg-amber-950/40 +
   border-amber-900/40 + text-amber-300 */
html.light .bg-amber-950\/40 {
  background-color: #fef3c7 !important;
}
html.light .border-amber-900\/40,
html.light .border-amber-500\/50 {
  border-color: #f59e0b !important;
}
html.light .text-amber-300 {
  color: #92400e !important;
}

/* Content chips en parrilla — más peso visual */
html.light .content-chip {
  opacity: 1 !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Colores específicos por tipo (CONTENT_TYPE_COLORS usa cyan/violet/emerald) */
html.light .bg-cyan-500\/20     { background-color: #cffafe !important; }
html.light .text-cyan-300       { color: #0e7490 !important; }
html.light .border-cyan-500\/30 { border-color: #06b6d4 !important; }

html.light .bg-violet-500\/20     { background-color: #ede9fe !important; }
html.light .text-violet-300       { color: #7c3aed !important; }
html.light .border-violet-500\/30 { border-color: #8b5cf6 !important; }

html.light .bg-emerald-500\/20     { background-color: #d1fae5 !important; }
html.light .text-emerald-300       { color: #065f46 !important; }
html.light .border-emerald-500\/30 { border-color: #10b981 !important; }

/* ============================================================
   LIGHT MODE — "Objeción recurrente" + ALTA/MEDIA/BAJA (clases reales)
   ============================================================ */

/* "Objeción recurrente" — dashboard y drawer. Ambos usan amber-950 + amber-900 */
html.light .bg-amber-950\/30,
html.light .bg-amber-950\/40 {
  background-color: #fef3c7 !important;
}
html.light .border-amber-900\/40,
html.light .border-amber-900\/60 {
  border-color: #f59e0b !important;
}
html.light .text-amber-400 { color: #92400e !important; }
/* text-amber-300 ya mapeado a #92400e arriba */

/* Frequency ALTA — rose (no red) */
html.light .bg-rose-950\/30 { background-color: #ffe4e6 !important; }
html.light .text-rose-300   { color: #991b1b !important; }
html.light .border-rose-900\/40 { border-color: #f43f5e !important; }

/* Frequency MEDIA — amber (ya cubierto por overrides arriba, reafirmamos) */
html.light .bg-amber-950\/30 { background-color: #fef3c7 !important; }
html.light .text-amber-300   { color: #92400e !important; }
html.light .border-amber-900\/40 { border-color: #f59e0b !important; }

/* Frequency BAJA — zinc */
html.light .bg-zinc-900\/40   { background-color: #f4f4f5 !important; }
/* text-zinc-400 y border-zinc-800 ya mapeados arriba */

/* ============================================================
   LIGHT MODE — select arrow spacing, celebraciones, status chip
   ============================================================ */

/* <select> nativo en light — evitar que la flecha se solape con el texto */
html.light select {
  padding-right: 2rem !important;
  background-position: right 0.5rem center !important;
}

/* Celebraciones (festivos Colombia / fechas comerciales) — colores legibles */
html.light .text-red-400   { color: #dc2626 !important; }
html.light .text-amber-400 { color: #d97706 !important; }

/* Status "publicado" → ring emerald ya sutil; visible en ambos modos. */
html.light .ring-emerald-500\/40 {
  --tw-ring-color: rgba(16, 185, 129, 0.55) !important;
}

/* Parrilla outside-month: en light usa el hook de la clase para bajar el tono */
html.light .outside-month { background-color: #f4f4f5 !important; }

/* ---------------------------------------------------------------------------
   Modal de revisión de parrilla — light mode
   Overrides scoped al #parrilla-review-modal para no alterar otros modales.
--------------------------------------------------------------------------- */
html.light #parrilla-review-modal {
  background-color: rgba(250, 250, 250, 0.97) !important;
}
html.light #parrilla-review-modal .border-zinc-800,
html.light #parrilla-review-modal .border-t {
  border-color: #e4e4e7 !important;
}
html.light #parrilla-review-modal .review-item {
  background-color: #ffffff !important;
  border-color: #e4e4e7 !important;
}
html.light #parrilla-review-modal .review-item:hover {
  background-color: #f4f4f5 !important;
}
html.light #parrilla-review-modal .review-item[data-approved="true"] {
  border-color: #0891b2 !important;
  background-color: #ecfeff !important;
}
html.light #parrilla-review-modal .approve-toggle {
  border-color: #d4d4d8 !important;
}
html.light #parrilla-review-modal .approve-toggle.active {
  background-color: #0891b2 !important;
  border-color: #0891b2 !important;
  color: #ffffff !important;
}
html.light #parrilla-review-modal input[type="number"] {
  background-color: #ffffff !important;
  border-color: #d4d4d8 !important;
  color: #09090b !important;
}

/* ---------------------------------------------------------------------------
   Ideas guardadas — drawer de nuevo contenido (light mode).
--------------------------------------------------------------------------- */
html.light .idea-option {
  background-color: #ffffff !important;
  border-color: #e4e4e7 !important;
}
html.light .idea-option:hover {
  border-color: #f59e0b80 !important;
  background-color: #f4f4f5 !important;
}
html.light .idea-option p { color: #27272a !important; }

/* Botón guardar idea (bookmark) en modal de revisión — light. */
html.light #parrilla-review-modal [data-save-idea] {
  color: #a1a1aa !important;
}
html.light #parrilla-review-modal [data-save-idea]:hover {
  color: #71717a !important;
}
html.light #parrilla-review-modal [data-save-idea].saved {
  color: #d97706 !important;
}

/* =============================================================================
 * Analítica — overrides light mode
 * =========================================================================== */
html.light #analytics-root .bg-zinc-900,
html.light #analytics-root .bg-zinc-950 {
  background-color: #fafafa !important;
}
html.light #analytics-root .border-zinc-800,
html.light #analytics-root .border-t {
  border-color: #e4e4e7 !important;
}
html.light #analytics-root .text-zinc-100,
html.light #analytics-root .text-zinc-200 {
  color: #18181b !important;
}
html.light #analytics-root .text-zinc-300 { color: #27272a !important; }
html.light #analytics-root .text-zinc-400 { color: #52525b !important; }
html.light #analytics-root .text-zinc-500 { color: #71717a !important; }
html.light #analytics-root .text-zinc-600 { color: #a1a1aa !important; }

html.light #analytics-root .analytics-card {
  background-color: #ffffff !important;
  border-color: #e4e4e7 !important;
}
html.light #analytics-root .analytics-card:hover {
  border-color: #a1a1aa !important;
}

html.light #analytics-root .analytics-tab-btn.bg-zinc-800 {
  background-color: #e4e4e7 !important;
  color: #18181b !important;
}

/* Drawer de métrica — light */
html.light #metric-drawer {
  background-color: #ffffff !important;
  border-left-color: #e4e4e7 !important;
}
html.light #metric-drawer .bg-zinc-900 { background-color: #fafafa !important; }
html.light #metric-drawer .bg-zinc-950 { background-color: #ffffff !important; }
html.light #metric-drawer .border-zinc-800 { border-color: #e4e4e7 !important; }
html.light #metric-drawer .text-zinc-100,
html.light #metric-drawer .text-zinc-200 { color: #18181b !important; }
html.light #metric-drawer .text-zinc-300 { color: #27272a !important; }
html.light #metric-drawer .text-zinc-400 { color: #52525b !important; }
html.light #metric-drawer .text-zinc-500 { color: #71717a !important; }
html.light #metric-drawer input,
html.light #metric-drawer textarea,
html.light #metric-drawer select {
  background-color: #ffffff !important;
  border-color: #d4d4d8 !important;
  color: #18181b !important;
}
html.light #metric-drawer input:focus,
html.light #metric-drawer textarea:focus,
html.light #metric-drawer select:focus {
  border-color: #0891b2 !important;
}

/* =============================================================================
 * Banco de Ideas — overrides light mode
 * =========================================================================== */
html.light #ideas-bank-root .bg-zinc-900 { background-color: #ffffff !important; }
html.light #ideas-bank-root .border-zinc-800 { border-color: #e4e4e7 !important; }
html.light #ideas-bank-root .text-zinc-100 { color: #18181b !important; }
html.light #ideas-bank-root .text-zinc-400 { color: #52525b !important; }
html.light #ideas-bank-root .text-zinc-500 { color: #71717a !important; }
html.light #ideas-bank-root .text-zinc-600,
html.light #ideas-bank-root .text-zinc-700 { color: #a1a1aa !important; }

html.light #ideas-bank-root .ideas-bank-card:hover {
  border-color: #a1a1aa !important;
}
html.light #ideas-bank-root select {
  background-color: #ffffff !important;
  border-color: #d4d4d8 !important;
  color: #18181b !important;
}
html.light .ideas-tab-btn.active {
  background-color: #ffffff !important;
  color: #09090b !important;
}

/* =============================================================================
 * Toasts — siempre legibles en ambos modos
 * =========================================================================== */
/* El host inyecta <div> hijos con clases Tailwind (bg-zinc-900/90 etc.). En
 * light mode, los overrides genéricos html.light .bg-zinc-900 {…} los volvían
 * ilegibles. Forzamos estilo dark siempre — un toast es feedback transitorio
 * y se lee mejor con alto contraste sin importar el modo global. */
#toast-host > div,
#toast-host .toast-item {
  background-color: #18181b !important;
  color: #f4f4f5 !important;
  border: 1px solid #3f3f46 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

html.light #toast-host > div,
html.light #toast-host .toast-item {
  background-color: #18181b !important;
  color: #f4f4f5 !important;
  border: 1px solid #52525b !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* ============================================================
   SPOTLIGHT GLOW CARD — vanilla JS adaptation
   ============================================================
   Port del GlowCard original. Usa coordenadas ABSOLUTAS del cursor
   (no relativas al card) + background-attachment: fixed para que el
   gradient viaje por todo el viewport. JS (initGlowCards) setea
   --x / --y / --xp / --yp en cada [data-glow] en pointermove.

   Estructura esperada:
     <div data-glow style="--base: 200">
       <div data-glow-inner></div>
       <!-- contenido -->
     </div>
   ============================================================ */
[data-glow] {
  --base: 220;
  --spread: 200;
  --radius: 14;
  --border: 2;
  --backdrop: hsl(0 0% 6% / 0.9);
  --backup-border: hsl(0 0% 20% / 0.3);
  --size: 200;
  --border-size: calc(var(--border) * 1px);
  --spotlight-size: calc(var(--size) * 1px);
  --hue: calc(var(--base) + (var(--xp, 0.5) * var(--spread)));
  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(var(--hue) 100% 70% / 0.1) 0%,
    transparent 70%
  );
  background-color: var(--backdrop);
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-position: 50% 50%;
  background-attachment: fixed;
  border: var(--border-size) solid var(--backup-border);
  border-radius: calc(var(--radius) * 1px);
  position: relative;
  /* touch-action eliminado (auditoría móvil): bloqueaba el scroll táctil sobre toda la card */
  box-shadow: 0 1rem 2rem -1rem black;
}

[data-glow]::before,
[data-glow]::after {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -1);
  border: var(--border-size) solid transparent;
  border-radius: calc(var(--radius) * 1px);
  background-attachment: fixed;
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  -webkit-mask-clip: padding-box, border-box;
  -webkit-mask-composite: destination-in;
}

[data-glow]::before {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(var(--hue) 100% 50% / 1) 0%,
    transparent 100%
  );
  filter: brightness(2);
}

[data-glow]::after {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(0 100% 100% / 0.8) 0%,
    transparent 100%
  );
}

/* Inner glow div — blur exterior para halo suave alrededor del card. */
[data-glow] > [data-glow-inner] {
  position: absolute;
  inset: 0;
  will-change: filter;
  border-radius: calc(var(--radius) * 1px);
  filter: blur(calc(var(--border-size) * 10));
  background: none;
  pointer-events: none;
}

html.light [data-glow] {
  --backdrop: hsl(0 0% 96% / 0.92);
  --backup-border: hsl(0 0% 75% / 0.4);
}

/* ============================================================
   Parrilla — chips arrastrables
   ============================================================ */
[data-content-chip][draggable="true"] {
  cursor: grab;
}
[data-content-chip][draggable="true"]:active {
  cursor: grabbing;
}

/* Celebraciones conmemorativas — legibilidad en light mode. */
html.light .text-emerald-400 { color: #059669 !important; }

/* ============================================================
   Tilt Card — rotación 3D + spotlight siguiendo el cursor.
   Aplicado a cards del banco de Ideas. JS (initTiltCards) maneja
   pointerenter/move/leave.
   ============================================================ */
.tilt-card {
  will-change: transform;
  transition: transform 0.2s ease-out;
  transform-style: preserve-3d;
  position: relative;
  overflow: hidden;
}
.tilt-card .tilt-spotlight {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tilt-card:hover .tilt-spotlight {
  opacity: 1;
}
.tilt-card .tilt-spotlight-inner {
  position: absolute;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 40%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .tilt-card { transition: none !important; transform: none !important; }
  .tilt-card .tilt-spotlight { display: none; }
}
/* Consola Admin — light mode */
html.light #admin-tab-body .bg-zinc-900 {
  background-color: #ffffff !important;
  border-color: #e4e4e7 !important;
}

/* Módulo Agenda — light mode */
html.light #agenda-calendar-grid .bg-zinc-900 {
  background-color: #ffffff !important;
  border-color: #e4e4e7 !important;
}

/* Panel de notificaciones — light mode */
html.light #notif-panel {
  background-color: #ffffff !important;
  border-color: #e4e4e7 !important;
}
html.light #notif-panel .hover\:bg-zinc-900\/50:hover {
  background-color: #f4f4f5 !important;
}

/* Agenda — Card Stack ------------------------------------------------------ */
.agenda-stack {
  position: relative;
  height: 280px;
  perspective: 1000px;
}
.agenda-stack-card {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 20px;
  cursor: grab;
  user-select: none;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
  background: rgba(24, 24, 27, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
  will-change: transform, opacity;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.agenda-stack-card.is-dragging { cursor: grabbing; transition: none; }
html.light .agenda-stack-card {
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.agenda-stack-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 12px;
}
.agenda-stack-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #52525b;
  transition: background 0.2s ease, transform 0.2s ease;
  cursor: pointer;
  border: none;
  padding: 0;
}
.agenda-stack-dot.active {
  background: #22d3ee;
  transform: scale(1.3);
}

/* Agenda — list view light mode */
html.light #agenda-stack-list-view .hover\:bg-zinc-800\/50:hover {
  background-color: #f4f4f5 !important;
}

/* Agenda — bento list cards light mode */
html.light #agenda-stack-list-view .bg-zinc-900\/60 {
  background-color: #ffffff !important;
  border-color: #e4e4e7 !important;
}
html.light #agenda-stack-list-view .group:hover {
  border-color: #d4d4d8 !important;
}

/* Bauhaus border effect — agenda month cards */
.agenda-month-card {
  position: relative;
  --rotation: 4.2rad;
  --card-accent: #22d3ee;
  --card-bg: #09090b;
  background-image:
    linear-gradient(var(--card-bg), var(--card-bg)),
    linear-gradient(calc(var(--rotation, 4.2rad)), var(--card-accent) 0%, var(--card-bg) 40%, transparent 80%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 1.5px solid transparent;
  border-radius: 12px;
  transition: box-shadow 0.3s ease;
}
.agenda-month-card:hover {
  box-shadow: 0 4px 20px rgba(34, 211, 238, 0.08);
}
html.light .agenda-month-card {
  --card-bg: #ffffff;
  background-image:
    linear-gradient(var(--card-bg), var(--card-bg)),
    linear-gradient(calc(var(--rotation, 4.2rad)), var(--card-accent) 0%, var(--card-bg) 40%, transparent 80%);
}

/* =============================================================================
   FX — inyección visual (jul 2026, géneros de 21st.dev adaptados a vanilla)
   Regla: brilla donde vendes, calma donde trabajas. Todos los efectos
   respetan prefers-reduced-motion y tienen ajuste para html.light.
   ========================================================================== */

/* --- Shine border: luz que recorre el borde (tarjetas héroe) --------------- */
@property --sb-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.shine-border { position: relative; }
.shine-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--sb-angle),
    transparent 0%, transparent 72%,
    rgba(34, 211, 238, .9) 86%, rgba(56, 189, 248, .5) 93%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: sb-spin 4.5s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes sb-spin { to { --sb-angle: 360deg; } }
html.light .shine-border::before {
  background: conic-gradient(from var(--sb-angle),
    transparent 0%, transparent 72%,
    rgba(8, 145, 178, .75) 86%, rgba(14, 116, 144, .4) 93%, transparent 100%);
}

/* --- Spotlight card: glow radial que sigue el mouse ------------------------ */
.spotlight-card { position: relative; }
.spotlight-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(34, 211, 238, .09), transparent 62%);
}
.spotlight-card:hover::after { opacity: 1; }
html.light .spotlight-card::after {
  background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(8, 145, 178, .10), transparent 62%);
}

/* --- Botones con barrido de luz (CTAs joya) -------------------------------- */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::before {
  content: '';
  position: absolute;
  top: 0; height: 100%;
  left: -80%; width: 55%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  transition: left .55s ease;
  pointer-events: none;
}
.btn-shine:hover::before { left: 130%; }

/* --- Barras de progreso con flujo (solo mientras avanzan) ------------------ */
.bar-flow {
  background-image: linear-gradient(90deg,
    rgba(6, 182, 212, .85) 0%, rgba(34, 211, 238, 1) 45%,
    rgba(56, 189, 248, .95) 65%, rgba(6, 182, 212, .85) 100%) !important;
  background-size: 200% 100%;
  animation: bar-flow 2.6s linear infinite;
}
@keyframes bar-flow { to { background-position: -200% 0; } }

/* --- Toasts: entrada con vida + glow por variante -------------------------- */
.toast-in { animation: toast-in .28s cubic-bezier(.16, 1, .3, 1); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.toast-glow-success { box-shadow: 0 0 22px rgba(34, 211, 238, .22), 0 8px 24px rgba(0,0,0,.35); }
.toast-glow-error   { box-shadow: 0 0 22px rgba(248, 113, 113, .2),  0 8px 24px rgba(0,0,0,.35); }

/* --- Empty states con intención -------------------------------------------- */
.empty-glow {
  background:
    radial-gradient(340px 140px at 50% 0%, rgba(34, 211, 238, .06), transparent 70%);
}
html.light .empty-glow {
  background:
    radial-gradient(340px 140px at 50% 0%, rgba(8, 145, 178, .07), transparent 70%);
}

/* --- Reduced motion: los efectos se apagan, el diseño queda ---------------- */
@media (prefers-reduced-motion: reduce) {
  .shine-border::before { animation: none; }
  .bar-flow { animation: none; }
  .btn-shine::before { display: none; }
  .toast-in { animation: none; }
}

/* --- FX en móvil: quietos. Las animaciones infinitas (borde, flujo) queman
   batería y janquean en celulares; el spotlight no aplica sin hover. El
   diseño queda: borde estático, barra sólida. ------------------------------- */
@media (max-width: 767px) {
  .shine-border::before { animation: none; }
  .bar-flow { animation: none; }
  .spotlight-card::after { display: none; }
  .shimmer-badge::before { animation: none; }
  /* background-attachment:fixed repinta por frame en Android y esta roto en iOS */
  [data-glow], [data-glow]::before, [data-glow]::after { background-attachment: scroll; }
  /* Tap targets del asistente: 44px (accion principal del chat en movil) */
  .asst-qb-btn { width: 2.75rem; height: 2.75rem; }
  .asst-querybox-input { padding-right: 7.25rem; }
}

/* === Copiloto del planner — orbe estilo "Jarvis" (jul-2026) ================ */
/* El conic gira en el ::before para no pelear con el scale del hover. */
.planner-orb {
  position: fixed;
  right: 1.25rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid rgba(103, 232, 249, 0.45);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.45), 0 0 60px rgba(34, 211, 238, 0.16);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  background: #041018;
}
.planner-orb:hover { transform: scale(1.08); box-shadow: 0 0 26px rgba(34, 211, 238, 0.6), 0 0 80px rgba(34, 211, 238, 0.22); }
.planner-orb::before {
  content: '';
  position: absolute;
  inset: -30%;
  border-radius: 9999px;
  background: conic-gradient(from 0deg, #22d3ee, #0e7490, #2563eb, #67e8f9, #0891b2, #22d3ee);
  animation: orb-spin 7s linear infinite;
}
.planner-orb::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 42%);
}
@keyframes orb-spin { to { transform: rotate(360deg); } }

/* Versión mini para el header del panel. */
.planner-orb-mini {
  position: relative;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid rgba(103, 232, 249, 0.4);
}
.planner-orb-mini::before {
  content: '';
  position: absolute;
  inset: -30%;
  border-radius: 9999px;
  background: conic-gradient(from 0deg, #22d3ee, #0e7490, #2563eb, #67e8f9, #0891b2, #22d3ee);
  animation: orb-spin 7s linear infinite;
}

/* Entrada del panel del copiloto. */
.planner-panel { animation: panel-in 0.18s ease-out; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Indicador de inserción del drag & drop del Kanban. */
.pl-drop-before { box-shadow: 0 -3px 0 -1px #22d3ee !important; }

@media (prefers-reduced-motion: reduce) {
  .planner-orb::before, .planner-orb-mini::before { animation: none; }
  .planner-panel { animation: none; }
}
html.light .planner-orb { background: #e0f7ff; }

/* Hold-to-talk del orbe: estado grabando + píldora de hint ------------------ */
.planner-orb { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.planner-orb.recording {
  animation: orb-pulse 1.1s ease-in-out infinite;
  box-shadow: 0 0 0 5px rgba(34, 211, 238, 0.22), 0 0 34px rgba(34, 211, 238, 0.75), 0 0 90px rgba(34, 211, 238, 0.3);
}
@keyframes orb-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
.planner-orb-hint {
  position: fixed;
  right: 1.25rem;
  bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 41;
  max-width: min(280px, calc(100vw - 2.5rem));
  padding: 0.5rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid rgba(34, 211, 238, 0.35);
  background: rgba(9, 18, 26, 0.92);
  color: #a5f3fc;
  font-size: 0.72rem;
  line-height: 1.3;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  animation: panel-in 0.15s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .planner-orb.recording { animation: none; }
}
html.light .planner-orb-hint { background: rgba(255, 255, 255, 0.95); color: #0e7490; }