/* ─────────────────────────────────────────────
   Flyka Dashboard — Tema cálido con personalidad
   Paleta: violeta/lavanda + coral + dorado suave
   sobre fondo oscuro elegante. Animaciones sutiles.
   ───────────────────────────────────────────── */

:root {
  --bg: #14101e;
  --bg-2: #1c1530;
  --panel: #221a36;
  --panel-2: #2a2244;
  --border: #3a2f55;
  --text: #f3eafc;
  --text-dim: #b9a8d4;
  --muted: #7a6c98;

  --lila: #c89bf0;
  --lila-2: #b07ce8;
  --rosa: #ff9ec7;
  --coral: #ffb088;
  --oro: #ffd58a;
  --menta: #9be8c2;

  --good: #7ee0a3;
  --warn: #ffd066;
  --bad: #ff7a8a;

  --hero-grad: linear-gradient(135deg, #2a1a4a 0%, #3d2257 50%, #4a2050 100%);
  --focus-grad: linear-gradient(120deg, #ff9ec7 0%, #c89bf0 50%, #b07ce8 100%);
  --shadow-soft: 0 8px 32px rgba(176, 124, 232, 0.12), 0 2px 8px rgba(0,0,0,0.3);
  --shadow-hover: 0 16px 48px rgba(200, 155, 240, 0.25), 0 4px 12px rgba(0,0,0,0.4);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Aura decorativa */
.aura {
  position: fixed;
  top: -20%;
  right: -20%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(200,155,240,0.18) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: floatAura 20s ease-in-out infinite alternate;
}
@keyframes floatAura {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-10%, 10%) scale(1.1); }
}

/* ───── Topbar ───── */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 28px;
  background: rgba(34, 26, 54, 0.85);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo {
  height: 38px;
  width: auto;
  filter: drop-shadow(0 4px 14px rgba(255,158,199,0.25));
  transition: filter 0.3s, transform 0.2s;
  user-select: none;
}
.brand-logo:hover {
  filter: drop-shadow(0 6px 18px rgba(255,158,199,0.45));
  transform: scale(1.03);
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.brand-text { display: flex; flex-direction: column; }
.subtitle { margin: 0; color: var(--text-dim); font-size: 12px; }

.controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.controls label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10px; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 600;
}
.controls select, .controls input[type="date"] {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  min-width: 170px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.controls select:focus, .controls input:focus {
  outline: none;
  border-color: var(--lila);
  box-shadow: 0 0 0 3px rgba(200,155,240,0.15);
}

.btn {
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.2s, background 0.2s;
  font-family: inherit;
}
.btn:hover { transform: translateY(-1px); border-color: var(--lila); box-shadow: 0 6px 18px rgba(200,155,240,0.18); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--focus-grad);
  border: none;
  color: #2a1a4a;
  font-weight: 700;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-soft {
  background: rgba(200,155,240,0.1);
  border-color: rgba(200,155,240,0.3);
  color: var(--lila);
}
.upload-btn { display: inline-flex; align-items: center; cursor: pointer; }
/* ── Pickers de reporte (tienda / agente) como botones ─── */
.report-picker-label {
  display: block;
  font-size: 13px;
  opacity: 0.75;
  margin-bottom: 8px;
}
.report-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.report-picker-btn {
  display: flex; flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(200,155,240,0.25);
  background: rgba(0,0,0,0.25);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.report-picker-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(200,155,240,0.55);
  background: rgba(200,155,240,0.08);
}
.report-picker-btn strong {
  color: var(--lila);
  font-size: 13px;
}
.report-picker-btn .picker-sub {
  font-size: 11px;
  opacity: 0.65;
}

/* ── Ranking por módulo ─────────────────────────── */
.ranking-por-modulo { display: flex; flex-direction: column; gap: 16px; }
.ranking-modulo-block {
  border: 1px solid rgba(200,155,240,0.15);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.ranking-modulo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(200,155,240,0.12);
  background: rgba(200,155,240,0.06);
}
.ranking-modulo-head h3 {
  margin: 0;
  font-size: 14px;
  color: var(--lila);
  font-weight: 600;
}
.ranking-modulo-block tr.clickable { cursor: pointer; }
.ranking-modulo-block tr.clickable:hover {
  background: rgba(200,155,240,0.08);
}
.ranking-modulo-block tr.clickable:active {
  background: rgba(200,155,240,0.18);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

/* ── Bocadillo del Foco que sale del 🐶 ── */
.foco-bubble {
  position: fixed;
  bottom: 128px;                /* arriba de la burbuja del chat */
  right: 24px;
  z-index: 650;
  max-width: 300px;
  background: linear-gradient(135deg, rgba(40, 20, 70, 0.98), rgba(60, 30, 100, 0.98));
  border: 1px solid rgba(200, 155, 240, 0.45);
  border-radius: 14px;
  padding: 14px 16px 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(140, 80, 220, 0.35);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: bubble-pop 0.35s cubic-bezier(.16,1,.3,1);
  transform-origin: bottom right;
}
.foco-bubble[hidden] { display: none; }
@keyframes bubble-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.foco-bubble.fade-out {
  animation: bubble-fade 0.35s ease forwards;
}
@keyframes bubble-fade {
  to { opacity: 0; transform: translateY(8px) scale(0.95); }
}
.foco-bubble-title {
  font-weight: 700;
  color: var(--lila);
  font-size: 12px;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.foco-bubble-body {
  color: #fff;
  font-size: 13px;
}
.foco-bubble-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
}
.foco-bubble-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.foco-bubble-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(200,155,240,0.15);
}
.foco-bubble-link {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  letter-spacing: 0.3px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: inherit;
}
.foco-bubble-link:hover {
  color: var(--lila);
  background: rgba(200,155,240,0.1);
}
.foco-bubble-tail {
  position: absolute;
  bottom: -8px;
  right: 28px;
  width: 16px;
  height: 16px;
  background: rgba(60, 30, 100, 0.98);
  border-right: 1px solid rgba(200, 155, 240, 0.45);
  border-bottom: 1px solid rgba(200, 155, 240, 0.45);
  transform: rotate(45deg);
}

/* ── Burbuja flotante del chat con Flyka 🐶 ── */
.fab-chat {
  position: fixed;
  bottom: 60px;
  right: 28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(200, 155, 240, 0.5);
  background: linear-gradient(135deg, rgba(40, 20, 70, 0.95), rgba(60, 30, 100, 0.95));
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 600;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(140, 80, 220, 0.45), 0 2px 8px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fab-chat:hover {
  transform: scale(1.08) rotate(-8deg);
  box-shadow: 0 6px 28px rgba(140, 80, 220, 0.6), 0 3px 12px rgba(0, 0, 0, 0.5);
}
.fab-chat:active { transform: scale(0.96); }
@media print { .fab-chat { display: none; } }

/* Si el chat-modal está abierto, escondemos la burbuja para que no se encime */
body.chat-open .fab-chat { display: none; }

/* ── Modal flotante del chat ── */
.chat-modal {
  position: fixed;
  bottom: 60px;
  right: 28px;
  z-index: 700;
  width: min(380px, calc(100vw - 36px));
  max-height: calc(100vh - 110px);
  animation: chat-pop 0.22s cubic-bezier(.16,1,.3,1);
}
.chat-modal[hidden] { display: none; }
@keyframes chat-pop {
  from { opacity: 0; transform: translateY(20px) scale(0.92); transform-origin: bottom right; }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-panel {
  background: rgba(20, 10, 40, 0.95);
  border: 1px solid rgba(200, 155, 240, 0.35);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 4px 16px rgba(140, 80, 220, 0.3);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 110px);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.chat-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(200, 155, 240, 0.15);
  background: rgba(200, 155, 240, 0.06);
}
.chat-panel-title {
  font-weight: 600;
  color: var(--lila);
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.chat-panel-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  opacity: 0.6;
}
.chat-panel-badge:empty { display: none; }
.chat-panel .chat-log {
  flex: 1;
  min-height: 200px;
  max-height: 360px;
  overflow-y: auto;
  padding: 12px 14px;
}
.chat-panel .chat-suggest {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid rgba(200, 155, 240, 0.1);
}
.chat-panel .chat-form {
  display: flex; gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(200, 155, 240, 0.1);
}
.chat-panel .chat-form input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(200,155,240,0.3);
  background: rgba(0,0,0,0.4);
  color: #fff;
  font-size: 14px;
}
.chat-panel .chat-form input:focus {
  outline: 2px solid rgba(200,155,240,0.6); border-color: transparent;
}
.chat-panel .chat-form button {
  padding: 8px 14px;
  font-size: 13px;
}
/* Audit tiles clickeables */
.audit-tile[role="button"] {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.audit-tile[role="button"]:hover {
  transform: translateY(-1px);
  border-color: rgba(200,155,240,0.45);
  box-shadow: 0 4px 16px rgba(140, 80, 220, 0.22);
}
.audit-tile[role="button"]:focus-visible {
  outline: 2px solid var(--lila);
  outline-offset: 2px;
}

/* Modal de detalle de auditoría */
.audit-modal-body { padding: 18px 22px 22px; }
.audit-modal-pct {
  text-align: center;
  padding: 14px 12px;
  border-radius: 12px;
  margin-bottom: 14px;
  background: rgba(200, 155, 240, 0.08);
}
.audit-modal-pct.good { background: rgba(80, 200, 120, 0.14); }
.audit-modal-pct.warn { background: rgba(255, 180, 60, 0.14); }
.audit-modal-pct.bad  { background: rgba(220, 80, 80, 0.16); }
.audit-modal-pct-num {
  display: block;
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.audit-modal-pct.good .audit-modal-pct-num { color: #6ce897; }
.audit-modal-pct.warn .audit-modal-pct-num { color: #ffc97a; }
.audit-modal-pct.bad  .audit-modal-pct-num { color: #ff8a8a; }
.audit-modal-pct-lbl {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.audit-modal-stats {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
  font-size: 13px;
}
.audit-modal-stats strong { color: var(--lila); }
.audit-modal-tip {
  margin: 14px 0 0;
  padding: 10px 12px;
  font-size: 12px;
  background: rgba(200,155,240,0.06);
  border-left: 3px solid rgba(200,155,240,0.5);
  border-radius: 4px;
  line-height: 1.5;
  opacity: 0.9;
}
.audit-modal-detalle { margin-top: 18px; }
.audit-modal-detalle-title {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  font-weight: 600;
}
.audit-modal-detalle .data-table { font-size: 12px; }
.audit-modal-detalle .data-table tbody tr.clickable:hover {
  background: rgba(200,155,240,0.08);
}

/* Live chat con el admin: variantes del mismo .chat-msg.flyka */
.chat-msg.flyka.admin {
  border-left: 3px solid #50c878;
  padding-left: 10px;
}
.chat-msg.flyka.live {
  background: rgba(255, 120, 50, 0.14);
  border: 1px solid rgba(255, 120, 50, 0.4);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
}
.chat-msg.flyka.system {
  font-size: 11px;
  opacity: 0.55;
  font-style: italic;
}
#chatBadge.live-indicator {
  color: #ff7a3c;
  opacity: 1;
}
#chatBadge.live-indicator::before {
  content: "🔴 LIVE";
}

/* Globo destacado para el saludo inicial */
.chat-panel .chat-msg.flyka.greeting {
  background: linear-gradient(135deg, rgba(200, 155, 240, 0.22), rgba(140, 80, 220, 0.18));
  border: 1px solid rgba(200, 155, 240, 0.45);
  padding: 14px 16px;
  border-radius: 16px 16px 16px 4px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.45;
  position: relative;
  animation: greeting-pop 0.4s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 4px 12px rgba(140, 80, 220, 0.18);
}
.chat-panel .chat-msg.flyka.greeting::before {
  content: "🐶";
  position: absolute;
  left: -10px;
  top: -10px;
  background: rgba(40, 20, 70, 0.95);
  border: 2px solid rgba(200, 155, 240, 0.5);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
@keyframes greeting-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-panel-actions { display: flex; align-items: center; gap: 4px; }
.chat-mini-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 16px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
}
.chat-mini-btn:hover { background: rgba(200,155,240,0.15); color: var(--lila); }

/* Modal de feedback */
.feedback-form { display: flex; flex-direction: column; gap: 12px; padding: 18px 22px 20px; }
.feedback-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; opacity: 0.9; }
.feedback-form label.checkbox { flex-direction: row; align-items: center; gap: 8px; }
.feedback-form textarea {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(200,155,240,0.3);
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}
.feedback-form textarea:focus {
  outline: 2px solid rgba(200,155,240,0.6); border-color: transparent;
}
.feedback-intro { margin: 0; font-size: 13px; opacity: 0.75; line-height: 1.4; }
.feedback-error {
  padding: 8px 12px; border-radius: 8px;
  background: rgba(220,80,80,0.18); color: #fbb; font-size: 13px;
}
.feedback-success {
  padding: 10px 12px; border-radius: 8px;
  background: rgba(80,200,120,0.18); color: #afe; font-size: 13px;
}
.feedback-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Selector de opciones del modal de soporte */
.feedback-picker {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 22px 22px;
}
.feedback-option {
  display: flex; flex-direction: column; gap: 4px;
  text-align: left;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(200,155,240,0.25);
  background: rgba(0,0,0,0.25);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.feedback-option:hover {
  transform: translateY(-1px);
  border-color: rgba(200,155,240,0.55);
  background: rgba(200,155,240,0.08);
}
.feedback-option-icon { font-size: 22px; margin-bottom: 2px; }
.feedback-option-title { font-weight: 700; font-size: 14px; color: var(--lila); }
.feedback-option-sub { font-size: 12px; opacity: 0.7; }
.feedback-back {
  background: transparent; border: none; color: rgba(255,255,255,0.6);
  font-size: 12px; cursor: pointer; padding: 0; margin-bottom: 4px;
  align-self: flex-start;
}
.feedback-back:hover { color: var(--lila); }

/* Live chat panel dentro del modal de soporte */
.livechat-panel {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 22px 20px;
}
.livechat-status {
  font-size: 12px; opacity: 0.7;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.25);
}
.livechat-status.activa {
  background: rgba(255, 120, 50, 0.15);
  color: #ffaf85;
}
.livechat-status.activa::before { content: "🔴 "; }
.livechat-log {
  max-height: 250px;
  overflow-y: auto;
  padding: 8px;
  background: rgba(0,0,0,0.25);
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px;
  min-height: 80px;
}
.livechat-log:empty::before {
  content: "Aún sin mensajes.";
  opacity: 0.4;
  font-size: 12px;
  text-align: center;
  padding: 20px;
  display: block;
}
.livechat-msg {
  padding: 8px 10px;
  border-radius: 8px;
  line-height: 1.4;
  word-wrap: break-word;
}
.livechat-msg.user {
  background: rgba(200,155,240,0.15);
  align-self: flex-end;
  max-width: 85%;
}
.livechat-msg.admin {
  background: rgba(80,200,120,0.18);
  border-left: 3px solid #50c878;
  align-self: flex-start;
  max-width: 85%;
}
.livechat-msg.system {
  font-size: 11px;
  opacity: 0.6;
  font-style: italic;
  text-align: center;
}
.livechat-form { display: flex; gap: 6px; }
.livechat-form input {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(200,155,240,0.3);
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 13px;
}
.livechat-actions { display: flex; justify-content: flex-end; gap: 8px; }
.feedback-preview {
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
  border: 1px solid rgba(200,155,240,0.3);
  margin-top: 4px;
  display: block;
}
.feedback-form kbd {
  background: rgba(200,155,240,0.18);
  border: 1px solid rgba(200,155,240,0.3);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: -apple-system-ui-monospace, "SF Mono", monospace;
  font-size: 10px;
  color: var(--lila);
}

/* ── Botón flotante de pantalla completa ── */
/* Discreto pero localizable. Sube a opacity 1 al hover. */
.fab-fullscreen {
  position: fixed;
  bottom: 68px;          /* en línea con el centro del fab-chat */
  right: 96px;           /* a la izquierda de la burbuja del chat */
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(200, 155, 240, 0.45);
  background: rgba(20, 10, 40, 0.55);
  color: var(--lila, #c89bf0);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.45;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.fab-fullscreen:hover, .fab-fullscreen:focus-visible {
  opacity: 1;
  border-color: rgba(200, 155, 240, 0.85);
  background: rgba(40, 20, 70, 0.9);
  transform: scale(1.08);
  outline: none;
}
:fullscreen .fab-fullscreen,
:-webkit-full-screen .fab-fullscreen { opacity: 0.25; }
@media print { .fab-fullscreen { display: none; } }

/* ── Menú de usuario ───────────────────────────── */
.user-menu { position: relative; display: inline-block; }
.user-menu-caret { margin-left: 6px; font-size: 11px; opacity: 0.7; }
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: rgba(20, 10, 40, 0.96);
  border: 1px solid rgba(200, 155, 240, 0.3);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  z-index: 1000;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.user-menu-dropdown[hidden] { display: none; }
.user-menu-info {
  padding: 6px 8px 10px;
  border-bottom: 1px solid rgba(200,155,240,0.15);
  margin-bottom: 8px;
}
.user-menu-info div:first-child { font-weight: 600; color: var(--lila); }
.user-menu-role { font-size: 11px; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.5px; }
.user-menu-label { display: block; font-size: 11px; opacity: 0.6; margin: 6px 8px 4px; }
.user-menu-dropdown select {
  width: calc(100% - 16px);
  margin: 0 8px 10px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(200,155,240,0.3);
  background: rgba(0,0,0,0.4);
  color: #fff;
  font-size: 13px;
}
.user-menu-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.user-menu-item:hover { background: rgba(200,155,240,0.12); }
.user-menu-item-danger { color: #fbb; }
.user-menu-item-danger:hover { background: rgba(220,80,80,0.18); }

/* ── Easter egg: nombre "Marcelo" en footer ───────────────────── */
.credit-name {
  color: var(--lila);
  font-weight: 600;
  text-decoration: none;
  position: relative;
  padding: 1px 4px;
  border-radius: 4px;
  transition: color 0.2s ease, text-shadow 0.2s ease, background 0.2s ease;
  cursor: pointer;
}
.credit-name:hover, .credit-name:focus-visible {
  color: #6cff6c;
  background: rgba(0, 0, 0, 0.6);
  text-shadow:
    0 0 4px #6cff6c,
    0 0 10px rgba(80, 255, 80, 0.8),
    0 0 18px rgba(60, 220, 60, 0.5);
  animation: matrix-flicker 1.4s steps(8, end) infinite,
             matrix-glitch 2.4s infinite;
  outline: none;
}
@keyframes matrix-flicker {
  0%, 100% { opacity: 1; }
  10% { opacity: 0.85; }
  18% { opacity: 1; }
  35% { opacity: 0.7; }
  42% { opacity: 1; }
  68% { opacity: 0.92; }
  78% { opacity: 1; }
}
@keyframes matrix-glitch {
  0%, 100% { letter-spacing: normal; transform: translateX(0); }
  20% { letter-spacing: 0.5px; transform: translateX(-1px); }
  22% { letter-spacing: -0.3px; transform: translateX(1px); }
  24% { transform: translateX(0); }
  60% { transform: translateX(-0.5px); }
  62% { transform: translateX(0.5px); }
  64% { transform: translateX(0); }
}

/* Por default ocultamos cualquier elemento admin-only o el botón "Gestionar
 * usuarios" hasta que el JS confirme que el usuario es admin (clase en <body>).
 * Esto evita el flash del botón antes de que termine de cargar la sesión. */
#userMenuUsers,
.admin-only {
  display: none !important;
}
body.is-admin #userMenuUsers,
body.is-admin .admin-only {
  display: revert !important;
}

/* ── Tab Usuarios ───────────────────────────────── */
.panel-usuarios { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.panel-usuarios-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.panel-usuarios-head h3 { margin: 0; }
.usuarios-table-wrap { overflow: auto; flex: 1; }
.usuarios-table { width: 100%; }
.usuarios-table th, .usuarios-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(200,155,240,0.12);
  font-size: 13px;
  text-align: left;
  vertical-align: middle;
}
.usuarios-table th { font-weight: 600; color: var(--lila); }
.usuarios-table .rol-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.usuarios-table .rol-admin { background: rgba(255,180,80,0.2); color: #ffc97a; }
.usuarios-table .rol-supervisor { background: rgba(120,200,255,0.18); color: #9ed4ff; }
.usuarios-table .row-inactiva { opacity: 0.5; }
.usuarios-actions { display: inline-flex; gap: 4px; }
.usuarios-actions button {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid rgba(200,155,240,0.3);
  background: transparent;
  color: var(--lila);
  cursor: pointer;
}
.usuarios-actions button:hover { background: rgba(200,155,240,0.12); }
.usuarios-actions .danger { color: #fbb; border-color: rgba(220,80,80,0.4); }
.usuarios-actions .danger:hover { background: rgba(220,80,80,0.18); }
.usuarios-error { color: #fbb; padding: 8px 12px; border-radius: 8px; background: rgba(220,80,80,0.15); }

/* ── Modal: form de usuario ────────────────────── */
.usuario-form { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px 22px; }
.usuario-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; opacity: 0.9;
}
.usuario-form label.checkbox { flex-direction: row; align-items: center; gap: 8px; }
.usuario-form input, .usuario-form select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(200,155,240,0.3);
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 14px;
}
.usuario-form input:focus, .usuario-form select:focus {
  outline: 2px solid rgba(200,155,240,0.6);
  border-color: transparent;
}
.usuario-form-error {
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(220,80,80,0.18);
  color: #fbb;
  font-size: 13px;
}
.usuario-form-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px;
}
.report-group { display: flex; gap: 6px; }

main {
  padding: 24px 40px 96px;
  max-width: 1900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
}
main > section { max-width: 100%; }
.centered { padding: 80px 0; text-align: center; color: var(--text-dim); }
.loading-shimmer {
  background: linear-gradient(90deg, transparent, rgba(200,155,240,0.15), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
  border-radius: 12px;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ───── Banner FOCO HOY ───── */
.focus-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 24px;
  margin-bottom: 18px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,158,199,0.15), rgba(200,155,240,0.15) 50%, rgba(176,124,232,0.18)),
    var(--panel);
  border: 1px solid rgba(255,158,199,0.25);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.focus-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--focus-grad);
  opacity: 0.06;
  animation: gradientShift 10s ease infinite;
  pointer-events: none;
}
.focus-icon {
  font-size: 32px;
  filter: drop-shadow(0 2px 8px rgba(255,158,199,0.4));
  animation: pulseIcon 2.5s ease-in-out infinite;
}
@keyframes pulseIcon {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.focus-body { flex: 1; }
.focus-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--rosa);
}
.focus-text {
  font-size: 17px;
  font-weight: 600;
  margin-top: 4px;
  line-height: 1.45;
  color: var(--text);
}
.focus-meta {
  font-size: 11px;
  color: var(--text-dim);
  text-align: right;
  max-width: 220px;
}
.focus-meta.clickable-meta {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,158,199,0.2);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s;
  text-align: right;
  position: relative;
}
.focus-meta.clickable-meta:hover {
  border-color: var(--rosa);
  color: var(--text);
  background: rgba(255,158,199,0.1);
  transform: translateY(-1px);
}
.focus-meta.clickable-meta::after {
  content: '↗';
  margin-left: 6px;
  color: var(--lila);
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.2s;
  display: inline-block;
}
.focus-meta.clickable-meta:hover::after {
  opacity: 1;
  transform: translate(2px, -2px);
}

/* ───── KPIs ───── */
.kpis {
  display: grid;
  grid-template-columns: 2fr repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.kpi {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.kpi:hover {
  transform: translateY(-2px);
  border-color: rgba(200,155,240,0.5);
  box-shadow: var(--shadow-hover);
}
.kpi-hero {
  background: var(--hero-grad);
  background-size: 200% 200%;
  animation: gradientShift 14s ease infinite;
  border-color: rgba(255,158,199,0.2);
}
.kpi-hero::after {
  content: '';
  position: absolute;
  bottom: -40%;
  right: -10%;
  width: 60%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,158,199,0.22), transparent 60%);
  pointer-events: none;
  filter: blur(20px);
}
.kpi { isolation: isolate; }
.kpi-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  font-weight: 600;
}
.kpi-value {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kpi-hero .kpi-value {
  font-size: 56px;
  background: linear-gradient(135deg, #fff 0%, var(--lila) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kpi-value .unit {
  font-size: 0.5em;
  color: var(--text-dim);
  margin-left: 4px;
  -webkit-text-fill-color: var(--text-dim);
  font-weight: 500;
}
.kpi-sub { margin-top: 6px; font-size: 12px; color: var(--text-dim); }
.kpi-bar {
  margin-top: 14px;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
}
.kpi-bar > div {
  height: 100%;
  background: var(--focus-grad);
  border-radius: 4px;
  width: 0;
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 12px rgba(255,158,199,0.5);
}

.kpi[data-tone="good"] { border-color: rgba(126,224,163,0.4); }
.kpi[data-tone="good"] .kpi-bar > div { background: linear-gradient(90deg, var(--good), var(--menta)); box-shadow: 0 0 12px rgba(126,224,163,0.5); }
.kpi[data-tone="warn"] { border-color: rgba(255,208,102,0.4); }
.kpi[data-tone="warn"] .kpi-bar > div { background: linear-gradient(90deg, var(--warn), var(--oro)); box-shadow: 0 0 12px rgba(255,208,102,0.5); }
.kpi[data-tone="bad"] { border-color: rgba(255,122,138,0.4); }
.kpi[data-tone="bad"] .kpi-bar > div { background: linear-gradient(90deg, var(--bad), var(--rosa)); box-shadow: 0 0 12px rgba(255,122,138,0.5); }

/* ───── Cards / tablas ───── */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
  align-items: stretch;
}
.grid-2 > * { min-width: 0; }
.grid-2 > .card {
  display: flex;
  flex-direction: column;
}
.grid-2 > .card > .card-head { flex: 0 0 auto; }
.grid-2 > .card > :not(.card-head) { flex: 1; }
.kpis > * { min-width: 0; }
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px 22px;
  transition: border-color 0.25s, box-shadow 0.25s;
  min-width: 0;
  overflow: hidden;
}
.card:hover { border-color: rgba(200,155,240,0.35); box-shadow: var(--shadow-soft); }
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.card-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lila);
}
.muted { color: var(--muted); font-size: 12px; }

.chart-wrap { height: 220px; margin-bottom: 14px; }

.table-scroll { max-height: 380px; overflow-y: auto; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th, .data-table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
}
.data-table th.r, .data-table td.r { text-align: right; font-variant-numeric: tabular-nums; }
.data-table th {
  color: var(--text-dim);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.data-table tbody tr {
  transition: background 0.15s;
}
.data-table tbody tr:hover { background: rgba(200,155,240,0.05); }
.data-table.sticky thead th {
  position: sticky; top: 0;
  background: var(--panel);
  z-index: 1;
}
.data-table .pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.pill-good { background: rgba(126,224,163,0.18); color: var(--good); }
.pill-warn { background: rgba(255,208,102,0.18); color: var(--warn); }
.pill-bad  { background: rgba(255,122,138,0.18); color: var(--bad); }

/* ───── Alertas ───── */
.alerts {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 380px;
  overflow-y: auto;
}
.alerts li {
  display: flex;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
  animation: slideIn 0.4s ease;
}
@keyframes slideIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.alerts li:last-child { border-bottom: none; }
.alert-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
}
.alert-dot.alta { background: var(--bad); box-shadow: 0 0 12px var(--bad); animation: pulseDot 1.5s ease-in-out infinite; }
.alert-dot.media { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.alert-dot.baja { background: var(--text-dim); }
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 6px var(--bad); }
  50% { box-shadow: 0 0 16px var(--bad), 0 0 24px var(--bad); }
}
.alert-msg { flex: 1; }
.alert-tipo {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.alert-text { margin-top: 2px; }

/* ───── Chat ───── */
.chat { display: flex; flex-direction: column; gap: 12px; }
.chat-log {
  min-height: 100px;
  max-height: 240px;
  overflow-y: auto;
  padding: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.6;
}
.chat-msg { margin-bottom: 12px; animation: slideIn 0.3s ease; }
.chat-msg:last-child { margin-bottom: 0; }
.chat-msg.user {
  color: var(--text-dim);
  font-style: italic;
}
.chat-msg.user::before { content: "» "; color: var(--lila); font-style: normal; font-weight: 600; }
.chat-msg.flyka {
  padding-left: 14px;
  border-left: 3px solid var(--lila);
  white-space: pre-wrap;
}
.chat-msg.flyka.streaming .stream-body {
  color: var(--text);
}
.chat-msg.flyka .stream-caret {
  display: inline-block;
  color: var(--lila);
  margin-left: 1px;
  animation: streamBlink 1s steps(2) infinite;
}
@keyframes streamBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.chat-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.chip:hover {
  border-color: var(--lila);
  color: var(--text);
  background: rgba(200,155,240,0.08);
}
.chat-form { display: flex; gap: 8px; }
.chat-form input {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.chat-form input:focus {
  outline: none;
  border-color: var(--lila);
  box-shadow: 0 0 0 3px rgba(200,155,240,0.15);
}

/* ───── Footer ───── */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 10px 28px;
  font-size: 12px;
  color: var(--text-dim);
  background: rgba(34, 26, 54, 0.85);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 5;
}

/* ───── Animaciones de entrada ───── */
[data-anim="fade-up"] {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
[data-anim="stagger"] > * {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
[data-anim="stagger"] > *:nth-child(1) { animation-delay: 0.05s; }
[data-anim="stagger"] > *:nth-child(2) { animation-delay: 0.1s; }
[data-anim="stagger"] > *:nth-child(3) { animation-delay: 0.15s; }
[data-anim="stagger"] > *:nth-child(4) { animation-delay: 0.2s; }
[data-anim="stagger"] > *:nth-child(5) { animation-delay: 0.25s; }
[data-anim="stagger"] > *:nth-child(6) { animation-delay: 0.3s; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

/* ───── Modal de agente ───── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 30, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  animation: backdropIn 0.2s ease;
}
.modal-backdrop[hidden] { display: none !important; }
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }

.modal-panel {
  width: min(560px, 100vw);
  height: 100vh;
  background: var(--panel);
  border-left: 1px solid var(--border);
  box-shadow: -20px 0 60px rgba(0,0,0,0.5);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  position: relative;
  animation: panelIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes panelIn { from { transform: translateX(100%); } to { transform: none; } }

/* Header pegajoso del modal con la X siempre visible */
.modal-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: rgba(34, 26, 54, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.modal-topbar-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.modal-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.modal-close:hover, .modal-close:focus-visible {
  background: rgba(200,155,240,0.12);
  color: var(--text);
  outline: none;
}
.modal-close-label { display: none; }

.modal-content {
  padding: 24px 28px 60px;
}

/* Drag handle solo visible en móvil */
.modal-drag {
  display: none;
}

.agent-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 6px 0 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.agent-avatar {
  width: 56px; height: 56px;
  border-radius: 18px;
  background: var(--focus-grad);
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
  color: #2a1a4a;
  font-weight: 800;
  font-size: 22px;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(255,158,199,0.3);
  flex-shrink: 0;
}
.agent-name {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.agent-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.agent-meta .dot { color: var(--muted); }

.agent-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.agent-kpi {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: center;
}
.agent-kpi .lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 600;
}
.agent-kpi .val {
  margin-top: 4px;
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.agent-section { margin-bottom: 22px; }
.agent-section h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lila);
  margin: 0 0 10px;
  font-weight: 700;
}

.trend {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 70px;
  padding: 6px 0;
}
.trend-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--rosa), var(--lila));
  border-radius: 6px 6px 2px 2px;
  position: relative;
  min-height: 4px;
  transition: transform 0.2s;
}
.trend-bar:hover { transform: translateY(-2px); }
.trend-bar.empty {
  background: var(--border);
}
.trend-bar .trend-tip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
  margin-bottom: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  background: var(--bg-2);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  pointer-events: none;
}
.trend-bar:hover .trend-tip { opacity: 1; }
.trend-bar .trend-day {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--muted);
  margin-top: 4px;
}

.activity-row {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  font-size: 13px;
}
.activity-row:last-child { border-bottom: none; }
.activity-row .a-fecha {
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.activity-row .a-main { line-height: 1.3; }
.activity-row .a-prospecto {
  font-weight: 600;
  color: var(--text);
}
.activity-row .a-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.activity-row .a-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── Click en cliente → expandir detalle inline ── */
.activity-row.clickable-client {
  cursor: pointer;
  transition: background 0.15s;
}
.activity-row.clickable-client:hover {
  background: rgba(200, 155, 240, 0.04);
}
.activity-row.clickable-client.expanded {
  background: rgba(200, 155, 240, 0.06);
  grid-template-columns: 78px 1fr auto;
  grid-template-areas:
    "fecha main tags"
    "det det det";
  row-gap: 8px;
}
.activity-row.clickable-client.expanded .a-fecha { grid-area: fecha; }
.activity-row.clickable-client.expanded .a-main { grid-area: main; }
.activity-row.clickable-client.expanded .a-tags { grid-area: tags; }
.activity-row.clickable-client.expanded .cliente-det { grid-area: det; }

.a-expand-caret {
  display: inline-block;
  margin-left: 4px;
  font-size: 9px;
  color: var(--text-dim);
  transition: transform 0.2s;
  vertical-align: middle;
}

.cliente-det {
  margin-top: 4px;
  padding: 10px 12px;
  background: rgba(20, 12, 38, 0.55);
  border: 1px solid rgba(200, 155, 240, 0.18);
  border-radius: 6px;
  font-size: 12px;
}
.cliente-det-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 18px;
}
.cliente-det-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px dashed rgba(200, 155, 240, 0.08);
  padding: 3px 0;
}
.cliente-det-lbl {
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}
.cliente-det-val {
  color: var(--text);
  text-align: right;
  word-break: break-word;
}
.cliente-det-badge {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.cliente-det-badge.good { background: rgba(126,224,163,0.18); color: var(--good); }
.cliente-det-badge.warn { background: rgba(255,200,90,0.16); color: #ffc97a; }
.cliente-det-badge.bad  { background: rgba(220,80,80,0.18); color: #ff8a8a; }
.cliente-det-empty {
  color: var(--muted);
  font-style: italic;
  text-align: center;
  padding: 6px;
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tag-on { background: rgba(126,224,163,0.18); color: var(--good); }
.tag-off { background: rgba(122,108,152,0.18); color: var(--text-dim); }
.tag-warn { background: rgba(255,208,102,0.18); color: var(--warn); }
.tag-bad { background: rgba(255,122,138,0.18); color: var(--bad); }
.tag-info { background: rgba(200,155,240,0.18); color: var(--lila); }

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

/* Filas clickeables del ranking */
.data-table tbody tr.clickable {
  cursor: pointer;
}
.data-table tbody tr.clickable:hover {
  background: rgba(200,155,240,0.08);
}

/* KPI clickeable */
.clickable-kpi {
  cursor: pointer;
  position: relative;
}
.clickable-kpi:hover {
  border-color: rgba(255,158,199,0.5);
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.clickable-kpi:focus-visible {
  outline: 2px solid var(--rosa);
  outline-offset: 2px;
}
.kpi-hint {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  color: var(--lila);
  opacity: 0.7;
  transition: transform 0.2s, opacity 0.2s;
}
.clickable-kpi:hover .kpi-hint {
  opacity: 1;
  transform: translate(2px, -2px);
}

/* Breakdown por módulo en el modal */
.module-row {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}
.module-row:last-child { margin-bottom: 0; }
.module-row:hover { border-color: rgba(200,155,240,0.4); }

.module-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.module-row-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}
.module-row-stats {
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.module-row-stats strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
}

.module-progress {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0 10px;
  position: relative;
}
.module-progress > div {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.module-progress.good > div { background: linear-gradient(90deg, var(--good), var(--menta)); box-shadow: 0 0 8px rgba(126,224,163,0.4); }
.module-progress.warn > div { background: linear-gradient(90deg, var(--warn), var(--oro)); box-shadow: 0 0 8px rgba(255,208,102,0.4); }
.module-progress.bad  > div { background: linear-gradient(90deg, var(--bad), var(--rosa)); box-shadow: 0 0 8px rgba(255,122,138,0.4); }

.module-row-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--text-dim);
}
.module-row-meta .pill { font-size: 10px; padding: 2px 7px; }
.module-row-cap {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,208,102,0.18);
  color: var(--warn);
}

/* Modal de alertas */
.alert-counter.alta { border-color: rgba(255,122,138,0.5); }
.alert-counter.alta .val { color: var(--bad); }
.alert-counter.media { border-color: rgba(255,208,102,0.5); }
.alert-counter.media .val { color: var(--warn); }
.alert-counter.baja { border-color: rgba(122,108,152,0.5); }
.alert-counter.baja .val { color: var(--text-dim); }

.reco-card {
  background: linear-gradient(135deg, rgba(255,158,199,0.12), rgba(200,155,240,0.08));
  border: 1px solid rgba(255,158,199,0.3);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

.alert-group {
  margin-bottom: 16px;
}
.alert-group:last-child { margin-bottom: 0; }
.alert-group-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.alert-group-title.alta { color: var(--bad); }
.alert-group-title.media { color: var(--warn); }
.alert-group-title.baja { color: var(--text-dim); }
.alert-group-title .count {
  background: var(--bg-2);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  color: var(--text);
}

.alert-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-dim);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.alert-card:last-child { margin-bottom: 0; }
.alert-card.alta { border-left-color: var(--bad); }
.alert-card.media { border-left-color: var(--warn); }
.alert-card.baja { border-left-color: var(--text-dim); }
.alert-card .a-tipo {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 600;
}
.alert-card .a-msg {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.4;
}
.alert-card .a-action {
  font-size: 12px;
  color: var(--lila);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.alert-card .a-action::before { content: '→'; opacity: 0.6; }

.alert-card.navigable {
  cursor: pointer;
  transition: all 0.18s;
}
.alert-card.navigable:hover,
.alert-card.navigable:focus-visible {
  background: rgba(200,155,240,0.08);
  border-color: rgba(200,155,240,0.4);
  transform: translateY(-1px);
  outline: none;
}
.alert-card .a-go {
  font-size: 11px;
  color: var(--lila);
  margin-top: 6px;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.2s;
}
.alert-card.navigable:hover .a-go {
  opacity: 1;
  transform: translateX(2px);
}

/* Módulo resaltado en modal de activaciones */
.module-row.highlighted {
  border-color: var(--rosa);
  background: rgba(255,158,199,0.08);
  box-shadow: 0 0 0 2px rgba(255,158,199,0.2);
  animation: highlightPulse 1.2s ease;
}
@keyframes highlightPulse {
  0% { box-shadow: 0 0 0 4px rgba(255,158,199,0.4); }
  100% { box-shadow: 0 0 0 2px rgba(255,158,199,0.2); }
}

/* Motivo / por-ejecutivo en modal de cancelaciones */
.motivo-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
  font-size: 13px;
}
.motivo-row:last-child { margin-bottom: 0; }
.motivo-name { color: var(--text); font-weight: 500; }
.motivo-count {
  background: rgba(255,122,138,0.18);
  color: var(--bad);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.motivo-row.clickable-exec {
  cursor: pointer;
  transition: all 0.15s;
}
.motivo-row.clickable-exec:hover {
  border-color: rgba(200,155,240,0.4);
  background: rgba(200,155,240,0.06);
}

/* ───── Auditoría operativa ───── */
.audit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.audit-tile {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.audit-tile.bad { border-color: rgba(255,122,138,0.4); }
.audit-tile.warn { border-color: rgba(255,208,102,0.4); }
.audit-tile.good { border-color: rgba(126,224,163,0.4); }
.audit-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 600;
}
.audit-value {
  font-size: 24px;
  font-weight: 800;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.audit-bar {
  height: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  margin: 6px 0 4px;
  overflow: hidden;
}
.audit-bar > div {
  height: 100%;
  border-radius: 3px;
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.audit-tile.good .audit-bar > div { background: var(--good); }
.audit-tile.warn .audit-bar > div { background: var(--warn); }
.audit-tile.bad .audit-bar > div { background: var(--bad); }
.audit-sub {
  font-size: 11px;
  color: var(--text-dim);
}
.audit-findings {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.audit-find {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--bg-2);
  border-left: 3px solid var(--text-dim);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
}
.audit-find.alta { border-left-color: var(--bad); }
.audit-find.media { border-left-color: var(--warn); }
.audit-find-icon { font-size: 14px; }

/* ───── Rachas del equipo ───── */
.streaks-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 100%;
  overflow-y: auto;
  min-height: 120px;
}
.streaks-list:empty::before {
  content: "Sin rachas marcadas — equipo estable.";
  display: block;
  text-align: center;
  font-size: 12px;
  opacity: 0.5;
  padding: 18px 12px;
}
.streak-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.streak-row:hover {
  border-color: rgba(200,155,240,0.4);
  background: rgba(200,155,240,0.06);
}
.streak-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.streak-meta {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}
.streak-badge {
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.streak-badge.up   { background: rgba(126,224,163,0.18); color: var(--good); }
.streak-badge.down { background: rgba(255,122,138,0.18); color: var(--bad); }
.streak-badge.flat { background: rgba(255,255,255,0.06); color: var(--text-dim); }

/* Tabla ejecutivos: badge mini de racha junto al nombre */
.exec-streak-mini {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.exec-streak-mini.up   { background: rgba(126,224,163,0.18); color: var(--good); }
.exec-streak-mini.down { background: rgba(255,122,138,0.18); color: var(--bad); }

/* ───── Delta vs ayer (KPI) ───── */
.kpi-delta {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kpi-delta.up   { background: rgba(126,224,163,0.22); color: var(--good); }
.kpi-delta.down { background: rgba(255,122,138,0.22); color: var(--bad); }
.kpi-delta.flat { background: rgba(255,255,255,0.06); color: var(--text-dim); }

/* ───── Coaching en modal de agente ───── */
.coaching-section {
  background: linear-gradient(135deg, rgba(255,158,199,0.12), rgba(200,155,240,0.08));
  border: 1px solid rgba(255,158,199,0.3);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.coaching-prio {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.coaching-prio.alta { background: var(--bad); color: white; }
.coaching-prio.media { background: var(--warn); color: #2a1a4a; }
.coaching-prio.baja { background: rgba(126,224,163,0.4); color: var(--good); }
.coaching-titulo {
  font-size: 14px;
  font-weight: 800;
  color: var(--lila);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.coaching-msg {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 10px;
}
.coaching-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.coaching-detalle {
  font-size: 12px;
  color: var(--text-dim);
}
.coaching-detalle summary {
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  color: var(--lila);
}
.coaching-detalle ul {
  margin: 8px 0 0 16px;
  padding: 0;
}
.coaching-detalle li {
  margin-bottom: 4px;
  line-height: 1.4;
}
.streak-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.streak-pill.up { background: rgba(126,224,163,0.18); color: var(--good); }
.streak-pill.down { background: rgba(255,122,138,0.18); color: var(--bad); }

/* Móvil: auditoría 1 columna */
@media (max-width: 640px) {
  .audit-grid { grid-template-columns: 1fr; }
}

/* ───── Insights proactivos ("Lo que Flyka notó") ───── */
.insights-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.insight-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--lila);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.insight-card:hover {
  border-color: var(--lila);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.insight-card.preocupacion { border-left-color: var(--bad); }
.insight-card.oportunidad { border-left-color: var(--good); }
.insight-card.observacion { border-left-color: var(--lila); }

.insight-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.insight-card.preocupacion .insight-tag { background: rgba(255,122,138,0.18); color: var(--bad); }
.insight-card.oportunidad .insight-tag { background: rgba(126,224,163,0.18); color: var(--good); }
.insight-card.observacion .insight-tag { background: rgba(200,155,240,0.18); color: var(--lila); }

.insight-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.3;
}
.insight-msg {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.insight-action {
  font-size: 11px;
  color: var(--lila);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.insight-action::before { content: "→"; opacity: 0.7; }

@media (max-width: 640px) {
  .insights-strip { grid-template-columns: 1fr; }
}

/* ───── Responsive ───── */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi-hero { grid-column: span 2; }
  .grid-2 { grid-template-columns: 1fr; }
  .focus-banner { flex-direction: column; align-items: flex-start; }
  .focus-meta { text-align: left; }
}

/* ───── Tablet (641px – 880px) ───── */
@media (min-width: 641px) and (max-width: 880px) {
  .topbar {
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .controls {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }
  .controls > label { flex: 1 1 160px; }
  .controls > label > span { font-size: 9px; }
  .controls select, .controls input[type="date"] {
    min-width: 0;
    width: 100%;
    font-size: 14px;
    padding: 10px;
  }
  .btn { padding: 11px 14px; font-size: 13px; }
  .report-group { gap: 6px; }
  main { padding: 16px 14px 80px; }
  .footer { padding: 8px 14px; font-size: 11px; }
}

/* ───── Móvil ───── */
@media (max-width: 640px) {
  body { font-size: 13px; }

  /* Aura del fondo: en móvil queda como bloque sólido por el viewport pequeño */
  .aura { display: none; }

  /* Topbar: brand arriba, controles en grid 2-col debajo */
  .topbar {
    padding: 10px 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .brand { align-self: flex-start; }
  .brand-logo { height: 32px; }
  .subtitle { display: none; }

  .controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .controls > * { min-width: 0; width: 100%; }
  /* Solo los <label> que envuelven inputs/selects: ocultar su <span> textual.
     NO el upload-btn (también es un <label> pero su <span> es el texto del botón). */
  .controls > label:not(.upload-btn) {
    display: flex; flex-direction: row; align-items: center;
  }
  .controls > label:not(.upload-btn) > span { display: none; }
  .controls > label:not(.upload-btn) > select,
  .controls > label:not(.upload-btn) > input {
    width: 100%; min-width: 0; flex: 1;
  }
  /* Upload se ve como botón completo */
  .controls > .upload-btn {
    display: flex; align-items: center; justify-content: center;
  }
  .controls .report-group { grid-column: 1 / -1; display: flex; gap: 8px; }
  .controls .report-group .btn { flex: 1; width: auto; }

  /* Bloques principales: mismo ancho y misma estética en móvil */
  main { padding: 12px 12px 100px; }
  .focus-banner,
  .kpis > .kpi,
  .grid-2 > .card {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .kpis, .grid-2 { gap: 10px; }

  .focus-banner { padding: 14px 16px; gap: 12px; border-radius: 14px; margin-bottom: 10px; }
  .focus-icon { font-size: 26px; }
  .focus-text { font-size: 15px; }

  .kpis { grid-template-columns: 1fr; }
  .kpi-hero { grid-column: span 1; }
  .kpi { padding: 16px; border-radius: 14px; }
  .kpi-hero .kpi-value { font-size: 44px; }
  .kpi-value { font-size: 26px; }

  /* Cards alineadas con KPIs */
  .card { padding: 16px; border-radius: 14px; }
  .chart-wrap { height: 200px; }

  /* Tablas: tabla normal con scroll horizontal cuando no quepa.
     Importante: NO mezclar 'display: block' con 'display: table' por dentro,
     eso es lo que hacía que el contenido empujara el card y lo desalineara. */
  .table-scroll, .card > .data-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .data-table { width: 100%; }
  .data-table th, .data-table td { padding: 8px 6px; font-size: 12px; }
  .data-table th:first-child, .data-table td:first-child { padding-left: 4px; }
  .data-table th:last-child, .data-table td:last-child { padding-right: 4px; }

  /* Canvas/Chart.js: nunca crecer más allá del padre */
  .chart-wrap { max-width: 100%; }
  .chart-wrap canvas { max-width: 100% !important; }

  /* Footer compacto */
  .footer {
    padding: 8px 12px;
    font-size: 11px;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
  }
  main { padding: 12px 10px 100px; }

  /* Chat más cómodo en móvil */
  .chat-form input { padding: 12px 14px; font-size: 16px; /* evita zoom en iOS */ }
  .chip { padding: 8px 14px; font-size: 13px; }

  /* ───── Modal: bottom sheet en móvil ───── */
  .modal-backdrop {
    align-items: flex-end;
    justify-content: stretch;
  }
  .modal-panel {
    width: 100%;
    height: 92vh;
    max-height: 92vh;
    border-left: none;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    box-shadow: 0 -20px 60px rgba(0,0,0,0.5);
    animation: sheetIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes sheetIn { from { transform: translateY(100%); } to { transform: none; } }

  /* Drag handle visual */
  .modal-drag {
    display: block;
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    margin: 10px auto 0;
  }

  .modal-topbar {
    padding: 8px 14px 14px;
  }
  .modal-content { padding: 14px 18px 60px; }

  .modal-close-label { display: none; }

  .agent-head { gap: 12px; padding-bottom: 14px; margin-bottom: 18px; }
  .agent-avatar { width: 48px; height: 48px; font-size: 18px; border-radius: 14px; }
  .agent-name { font-size: 17px; }
  .agent-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .agent-kpi { padding: 10px 12px; }
  .agent-kpi .val { font-size: 19px; }

  .activity-row {
    grid-template-columns: 60px 1fr;
    gap: 8px;
  }
  .activity-row .a-tags {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-top: 2px;
  }
}

/* ───── Modal compacto: elegir tipo de reporte ───── */
#reportModal { justify-content: center; align-items: center; }
.modal-centered { justify-content: center !important; align-items: center !important; }
.modal-centered .modal-panel { height: auto !important; max-height: 88vh; border-left: none; box-shadow: 0 24px 80px rgba(0,0,0,0.6); }

/* Flash del modal cuando llega mensaje nuevo del admin */
@keyframes fk-admin-flash {
  0%   { box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 0 rgba(126, 224, 163, 0.0); }
  30%  { box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 6px rgba(126, 224, 163, 0.55); }
  100% { box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 0 rgba(126, 224, 163, 0.0); }
}
.modal-panel.flash-admin-msg { animation: fk-admin-flash 1.4s ease-out; }

/* Badge rojo en el FAB cuando hay mensaje del admin sin leer */
.fab-chat.has-admin-msg::after {
  content: "";
  position: absolute;
  top: 4px; right: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bad, #ff7a8a);
  border: 2px solid #1a0d2e;
  box-shadow: 0 0 10px rgba(255, 122, 138, 0.8);
  animation: fk-glow-pulse 1.4s ease-in-out infinite;
}

/* ═══ Banner "pantalla completa" para tablets ═══ */
.fk-fs-banner {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 120%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 18px;
  background: linear-gradient(135deg, rgba(40, 20, 70, 0.96), rgba(60, 30, 100, 0.96));
  border: 1px solid rgba(200, 155, 240, 0.4);
  border-radius: 999px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(200, 155, 240, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9998;
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  max-width: calc(100vw - 32px);
}
.fk-fs-banner.show {
  transform: translate(-50%, 0);
  opacity: 1;
}
.fk-fs-emoji {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.fk-fs-text {
  font-size: 13px;
  color: #e9d4ff;
  white-space: nowrap;
}
.fk-fs-text strong { color: #fff; font-weight: 700; }
.fk-fs-btn {
  border: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.fk-fs-btn.primary {
  background: linear-gradient(135deg, #c89bf0, #ff9ec7);
  color: #1a0d2e;
  box-shadow: 0 4px 14px rgba(255, 158, 199, 0.4);
}
.fk-fs-btn.primary:hover { transform: translateY(-1px); filter: brightness(1.1); }
.fk-fs-btn.ghost {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(233, 212, 255, 0.7);
}
.fk-fs-btn.ghost:hover { background: rgba(255, 255, 255, 0.1); color: #e9d4ff; }
@media (max-width: 540px) {
  .fk-fs-text { display: none; }
}

/* ═══ Toast feliz con avatar de Flyka (upload exitoso) ═══ */
.flyka-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-30px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 14px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(40, 20, 70, 0.96), rgba(60, 30, 100, 0.96));
  border: 1px solid rgba(200, 155, 240, 0.45);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 32px rgba(200, 155, 240, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 9999;
  cursor: pointer;
  opacity: 0;
  animation: flyka-toast-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  max-width: min(440px, calc(100vw - 32px));
}
.flyka-toast.tone-bad {
  background: linear-gradient(135deg, rgba(70, 20, 30, 0.96), rgba(100, 30, 50, 0.96));
  border-color: rgba(255, 122, 138, 0.45);
}
.flyka-toast-avatar {
  width: 52px; height: 52px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(200, 155, 240, 0.45));
}
.flyka-toast-avatar svg { width: 100%; height: 100%; display: block; }
.flyka-toast-avatar .ft-ear-l { animation: ft-ear-wag-l 0.6s ease-in-out infinite; }
.flyka-toast-avatar .ft-ear-r { animation: ft-ear-wag-r 0.6s ease-in-out infinite; }
@keyframes ft-ear-wag-l {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-15deg); }
}
@keyframes ft-ear-wag-r {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(15deg); }
}
.flyka-toast-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.flyka-toast-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
.flyka-toast-sub {
  font-size: 12px;
  color: rgba(233, 212, 255, 0.75);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
@keyframes flyka-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.92); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.flyka-toast.flyka-toast-out {
  animation: flyka-toast-out 0.35s ease-in forwards;
}
@keyframes flyka-toast-out {
  from { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  to   { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.92); }
}

/* ═══ Hero del bono ganado en modal de agente ═══ */
.bono-hero {
  position: relative;
  margin: 14px 0 18px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 16px 50px -18px rgba(126, 224, 163, 0.45),
              0 4px 18px rgba(0, 0, 0, 0.3);
}
.bono-hero[hidden] { display: none; }
.bono-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 197, 122, 0.32), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(126, 224, 163, 0.30), transparent 55%),
    linear-gradient(135deg, #1f1736 0%, #2d1f4a 50%, #1a2e2a 100%);
  background-size: 220% 220%;
  animation: gradientShift 14s ease infinite;
  z-index: -1;
}
.bono-hero-bg::after {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(circle at 30% 50%, rgba(255, 200, 122, 0.12), transparent 40%),
    radial-gradient(circle at 70% 50%, rgba(126, 224, 163, 0.10), transparent 40%);
  filter: blur(18px);
  pointer-events: none;
}
.bono-hero-content {
  position: relative;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bono-hero-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffd07a;
  font-weight: 700;
  text-shadow: 0 0 16px rgba(255, 208, 122, 0.45);
}
.bono-hero-icon { font-size: 20px; line-height: 1; }
.bono-hero-amount {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #fff 10%, #ffd07a 60%, #7ee0a3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(255, 200, 122, 0.18);
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.bono-hero-currency {
  font-size: 28px;
  font-weight: 600;
  opacity: 0.85;
}
.bono-hero-sub {
  font-size: 13px;
  color: #d9c8f0;
  margin-top: 4px;
}
.bono-hero-pending { color: #ffd07a; }
.bono-hero-breakdown {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.bono-tag {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e9d4ff;
}
.bono-tag strong { color: #7ee0a3; font-weight: 700; }
.bono-tag .muted { font-size: 10px; color: #a89bb8; }

/* Brillo sutil que cruza el hero cada cierto tiempo */
.bono-hero::after {
  content: "";
  position: absolute;
  top: 0; left: -30%;
  width: 25%;
  height: 100%;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.08) 50%, transparent 70%);
  transform: skewX(-20deg);
  animation: bono-sweep 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bono-sweep {
  0%, 30% { left: -30%; opacity: 0; }
  50%     { opacity: 1; }
  100%    { left: 130%; opacity: 0; }
}

/* ═══ Modal de historial del chat con Flyka ═══ */
.chat-history-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 72vh;
}
.chat-history-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}
.chat-history-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
}
.chat-history-item:hover { border-color: rgba(200, 155, 240, 0.35); }
.chat-history-when {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.chat-history-q { color: var(--text); margin-bottom: 4px; }
.chat-history-q strong { color: var(--lila); font-weight: 600; }
.chat-history-a { color: var(--muted); }
.chat-history-a strong { color: #ffb3da; font-weight: 600; }
.chat-history-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.modal-panel-sm {
  width: min(520px, 92vw);
  height: auto;
  max-height: 92vh;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  animation: smPanelIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
@keyframes smPanelIn {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.modal-panel-sm .modal-topbar { border-radius: 16px 16px 0 0; }

.report-modal-hint {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
}

.report-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.report-mode-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 16px;
  background: var(--soft, rgba(255,255,255,0.03));
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  font: inherit;
}
.report-mode-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent, #b88dd8);
  background: rgba(184, 141, 216, 0.08);
}
.report-mode-card.active {
  border-color: var(--accent, #b88dd8);
  background: rgba(184, 141, 216, 0.14);
  box-shadow: 0 0 0 2px rgba(184, 141, 216, 0.25) inset;
}
.report-mode-icon { font-size: 26px; line-height: 1; }
.report-mode-title { font-size: 14px; font-weight: 600; }
.report-mode-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }

.report-agent-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.report-agent-picker[hidden] { display: none; }
.report-agent-picker label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.report-agent-picker select {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--soft, rgba(255,255,255,0.04));
  color: inherit;
  font-size: 14px;
}
.report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.modal-panel-sm { width: min(580px, 92vw); }

@media (max-width: 540px) {
  .report-mode-grid { grid-template-columns: 1fr; }
}

/* ───── Indicadores de meta editada ───── */
.meta-edit-tag {
  display: inline-block;
  margin-left: 4px;
  color: var(--lila);
  font-size: 11px;
  cursor: help;
  vertical-align: super;
}
.metas-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(184,141,216,0.16);
  color: var(--lila);
  border: 1px solid rgba(184,141,216,0.32);
  font-size: 11px;
  font-weight: 600;
  cursor: help;
}

/* ───── Alert bell (icono ⚠ topbar) ───── */
.alert-bell {
  position: relative;
  background: rgba(200,155,240,0.12);
  border: 1px solid rgba(200,155,240,0.3);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text);
  transition: transform 0.15s, border-color 0.15s, background 0.2s;
}
.alert-bell[hidden] { display: none; }
.alert-bell:hover { transform: translateY(-1px); }
.alert-bell-icon { font-size: 16px; line-height: 1; }
.alert-bell-count {
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,0.12);
  padding: 1px 7px;
  border-radius: 999px;
}
.alert-bell.alta {
  background: rgba(255,122,138,0.18);
  border-color: rgba(255,122,138,0.55);
  color: var(--bad);
  animation: pulseAlert 1.4s ease-in-out infinite;
}
.alert-bell.alta .alert-bell-count {
  background: var(--bad); color: white;
}
.alert-bell.media {
  background: rgba(255,208,102,0.16);
  border-color: rgba(255,208,102,0.5);
  color: var(--warn);
}
.alert-bell.media .alert-bell-count {
  background: var(--warn); color: #2a1a4a;
}
.alert-bell.baja {
  background: rgba(126,224,163,0.14);
  border-color: rgba(126,224,163,0.4);
  color: var(--good);
}
@keyframes pulseAlert {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,122,138,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(255,122,138,0); }
}

/* ───── Modal panel XL (Panel de control) ───── */
.modal-panel-xl {
  width: min(1300px, 96vw) !important;
  max-width: none !important;
  height: 92vh;
  display: flex;
  flex-direction: column;
  position: relative;
}
.modal-panel-xl .modal-content { padding: 0 !important; flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* En el panel grande no queremos la barra superior pesada: integramos
   las tabs como header y dejamos solo la X flotando en la esquina. */
.modal-panel-xl .modal-topbar {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border-bottom: none;
  padding: 0;
  z-index: 10;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.modal-panel-xl .modal-topbar-title { display: none; }
.modal-panel-xl .panel-tabs {
  padding-right: 56px; /* deja aire para el botón X flotante */
  background: transparent;
}

.panel-tabs {
  display: flex;
  gap: 4px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(34,26,54,0.55);
}
.panel-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 18px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}
.panel-tab:hover { color: var(--text); }
.panel-tab.active {
  color: var(--lila);
  border-bottom-color: var(--lila);
}

.panel-tab-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 22px;
}
.panel-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
  background: var(--bg);
}
.panel-tab-content[data-tab-panel="empleados"],
.panel-tab-content[data-tab-panel="bonos"] {
  padding: 0 !important;
}

/* ───── Tab Reportes (panel) ───── */
.panel-section-hint {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
}
.panel-report-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.2s;
  text-align: left;
  font-family: inherit;
  color: var(--text);
}
.panel-report-card:hover {
  transform: translateY(-2px);
  border-color: var(--lila);
  box-shadow: 0 8px 24px rgba(200,155,240,0.18);
}
.panel-report-period {
  display: flex;
  gap: 18px;
  margin: 18px 0;
  font-size: 13px;
}
.panel-report-period label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* ───── Tab Metas por tienda ───── */
.panel-metas-head { margin-bottom: 16px; }
.panel-metas-head h3 { margin: 0 0 4px; font-size: 14px; }
.panel-metas-head p { margin: 0; font-size: 12px; }

.metas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.meta-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
}
.meta-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.meta-card-head h4 { margin: 0; font-size: 14px; }
.meta-fuente {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 999px; font-weight: 700;
}
.meta-fuente-default { background: rgba(122,108,152,0.2); color: var(--muted); }
.meta-fuente-bd { background: rgba(126,224,163,0.18); color: var(--good); }

.meta-input-label {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); font-weight: 600;
}
.meta-input {
  padding: 10px 12px; border-radius: 8px; font-size: 18px; font-weight: 700;
  border: 1px solid rgba(200,155,240,0.25);
  background: rgba(255,255,255,0.04); color: var(--text);
  font-family: inherit; font-variant-numeric: tabular-nums;
  text-align: center;
}
.meta-input:focus {
  outline: none; border-color: rgba(200,155,240,0.6);
  background: rgba(255,255,255,0.06);
}

.meta-derived {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px;
}
.meta-derived > div {
  background: rgba(184,141,216,0.08);
  border: 1px solid rgba(200,155,240,0.18);
  border-radius: 8px; padding: 8px 10px; text-align: center;
}
.meta-derived .lbl {
  display: block;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 700;
}
.meta-derived .val {
  display: block; margin-top: 2px;
  font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
}

.meta-actions { display: flex; justify-content: flex-end; gap: 8px; }
.meta-actions .btn-sm { padding: 5px 12px; font-size: 12px; }
.meta-saved {
  margin-top: 6px; text-align: right;
  color: var(--good); font-size: 12px; font-weight: 600;
}

.metas-error {
  margin-top: 12px; padding: 10px 14px; border-radius: 8px;
  background: rgba(255,122,138,0.12); color: var(--bad);
  border: 1px solid rgba(255,122,138,0.3); font-size: 13px;
}
.metas-foot { margin-top: 14px; font-size: 11px; }

/* ───── Tab Días de descanso (grid tipo Excel) ───── */
.panel-descanso-head {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: 14px;
}
.panel-descanso-head h3 { margin: 0 0 4px; font-size: 14px; }
.panel-descanso-head p { margin: 0; font-size: 12px; }

.descanso-toolbar { display: flex; gap: 12px; align-items: end; }
.descanso-toolbar label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted); font-weight: 600;
}
.descanso-toolbar input,
.descanso-toolbar select {
  padding: 8px 12px; border-radius: 8px; font-size: 13px;
  border: 1px solid rgba(200,155,240,0.25);
  background: rgba(255,255,255,0.04); color: inherit; font-family: inherit;
}
.descanso-toolbar input:focus,
.descanso-toolbar select:focus {
  outline: none; border-color: rgba(200,155,240,0.6);
}

.descanso-grid-wrap {
  overflow: auto;
  max-height: 60vh;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}
.descanso-grid {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  width: max-content;
  min-width: 100%;
}
.descanso-grid th,
.descanso-grid td {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6px 4px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: var(--panel);
}
.descanso-grid thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--panel-2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 700;
  padding: 8px 4px;
}
.descanso-grid .day-dow { font-size: 9px; opacity: 0.7; }
.descanso-grid .day-num { font-size: 13px; color: var(--text); margin-top: 2px; font-weight: 700; }

.descanso-grid .emp-col {
  position: sticky;
  left: 0;
  z-index: 2;
  text-align: left;
  background: var(--panel);
  border-right: 2px solid var(--border);
  min-width: 220px;
  max-width: 240px;
  padding: 8px 12px;
}
.descanso-grid thead .emp-col { z-index: 4; }
.descanso-grid tbody tr:hover .emp-col,
.descanso-grid tbody tr:hover .day-cell { background: rgba(200,155,240,0.06); }

.descanso-grid .day-col { min-width: 38px; }

.descanso-grid tr.modulo-sep td {
  position: sticky;
  left: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(184,141,216,0.18), rgba(184,141,216,0.02));
  border-bottom: 1px solid var(--border);
  border-top: 1px solid rgba(200,155,240,0.25);
  padding: 7px 14px;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--lila);
}
.descanso-grid tr.modulo-sep .modulo-sep-count {
  margin-left: 10px;
  color: var(--muted);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
}
.descanso-grid .total-col {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--panel-2);
  font-weight: 700;
  color: var(--lila);
  border-left: 2px solid var(--border);
  min-width: 56px;
}
.descanso-grid thead .total-col { z-index: 4; }

.descanso-grid .day-cell {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s;
  color: var(--good);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.descanso-grid .day-cell:hover {
  background: rgba(200,155,240,0.18) !important;
}
.descanso-grid .day-cell.is-weekend,
.descanso-grid .day-col.is-weekend { background: rgba(255,255,255,0.025); }
.descanso-grid .day-cell.is-weekend { color: rgba(126,224,163,0.5); }

/* Motivos: colores distintos */
.descanso-grid .day-cell.motivo-descanso     { background: rgba(126,224,163,0.18); color: var(--good); }
.descanso-grid .day-cell.motivo-vacaciones   { background: rgba(184,141,216,0.22); color: var(--lila); }
.descanso-grid .day-cell.motivo-incapacidad  { background: rgba(255,122,138,0.18); color: var(--bad); }
.descanso-grid .day-cell.motivo-permiso      { background: rgba(255,208,102,0.20); color: var(--warn); }

.descanso-empty {
  text-align: center; padding: 28px; color: var(--muted);
  border: 1px dashed rgba(200,155,240,0.3); border-radius: 10px; margin-top: 14px;
}
.descanso-error {
  margin-top: 10px; padding: 10px 14px; border-radius: 8px;
  background: rgba(255,122,138,0.12); color: var(--bad);
  border: 1px solid rgba(255,122,138,0.3); font-size: 13px;
}
.descanso-legend {
  margin-top: 12px; font-size: 12px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.legend-pill {
  padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.legend-pill.descanso    { background: rgba(126,224,163,0.18); color: var(--good); }
.legend-pill.vacaciones  { background: rgba(184,141,216,0.22); color: var(--lila); }
.legend-pill.incapacidad { background: rgba(255,122,138,0.18); color: var(--bad); }
.legend-pill.permiso     { background: rgba(255,208,102,0.20); color: var(--warn); }

/* ───── Foco popup ───── */
.foco-popup-body { padding: 6px 0 18px; }
.foco-reco {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 10px;
  color: var(--text);
}
.foco-meta { font-size: 12px; margin: 0; }
.foco-popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

@media (max-width: 700px) {
  .descanso-form { grid-template-columns: 1fr; }
  .panel-tab { padding: 10px 12px; font-size: 12px; }
}

/* ───── Print (reporte semanal/mensual ya tiene su propio CSS) ───── */
@media print {
  .topbar, .footer, .focus-banner, .modal-backdrop { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Animaciones extra (vistosidad). Respeta prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

@keyframes fk-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fk-pop {
  0%   { transform: scale(0.94); opacity: 0; }
  60%  { transform: scale(1.02); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes fk-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,122,138,0.0); }
  50%      { box-shadow: 0 0 18px 2px rgba(255,122,138,0.45); }
}
@keyframes fk-shimmer {
  0%   { transform: translateX(-120%) skewX(-20deg); }
  100% { transform: translateX(220%) skewX(-20deg); }
}
@keyframes fk-thinking-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,155,240,0.0); }
  50%      { box-shadow: 0 0 22px 4px rgba(200,155,240,0.55); }
}
@keyframes fk-count-flash {
  0%   { color: var(--text); text-shadow: 0 0 0 transparent; }
  40%  { color: #fff; text-shadow: 0 0 12px rgba(255,158,199,0.65); }
  100% { color: var(--text); text-shadow: 0 0 0 transparent; }
}

/* ── KPIs entran escalonadas al cargar ── */
.kpis .kpi {
  opacity: 0;
  animation: fk-fade-up 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.kpis .kpi:nth-child(1) { animation-delay: 0.00s; }
.kpis .kpi:nth-child(2) { animation-delay: 0.06s; }
.kpis .kpi:nth-child(3) { animation-delay: 0.12s; }
.kpis .kpi:nth-child(4) { animation-delay: 0.18s; }
.kpis .kpi:nth-child(5) { animation-delay: 0.24s; }
.kpis .kpi:nth-child(6) { animation-delay: 0.30s; }

/* ── Cards entran con un fade-up suave ── */
.grid-2 > .card,
main > .card {
  opacity: 0;
  animation: fk-fade-up 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.18s forwards;
}

/* ── Hover lift más vivo en cards ── */
.card { transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s, box-shadow 0.25s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 50px -22px rgba(200,155,240,0.45); }

/* ── KPIs en rojo respiran (alerta visual sin gritar) ── */
.kpi[data-tone="bad"] {
  animation: fk-fade-up 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards,
             fk-glow-pulse 3.4s ease-in-out 1.2s infinite;
}

/* ── Filas de actividad: highlight lateral al pasar mouse ── */
.activity-row {
  position: relative;
  transition: background 0.18s ease, padding-left 0.18s ease;
}
.activity-row::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--lila), var(--rosa));
  opacity: 0;
  transform: scaleY(0.4);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.activity-row:hover {
  background: rgba(200, 155, 240, 0.05);
  padding-left: 10px;
}
.activity-row:hover::before { opacity: 1; transform: scaleY(1); }

/* ── Botón primario con shine sweep al hover ── */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
  transform: translateX(-120%) skewX(-20deg);
  pointer-events: none;
}
.btn-primary:hover::after { animation: fk-shimmer 0.85s ease-out; }

/* ── Avatar 🐶 brilla cuando Flyka está pensando ── */
.fab-chat.thinking {
  animation: fk-thinking-glow 1.6s ease-in-out infinite;
  border-radius: 50%;
}

/* ═══ Avatar SVG de Flyka — orejas, parpadeo, sonrisa ═══ */
.flyka-avatar {
  width: 44px;
  height: 44px;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
@keyframes fk-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 98%      { transform: scaleY(0.1); }
}
@keyframes fk-ear-wiggle-l {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-12deg); }
  75%      { transform: rotate(8deg); }
}
@keyframes fk-ear-wiggle-r {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(12deg); }
  75%      { transform: rotate(-8deg); }
}
@keyframes fk-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.flyka-avatar .fk-eye {
  transform-origin: center;
  transform-box: fill-box;
  animation: fk-blink 4.5s ease-in-out infinite;
}
.flyka-avatar .fk-eye-r { animation-delay: 0.05s; }
/* Cuando hover sobre el FAB, el avatar mueve la cabeza y agita orejas */
.fab-chat:hover .flyka-avatar { animation: fk-bounce 0.6s ease-in-out infinite; }
.fab-chat:hover .fk-ear-l { animation: fk-ear-wiggle-l 0.7s ease-in-out infinite; }
.fab-chat:hover .fk-ear-r { animation: fk-ear-wiggle-r 0.7s ease-in-out infinite; }
/* Cuando piensa, ojos en línea y boca pequeña */
.fab-chat.thinking .fk-eye { animation: none; transform: scaleY(0.3); }
.fab-chat.thinking .fk-mouth { d: path("M 30 43 Q 32 43 34 43"); }
/* Quitar el font-size heredado del emoji original */
.fab-chat { font-size: 0; padding: 0; }
.fab-chat:hover { transform: scale(1.08); }  /* sin rotación porque el SVG ya se mueve */

/* ═══ Tippy.js — tema custom púrpura ═══ */
.tippy-box[data-theme~="flyka"] {
  background: linear-gradient(135deg, #2a1840, #3d2160);
  color: #f5e3ff;
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid rgba(200, 155, 240, 0.3);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), 0 0 18px rgba(200, 155, 240, 0.2);
  border-radius: 10px;
  padding: 4px 6px;
}
.tippy-box[data-theme~="flyka"][data-placement^="top"] > .tippy-arrow::before { border-top-color: #2a1840; }
.tippy-box[data-theme~="flyka"][data-placement^="bottom"] > .tippy-arrow::before { border-bottom-color: #3d2160; }
.tippy-box[data-theme~="flyka"] .tippy-content strong { color: #ffb3da; }

/* ── Chips del chat: pop sutil al hover ── */
.chip {
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), border-color 0.2s, background 0.2s;
}
.chip:hover { transform: translateY(-2px) scale(1.03); }

/* ── Counter flash: cuando un .kpi-value cambia, se pinta brevemente ── */
.kpi-value.fk-flash {
  animation: fk-count-flash 0.9s ease;
}

/* ── Modales: pop más juguetón ── */
.modal { animation: fk-pop 0.32s cubic-bezier(0.16, 1, 0.3, 1); }

/* ── Respeta usuarios con motion reducido ── */
@media (prefers-reduced-motion: reduce) {
  .kpis .kpi,
  .grid-2 > .card,
  main > .card,
  .modal,
  .kpi[data-tone="bad"] { animation: none !important; opacity: 1 !important; transform: none !important; }
  .activity-row, .card, .chip, .btn-primary::after { transition: none !important; animation: none !important; }
}

/* Indicador de estado de WhatsApp en el botón del topbar */
.wa-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-left:4px; vertical-align:middle; }
.wa-dot-on { background:#22c55e; box-shadow:0 0 6px #22c55e; }
.wa-dot-off { background:#9ca3af; }

/* ── Cards por tienda (resumen de avance por módulo) ── */
.tiendas-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 4px 0 18px;
}
.tienda-card {
  background: var(--card, #1e1630);
  border: 1px solid rgba(167,139,250,.18);
  border-radius: 16px;
  padding: 16px 18px;
  border-left: 4px solid #a78bfa;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.tienda-card::after {
  content: '';
  position: absolute;
  bottom: -45%;
  right: -12%;
  width: 60%;
  height: 110%;
  pointer-events: none;
  filter: blur(22px);
  z-index: -1;
  background: radial-gradient(circle, rgba(167,139,250,.22), transparent 60%);
}
.tienda-good::after { background: radial-gradient(circle, rgba(52,211,153,.28), transparent 62%); }
.tienda-warn::after { background: radial-gradient(circle, rgba(251,191,36,.26), transparent 62%); }
.tienda-bad::after  { background: radial-gradient(circle, rgba(248,113,113,.26), transparent 62%); }
.tienda-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 34px rgba(140,80,220,.4);
  border-color: rgba(200,155,240,.5);
}
.tienda-good { border-left-color: #34d399; }
.tienda-warn { border-left-color: #fbbf24; }
.tienda-bad  { border-left-color: #f87171; }
.tienda-nombre { font-size: 14px; color: #c9bfe0; font-weight: 600; }
.tienda-avance { font-size: 38px; font-weight: 800; color: #f4f4fa; line-height: 1.1; margin-top: 4px; }
.tienda-pct { font-size: 18px; color: #9d92b5; margin-left: 2px; }
.tienda-barra { height: 6px; background: rgba(255,255,255,.08); border-radius: 4px; margin: 10px 0 8px; overflow: hidden; }
.tienda-barra > div { height: 100%; border-radius: 4px; background: #a78bfa; }
.tienda-good .tienda-barra > div { background: #34d399; }
.tienda-warn .tienda-barra > div { background: #fbbf24; }
.tienda-bad  .tienda-barra > div { background: #f87171; }
.tienda-sub { font-size: 12px; color: #9d92b5; }