:root {
  /* Safe areas para PWA/WebView - env() funciona con viewport-fit=cover */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --primary-hsl: 239, 84%, 67%;
  --primary: hsl(var(--primary-hsl));
  --primary-glow: hsla(var(--primary-hsl), 0.5);

  --bg-dark: #020617;
  --bg-dark-card: rgba(15, 23, 42, 0.6);
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);

  /* Theme tokens — dark by default */
  --bg: #0f1117;
  --card: #1a1d27;
  --text: #e2e8f0;
  --border: rgba(255,255,255,0.08);
  --accent: #6366f1;

  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #3b82f6;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-neon: 0 0 20px var(--primary-glow);

  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}

html, body {
  min-height: 100vh;
  background: #f5f5f4;
}

html.dark,
body.dark {
  background: #020617;
}

body[data-uplink-role="admin"] #btn-mi-ficha {
  display: none !important;
}


/* ─── PANTALLA DE LOGIN PREMIUM ─── */
#login-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #09090b, #17172b, #4f46e5, #09090b);
  background-size: 300% 300%;
  animation: loginGradient 12s ease infinite;
  overflow: hidden;
  z-index: 9999;
}

.login-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  /* Más desenfoque para suavizar */
  z-index: 0;
  opacity: 0.35;
  animation: blobFloat 25s infinite alternate ease-in-out;
}

.blob-1 {
  width: 600px;
  height: 600px;
  background: rgba(99, 102, 241, 0.2);
  top: -150px;
  left: -150px;
}

.blob-2 {
  width: 500px;
  height: 500px;
  background: rgba(245, 158, 11, 0.15);
  /* Color cálido diferencial */
  bottom: -100px;
  right: -100px;
  animation-delay: -7s;
}

.blob-3 {
  width: 400px;
  height: 400px;
  background: rgba(34, 197, 94, 0.15);
  top: 40%;
  left: 55%;
  animation-delay: -12s;
}

@keyframes blobFloat {
  0% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(30px, -50px) scale(1.1);
  }

  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

.sidebar {
  width: 285px !important;
  background: #ffffff;
  border-right: 1px solid rgba(229, 231, 235, 0.4);
  padding: 24px 16px !important;
  padding-bottom: calc(16px + var(--safe-bottom)) !important;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: var(--app-height, 100vh);
  flex-shrink: 0;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  z-index: 1000;
}

body.dark .sidebar {
  background: rgba(1, 4, 19, 0.85);
  border-right-color: var(--glass-border);
}

/* ── Sidebar mini (icon-only) mode ───────────────── */
.sidebar.mini {
  width: 72px !important;
  padding: 24px 10px !important;
}
.sidebar.mini .logo span,
.sidebar.mini .nav-group-label,
.sidebar.mini .tb span,
.sidebar.mini .sidebar-footer .version-tag,
.sidebar.mini .sidebar-footer .user-badge,
.sidebar.mini .sidebar-footer .conn-pill-base,
.sidebar.mini .nav-group-chevron {
  display: none !important;
}
.sidebar.mini .logo {
  justify-content: center;
  padding: 0 0 8px;
}
.sidebar.mini .logo-glow { display: none; }
.sidebar.mini .nav-group-items {
  padding-left: 0 !important;
  margin-left: 0 !important;
  border-left: none !important;
}
.sidebar.mini .nav-group-items.collapsed {
  max-height: 500px !important;
  opacity: 1 !important;
}
.sidebar.mini .tb {
  justify-content: center !important;
  padding: 12px 8px !important;
  gap: 0 !important;
  font-size: 20px !important;
  position: relative;
}

.sidebar.mini .tb-assistant-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin: 0 auto;
  transform: none;
}
.sidebar.mini .tb:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: #0f1e3d;
  color: #f8fafc;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.sidebar.mini .nav-group-label {
  justify-content: center;
  padding: 4px 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 18px;
  min-height: 32px;
}
.sidebar.mini .footer-actions {
  flex-direction: column;
  gap: 6px;
}
.sidebar.mini .footer-actions button {
  width: 100%;
}

/* Botón toggle mini */
.btn-sidebar-toggle {
  position: absolute;
  right: -14px;
  top: 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(99,102,241,0.3);
  background: #fff;
  color: #6366f1;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: all 0.2s;
  z-index: 10;
}
.btn-sidebar-toggle:hover {
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
  transform: scale(1.1);
}
body.dark .btn-sidebar-toggle {
  background: #0f1e3d;
  border-color: rgba(99,102,241,0.5);
}
body.dark .btn-sidebar-toggle:hover {
  background: #6366f1;
}
.sidebar.mini .btn-sidebar-toggle {
  right: -14px;
}

/* Kanban empty state */
.k-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  gap: 10px;
  opacity: 0.6;
}
.k-empty-state .k-empty-icon {
  font-size: 36px;
  line-height: 1;
}
.k-empty-state .k-empty-txt {
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
  font-weight: 500;
}
body.dark .k-empty-state .k-empty-txt { color: #475569; }

.assistant-shell {
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 20px 22px;
  min-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
}

.assistant-hero {
  margin-bottom: 12px;
}

.assistant-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.22);
  color: #818cf8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.assistant-hero h2 {
  margin: 10px 0 4px;
  color: var(--text);
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.1;
}

.assistant-hero p {
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.45;
}

.assistant-card {
  background: linear-gradient(180deg, rgba(15,23,42,0.86), rgba(15,23,42,0.72));
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(2,6,23,0.22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.assistant-quick {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 18px 0;
}

.assistant-quick-btn {
  border: 1px solid rgba(99,102,241,0.22);
  background: rgba(99,102,241,0.1);
  color: #c4b5fd;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.assistant-quick-btn:hover {
  transform: translateY(-1px);
  background: rgba(99,102,241,0.16);
  border-color: rgba(99,102,241,0.34);
}

.assistant-quick-btn:active {
  transform: translateY(0);
}

.assistant-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 18px 0;
}

.assistant-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(99,102,241,0.18);
  background: rgba(15,23,42,0.85);
  color: #dbeafe;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assistant-status-chip-muted {
  color: #94a3b8;
  border-color: rgba(148,163,184,0.16);
  background: rgba(2,6,23,0.2);
}

.assistant-messages {
  min-height: 0;
  flex: 1 1 auto;
  max-height: none;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.assistant-row {
  display: flex;
}

.assistant-row-user {
  justify-content: flex-end;
}

.assistant-row-assistant {
  justify-content: flex-start;
}

.assistant-bubble {
  max-width: min(100%, 720px);
  padding: 14px 16px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.assistant-bubble-assistant {
  background: rgba(15,23,42,0.9);
  border: 1px solid rgba(148,163,184,0.18);
  color: #e2e8f0;
}

.assistant-bubble-pending {
  opacity: 0.82;
  border-style: dashed;
}

.assistant-bubble-user {
  background: linear-gradient(135deg, rgba(99,102,241,0.95), rgba(79,70,229,0.92));
  color: #eff6ff;
  box-shadow: 0 12px 28px rgba(79,70,229,0.26);
}

.assistant-form {
  display: flex;
  gap: 12px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(148,163,184,0.12);
  background: rgba(2,6,23,0.3);
}

.assistant-input {
  flex: 1;
  min-width: 0;
}

.assistant-send {
  width: auto;
  min-width: 110px;
}

.assistant-send:disabled,
.assistant-input:disabled {
  opacity: 0.7;
  cursor: wait;
}

@media (max-width: 768px) {
  .assistant-shell {
    padding: 14px 12px 18px;
    min-height: calc(100vh - 120px);
  }

  .assistant-quick {
    padding: 12px 14px 0;
  }

  .assistant-status {
    padding: 10px 14px 0;
  }

  .assistant-card {
    border-radius: 18px;
  }

  .assistant-messages {
    padding: 14px;
  }

  .assistant-form {
    flex-direction: column;
    padding: 14px;
  }

  .assistant-send {
    width: 100%;
  }
}

/* Filtros rápidos kanban */
.crm-quick-filters {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.crm-qf-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,0.2);
  background: rgba(148,163,184,0.08);
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.crm-qf-chip:hover {
  border-color: rgba(99,102,241,0.3);
  color: #6366f1;
  background: rgba(99,102,241,0.08);
}
.crm-qf-chip.active {
  background: rgba(99,102,241,0.15);
  border-color: rgba(99,102,241,0.4);
  color: #6366f1;
  font-weight: 600;
}
body.dark .crm-qf-chip {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: #94a3b8;
}
body.dark .crm-qf-chip:hover,
body.dark .crm-qf-chip.active {
  border-color: rgba(99,102,241,0.4);
  color: #a5b4fc;
  background: rgba(99,102,241,0.15);
}

/* Mobile sidebar slide mejorado */
@media (max-width: 490px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(0.4,0,0.2,1),
                box-shadow 0.32s ease !important;
    box-shadow: none;
  }
  .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 8px 0 32px rgba(0,0,0,0.25) !important;
  }
  .btn-sidebar-toggle { display: none !important; }
}






.app-layout {
  display: flex;
  height: var(--app-height, 100vh);
  overflow: hidden;
  background: #f5f5f4;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
  padding-bottom: calc(24px + var(--safe-bottom));
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
}

.riel-app-assistant {
  position: fixed;
  right: 32px;
  bottom: 28px;
  z-index: 140;
  width: min(520px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: 12px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: isolate;
}

.riel-app-stage {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-top: 92px;
  grid-column: 2;
}

.riel-app-bubble {
  position: absolute;
  top: 0;
  right: 12px;
  transform: translateY(0);
  width: min(360px, calc(100vw - 126px));
  min-height: 58px;
  padding: 14px 16px 12px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(15,23,42,0.96), rgba(10,22,40,0.96));
  color: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(129,140,248,0.14), 0 14px 36px rgba(15,23,42,0.28);
  border: 1px solid rgba(99,102,241,0.22);
  transition: opacity 180ms ease, border-radius 180ms ease, width 180ms ease, min-height 180ms ease, padding 180ms ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.riel-app-assistant.chat-open .riel-app-bubble {
  width: min(370px, calc(100vw - 104px));
  min-height: 196px;
  max-height: 238px;
  border-radius: 20px;
  padding: 10px;
  transform: translateY(96px) scale(1);
  box-shadow: inset 0 1px 0 rgba(129,140,248,0.12), 0 18px 42px rgba(15,23,42,0.32);
  overflow: hidden;
  transition: none;
}

.riel-app-assistant.chat-open .riel-app-close,
.riel-app-assistant.bubble-muted .riel-app-close,
.riel-app-assistant.auto-collapsed .riel-app-close {
  opacity: 0;
  pointer-events: none;
}

.riel-app-assistant.chat-open .riel-app-bubble-toggle {
  opacity: 0;
  pointer-events: none;
}

.riel-app-assistant.is-help .riel-app-bubble {
  background: linear-gradient(180deg, rgba(15,23,42,0.96), rgba(10,22,40,0.96));
  color: #f8fafc;
}

.riel-app-assistant.is-success .riel-app-bubble {
  background: linear-gradient(180deg, rgba(15,23,42,0.98), rgba(16,40,64,0.96));
  color: #f8fafc;
  border-color: rgba(99,102,241,0.28);
}

.riel-app-assistant.is-alert .riel-app-bubble {
  background: linear-gradient(180deg, rgba(22,27,48,0.98), rgba(12,20,38,0.96));
  color: #e0e7ff;
  border-color: rgba(99,102,241,0.24);
}

.riel-app-bubble::after {
  content: "";
  position: absolute;
  right: 58px;
  bottom: -7px;
  width: 16px;
  height: 16px;
  background: inherit;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  opacity: 0.12;
  transform: rotate(45deg);
}

.riel-app-bubble-text {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em;
}

.riel-app-bubble-collapsed {
  display: block;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease;
}

.riel-app-assistant.in-assistant-view .riel-app-bubble-collapsed {
  display: none;
}

/* Sin :not(.chat-open): en la vista completa del asistente el globo
   flotante (con o sin el mini chat abierto) nunca debe mostrarse — si el
   estado chat-open quedara pegado por algún otro camino, esto lo tapa
   igual como respaldo (el fix real está en assistantUpdateMascotContext). */
.riel-app-assistant.in-assistant-view .riel-app-bubble {
  display: none;
}

/* Mensaje flotante colapsado: se oculta el globo completo (incluida su
   colita ::after) para no dejar restos flotando — la flecha vive fuera
   de la burbuja, pegada a la mascota, y queda siempre visible como
   manija para volver a mostrarlo. Respeta el chat cuando el usuario lo
   abre a propósito (:not(.chat-open)).
   - bubble-muted: el usuario lo colapsó a mano (persiste).
   - auto-collapsed: se colapsó solo tras mostrarse unos segundos, para
     no quedar tapando contenido en el celular (no persiste). */
.riel-app-assistant.bubble-muted:not(.chat-open) .riel-app-bubble,
.riel-app-assistant.auto-collapsed:not(.chat-open) .riel-app-bubble {
  display: none;
}

.riel-app-bubble-toggle {
  position: absolute;
  right: 112px;
  bottom: 112px;
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(15,23,42,0.85);
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(15,23,42,0.28);
  transition: background 150ms ease, color 150ms ease;
}

.riel-app-bubble-toggle:hover {
  background: rgba(30,41,59,0.9);
  color: #fff;
}

.riel-app-bubble-toggle-arrow {
  display: inline-block;
  transition: transform 180ms ease;
}

.riel-app-assistant.bubble-muted .riel-app-bubble-toggle-arrow,
.riel-app-assistant.auto-collapsed .riel-app-bubble-toggle-arrow {
  transform: rotate(180deg);
}

.riel-app-assistant.in-assistant-view {
  right: 14px;
  bottom: 16px;
  width: 132px;
  grid-template-columns: 132px;
  gap: 0;
}

.riel-app-assistant.in-assistant-view .riel-app-stage {
  grid-column: 1;
  align-items: flex-end;
  padding-top: 0;
}

.riel-app-assistant.in-assistant-view .riel-app-avatar {
  animation: rielAssistantFloat 7.8s ease-in-out infinite;
  transform: translate3d(calc(var(--riel-look-x) * 2px), calc(var(--riel-look-y) * 1.5px), 0) rotate(calc(var(--riel-look-x) * 0.8deg));
  cursor: default;
}

.riel-app-assistant.in-assistant-view .riel-app-shadow {
  width: 68px;
  margin-top: 4px;
  animation: rielAssistantShadow 7.8s ease-in-out infinite;
}

.riel-app-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 6px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.riel-app-assistant.chat-open .riel-app-chat {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.riel-app-assistant.chat-open .riel-app-bubble-collapsed {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

.riel-app-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: #f8fafc;
  padding-bottom: 2px;
}

.riel-app-chat-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.riel-app-chat-link {
  appearance: none;
  border: 1px solid rgba(99,102,241,0.18);
  background: linear-gradient(180deg, rgba(35,49,84,0.88), rgba(26,38,67,0.88));
  color: #e0e7ff;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.riel-app-chat-close {
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(99,102,241,0.18);
  background: linear-gradient(180deg, rgba(35,49,84,0.84), rgba(26,38,67,0.84));
  color: #f8fafc;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.riel-app-chat-feed {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 118px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 3px 2px 0;
}

.riel-mini-row {
  display: flex;
}

.riel-mini-row-user {
  justify-content: flex-end;
}

.riel-mini-row-assistant {
  justify-content: flex-start;
}

.riel-mini-bubble {
  max-width: 88%;
  padding: 9px 11px;
  border-radius: 14px;
  font-size: 11px;
  line-height: 1.4;
  white-space: pre-wrap;
  box-shadow: 0 8px 24px rgba(2,6,23,0.18);
}

.riel-mini-bubble-user {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #fff;
  border-bottom-right-radius: 7px;
}

.riel-mini-bubble-assistant {
  background: linear-gradient(180deg, rgba(31,44,74,0.94), rgba(19,28,48,0.94));
  color: #eef2ff;
  border: 1px solid rgba(99,102,241,0.18);
  border-bottom-left-radius: 7px;
}

.riel-mini-bubble-tag {
  display: inline-flex;
  margin-bottom: 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a5b4fc;
}

.riel-mini-bubble-text {
  display: block;
}

.riel-mini-bubble-pending {
  opacity: 0.8;
}

.riel-app-chat-form {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(19,30,53,0.96), rgba(15,23,42,0.96));
  border: 1px solid rgba(99,102,241,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.riel-app-chat-input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(99,102,241,0.22);
  border-radius: 14px;
  background: rgba(37,51,85,0.82);
  color: #f8fafc;
  padding: 11px 13px;
  font-size: 11px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.riel-app-chat-input::placeholder {
  color: rgba(191,219,254,0.32);
}

.riel-app-chat-input:focus {
  border-color: rgba(96,165,250,0.72);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.14);
}

.riel-app-chat-send {
  appearance: none;
  border: 1px solid rgba(147,197,253,0.14);
  border-radius: 14px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff;
  padding: 11px 14px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 10px 24px rgba(37,99,235,0.22), inset 0 1px 0 rgba(255,255,255,0.14);
}

.riel-app-chat-send:hover {
  filter: brightness(1.05);
}

.riel-app-link {
  appearance: none;
  margin-top: 8px;
  padding: 0;
  border: none;
  background: transparent;
  color: #c4b5fd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-align: left;
}

.riel-app-link:hover {
  color: #ddd6fe;
  text-decoration: underline;
}

.riel-app-bubble-dots {
  display: none;
  align-items: center;
  gap: 6px;
  height: 18px;
}

.riel-app-bubble-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #6366f1;
  animation: rielBubbleDot 1s infinite ease-in-out;
}

.riel-app-bubble-dots span:nth-child(2) { animation-delay: 0.16s; }
.riel-app-bubble-dots span:nth-child(3) { animation-delay: 0.32s; }

.riel-app-avatar {
  all: unset;
  position: relative;
  z-index: 1;
  display: block;
  cursor: pointer;
  --riel-look-x: 0;
  --riel-look-y: 0;
  width: 114px;
  height: 129px;
  animation: rielFloat 6.2s ease-in-out infinite;
  transform: translate3d(calc(var(--riel-look-x) * 4px), calc(var(--riel-look-y) * 3px), 0) rotate(calc(var(--riel-look-x) * 2deg));
  transition: transform 220ms ease-out;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

.riel-app-avatar::before,
.riel-app-avatar::after {
  content: none !important;
}

.riel-app-assistant.chat-open .riel-app-avatar,
.riel-app-assistant.chat-open .riel-app-shadow {
  opacity: 0.92;
  pointer-events: none;
  z-index: 0;
}

.riel-app-assistant.chat-open .riel-app-avatar {
  left: -352px;
  top: 64px;
}

.riel-app-assistant.chat-open .riel-app-shadow {
  margin-left: -352px;
  margin-top: 70px;
}

.riel-sprite {
  --sprite-w: 114px;
  --sprite-h: 129px;
  --sprite-cols: 8;
  position: absolute;
  inset: 0;
  display: block;
  width: var(--sprite-w);
  height: var(--sprite-h);
  background-image: url('assets/riel/spritesheet.webp');
  background-repeat: no-repeat;
  background-size: calc(var(--sprite-w) * 8) calc(var(--sprite-h) * 11);
  background-position:
    calc(var(--sprite-frame, 0) * var(--sprite-w) * -1)
    calc(var(--sprite-row, 0) * var(--sprite-h) * -1);
  image-rendering: auto;
  filter: drop-shadow(0 12px 16px rgba(15,23,42,0.26));
}

.riel-app-shadow {
  width: 76px;
  height: 12px;
  margin-top: 6px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(15,23,42,0.3), rgba(15,23,42,0.02) 72%);
  animation: rielShadow 6.2s ease-in-out infinite;
}

.riel-app-copy {
  display: none;
}

.riel-app-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c7d2fe;
  background: rgba(99,102,241,0.14);
  border: 1px solid rgba(129,140,248,0.24);
}

.riel-app-assistant.is-success .riel-app-eyebrow {
  color: #bbf7d0;
  background: rgba(34,197,94,0.14);
  border-color: rgba(34,197,94,0.24);
}

.riel-app-assistant.is-alert .riel-app-eyebrow {
  color: #fde68a;
  background: rgba(245,158,11,0.14);
  border-color: rgba(245,158,11,0.24);
}

.riel-app-assistant.pose-dash .riel-app-avatar {
  filter: saturate(1.02);
}

.riel-app-assistant.pose-assistant .riel-app-avatar {
  transform: translate3d(calc(var(--riel-look-x) * 4px), calc(var(--riel-look-y) * 2px), 0) rotate(calc(var(--riel-look-x) * 1.4deg));
}

.riel-app-assistant.in-assistant-view.pose-assistant .riel-app-avatar {
  transform: translate3d(calc(var(--riel-look-x) * 1.5px), calc(var(--riel-look-y) * 1px), 0) rotate(calc(var(--riel-look-x) * 0.6deg));
}

.riel-app-assistant.in-assistant-view.gesture-idle-a .riel-app-avatar,
.riel-app-assistant.in-assistant-view.gesture-idle-b .riel-app-avatar,
.riel-app-assistant.in-assistant-view.gesture-idle-c .riel-app-avatar {
  animation: rielAssistantFloat 8.2s ease-in-out infinite;
}

.riel-app-assistant.pose-crm .riel-app-avatar,
.riel-app-assistant.pose-msg .riel-app-avatar {
  transform: translate3d(calc(var(--riel-look-x) * 7px), calc(var(--riel-look-y) * 4px), 0) rotate(-3deg);
}

.riel-app-assistant.pose-cot .riel-app-avatar {
  transform: translate3d(calc(var(--riel-look-x) * 5px), calc(var(--riel-look-y) * 3px), 0) rotate(3deg);
}

.riel-app-assistant.pose-inv .riel-app-avatar {
  transform: translate3d(calc(var(--riel-look-x) * 5px), calc(var(--riel-look-y) * 3px), 0) rotate(-1deg) scale(1.02);
}

.riel-app-assistant.gesture-idle-a .riel-app-avatar {
  animation: rielFloat 6.2s ease-in-out infinite, rielSwayA 5.8s ease-in-out infinite;
}

.riel-app-assistant.gesture-idle-b .riel-app-avatar {
  animation: rielFloat 6.4s ease-in-out infinite, rielSwayB 6s ease-in-out infinite;
}

.riel-app-assistant.gesture-idle-c .riel-app-avatar {
  animation: rielFloat 6s ease-in-out infinite, rielSwayC 5.6s ease-in-out infinite;
}

.riel-app-assistant.gesture-hop .riel-app-avatar {
  animation: rielHop 0.82s ease-out;
}

.riel-app-assistant.gesture-wave .riel-app-avatar {
  animation: rielWave 1s ease-in-out;
}

.riel-app-assistant.gesture-alert .riel-app-avatar {
  animation: rielAlert 1.2s ease-in-out;
}

.riel-app-assistant.gesture-celebrate .riel-app-avatar {
  animation: rielCelebrate 1.2s ease-in-out;
}

.riel-app-assistant.gesture-hop .riel-app-shadow,
.riel-app-assistant.gesture-wave .riel-app-shadow,
.riel-app-assistant.gesture-alert .riel-app-shadow,
.riel-app-assistant.gesture-celebrate .riel-app-shadow {
  animation: rielShadowFast 1s ease-in-out;
}

.riel-app-copy h3 {
  margin: 10px 0 8px;
  font-size: 26px;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: #f8fafc;
}

.riel-app-copy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(226,232,240,0.78);
}

.riel-app-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.riel-app-btn {
  appearance: none;
  border: 1px solid rgba(148,163,184,0.2);
  background: rgba(15,23,42,0.52);
  color: #e2e8f0;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.riel-app-btn:hover {
  transform: translateY(-1px);
  background: rgba(30,41,59,0.88);
  border-color: rgba(129,140,248,0.3);
}

.riel-app-btn.primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-color: transparent;
  color: #fff;
}

.riel-app-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(33,33,36,0.92);
  color: #f8fafc;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  z-index: 4;
  pointer-events: auto;
  transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
}

.riel-app-close:hover {
  background: rgba(30,41,59,0.92);
  color: #fff;
}

.riel-app-toggle {
  position: fixed;
  right: 32px;
  bottom: 28px;
  z-index: 139;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  appearance: none;
  border: 1px solid rgba(99,102,241,0.28);
  border-radius: 999px;
  padding: 10px 14px 10px 10px;
  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(30,41,59,0.94));
  color: #eef2ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 18px 40px rgba(2,6,23,0.26), inset 0 1px 0 rgba(255,255,255,0.08);
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.riel-app-toggle:hover {
  transform: translateY(-1px) scale(1.02);
}

.riel-app-toggle-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(99,102,241,0.9), rgba(79,70,229,0.92));
  box-shadow: 0 8px 18px rgba(99,102,241,0.3);
  overflow: hidden;
}

.riel-app-toggle-sprite {
  --mini-w: 24px;
  --mini-h: 28px;
  width: var(--mini-w);
  height: var(--mini-h);
  display: block;
  background-image: url('assets/riel/spritesheet.webp');
  background-repeat: no-repeat;
  background-size: calc(var(--mini-w) * 8) calc(var(--mini-h) * 11);
  background-position: 0 0;
  filter: drop-shadow(0 2px 4px rgba(15,23,42,0.25));
  animation: rielToggleIdle 2.4s steps(1) infinite;
}

.riel-app-toggle-text {
  line-height: 1;
}

.riel-app-assistant.is-thinking .riel-app-avatar {
  animation: rielThinking 1.45s ease-in-out infinite;
  transform: translate3d(calc(var(--riel-look-x) * 3px), calc(var(--riel-look-y) * 2px), 0) rotate(calc(var(--riel-look-x) * 1.5deg));
}

.riel-app-assistant.is-thinking .riel-app-shadow {
  animation: rielShadowFast 1.1s ease-in-out infinite;
}

.riel-app-assistant.is-thinking .riel-app-bubble-text {
  display: none;
}

.riel-app-assistant.is-thinking .riel-app-bubble-dots {
  display: inline-flex;
}

.riel-app-assistant.chat-open.is-thinking .riel-app-bubble-dots {
  display: none;
}

.riel-app-assistant.is-speaking .riel-app-bubble {
  transform: translateY(-4px);
}

.riel-app-assistant.chat-open.is-speaking .riel-app-bubble {
  transform: translateY(-34px) scale(1);
}

.riel-app-assistant.is-speaking .riel-app-avatar {
  animation: rielTalk 0.85s ease-in-out 1;
}

.riel-app-assistant.is-speaking .riel-app-shadow {
  animation: rielShadowFast 1.1s ease-in-out infinite;
}

body.dark .app-layout {
  background: var(--bg-dark);
}

body.dark .main-content {
  background: var(--bg-dark);
}

body:not(.dark) .riel-app-assistant {
  background: transparent;
}

body:not(.dark) .riel-app-close {
  background: rgba(33,33,36,0.92);
  color: #f8fafc;
}

body:not(.dark) .riel-app-toggle {
  background: rgba(255,255,255,0.96);
  color: #312e81;
  border-color: rgba(99,102,241,0.16);
}

@media (max-width: 720px) {
  .riel-app-assistant {
    left: 16px;
    right: 16px;
    bottom: calc(16px + var(--safe-bottom));
    width: auto;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 14px;
    padding: 0;
  }

  .riel-app-stage {
    padding-top: 84px;
  }

  .riel-app-avatar img {
    width: 104px;
  }

  .riel-app-toggle {
    right: 16px;
    bottom: calc(16px + var(--safe-bottom));
  }
}

@media (max-width: 520px) {
  .riel-app-assistant {
    grid-template-columns: minmax(0, 1fr) 104px;
  }

  .riel-app-stage {
    padding-top: 78px;
  }

  .riel-app-bubble {
    width: min(280px, calc(100vw - 114px));
    padding: 12px 14px 10px;
  }

  .riel-app-assistant.chat-open .riel-app-bubble {
    width: min(258px, calc(100vw - 110px));
    min-height: 214px;
    max-height: 250px;
  }

  .riel-app-close {
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
  }
}

@keyframes rielFloat {
  0%, 100% { transform: translateY(0) rotate(-0.35deg); }
  50% { transform: translateY(-1px) rotate(0.3deg); }
}

@keyframes rielAssistantFloat {
  0%, 100% { transform: translateY(0) rotate(-0.15deg); }
  50% { transform: translateY(-0.5px) rotate(0.15deg); }
}

@keyframes rielToggleIdle {
  0%, 18% { background-position: calc(0 * var(--mini-w) * -1) calc(0 * var(--mini-h) * -1); }
  19%, 36% { background-position: calc(1 * var(--mini-w) * -1) calc(0 * var(--mini-h) * -1); }
  37%, 54% { background-position: calc(2 * var(--mini-w) * -1) calc(0 * var(--mini-h) * -1); }
  55%, 72% { background-position: calc(3 * var(--mini-w) * -1) calc(0 * var(--mini-h) * -1); }
  73%, 100% { background-position: calc(4 * var(--mini-w) * -1) calc(0 * var(--mini-h) * -1); }
}

@keyframes rielSwayA {
  0%, 100% { margin-left: 0; }
  50% { margin-left: 0.5px; }
}

@keyframes rielSwayB {
  0%, 100% { transform: translateY(0) rotate(-0.35deg); }
  50% { transform: translateY(-1px) rotate(0.4deg); }
}

@keyframes rielSwayC {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-0.5px) scale(1.003); }
}

@keyframes rielTailSwish {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(5deg); }
}

@keyframes rielTailSwishFast {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(9deg); }
}

@keyframes rielHeadTiltA {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-3deg) translateY(-1px); }
}

@keyframes rielHeadTiltB {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(3deg); }
}

@keyframes rielHeadBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  35% { transform: translateY(-4px) rotate(-4deg); }
  70% { transform: translateY(0) rotate(2deg); }
}

@keyframes rielHeadWave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(6deg); }
  50% { transform: rotate(-4deg); }
  75% { transform: rotate(5deg); }
}

@keyframes rielHeadAlert {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
  75% { transform: rotate(-3deg); }
}

@keyframes rielBlink {
  0%, 46%, 52%, 100% { opacity: 1; transform: scaleY(1); }
  48%, 50% { opacity: 0.82; transform: scaleY(0.08); }
}

@keyframes rielEyesLookLeft {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-3px); }
}

@keyframes rielEyesLookRight {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

@keyframes rielEyesAlert {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.03) translateY(-1px); }
  60% { transform: scale(1.01); }
}

@keyframes rielEyesFocus {
  0%, 100% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(1px) translateY(-1px); }
}

@keyframes rielArmRest {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(2deg); }
}

@keyframes rielArmLift {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  35% { transform: rotate(-8deg) translateY(-6px); }
  70% { transform: rotate(2deg) translateY(0); }
}

@keyframes rielArmWave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  50% { transform: rotate(6deg); }
  75% { transform: rotate(-8deg); }
}

@keyframes rielArmCelebrate {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  30% { transform: rotate(-10deg) translateY(-8px); }
  60% { transform: rotate(5deg) translateY(-4px); }
}

@keyframes rielArmTalk {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-5deg); }
  60% { transform: rotate(3deg); }
}

@keyframes rielThinking {
  0%, 100% { transform: translateY(0) rotate(-0.35deg) scale(1); }
  25% { transform: translateY(-1px) rotate(0.25deg) scale(1.002); }
  50% { transform: translateY(-2px) rotate(-0.2deg) scale(1.004); }
  75% { transform: translateY(-1px) rotate(0.2deg) scale(1.002); }
}

@keyframes rielTalk {
  0%, 100% { transform: translateY(0) rotate(-0.35deg); }
  30% { transform: translateY(-2px) rotate(0.55deg); }
  60% { transform: translateY(-1px) rotate(-0.15deg); }
}

@keyframes rielHop {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-10px) scale(1.02); }
  70% { transform: translateY(0) scale(0.99); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes rielWave {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  20% { transform: translateY(-2px) rotate(3deg); }
  40% { transform: translateY(-1px) rotate(-2.2deg); }
  60% { transform: translateY(-2px) rotate(3deg); }
  80% { transform: translateY(-0.5px) rotate(-1.2deg); }
}

@keyframes rielAlert {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  20% { transform: translateX(-4px) rotate(-3deg); }
  40% { transform: translateX(4px) rotate(3deg); }
  60% { transform: translateX(-3px) rotate(-2deg); }
  80% { transform: translateX(3px) rotate(2deg); }
}

@keyframes rielCelebrate {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  25% { transform: translateY(-5px) rotate(-3deg) scale(1.025); }
  50% { transform: translateY(-7px) rotate(3deg) scale(1.035); }
  75% { transform: translateY(-3px) rotate(-2deg) scale(1.02); }
}

@keyframes rielShadow {
  0%, 100% { transform: scaleX(1); opacity: 0.26; }
  50% { transform: scaleX(0.985); opacity: 0.23; }
}

@keyframes rielAssistantShadow {
  0%, 100% { transform: scaleX(1); opacity: 0.22; }
  50% { transform: scaleX(0.992); opacity: 0.2; }
}

@keyframes rielShadowFast {
  0%, 100% { transform: scaleX(1); opacity: 0.24; }
  50% { transform: scaleX(0.97); opacity: 0.2; }
}

@keyframes rielBubbleDot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
  40% { transform: translateY(-4px); opacity: 1; }
}

body.dark {
  background: var(--bg-dark);
  color: #f8fafc;
}

.mobile-header,
.menu-overlay {
  display: none;
}

.logo {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  padding: 14px 18px !important;
  margin-bottom: 15px !important;
  background: transparent !important;
  border: none !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.logo img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
}

.logo span {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  color: var(--primary) !important;
}

body.dark .logo span {
  color: #ffffff !important;
}

.logo-glow {
  position: absolute;
  width: 40px;
  height: 40px;
  background: var(--primary);
  filter: blur(20px);
  opacity: 0.4;
  left: 10px;
  border-radius: 50%;
  box-shadow: 0 0 30px 10px var(--primary-glow);
}

.search-bar {
  display: flex;
  align-items: center;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 100%;
  max-width: 400px;
  transition: all 0.3s ease;
  box-shadow: none !important;
  margin-bottom: 20px;
  overflow: visible !important;
}

.search-bar:focus-within {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
  transform: translateY(-1px);
}

.search-bar input {
  border: none;
  background: transparent;
  padding: 10px 0;
  font-size: 14px;
  color: #1e293b;
  width: 100%;
  outline: none;
}

.search-bar button {
  background: var(--primary);
  color: white;
  border: none;
  padding: 0 16px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 6px rgba(99, 102, 241, 0.2);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.search-bar button:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

body.dark .search-bar {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark .search-bar input {
  color: #fff;
}

.tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.tb {
  display: flex;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  background: rgba(148, 163, 184, 0.05) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-align: left !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.tb:hover {
  background: rgba(99, 102, 241, 0.08) !important;
  border-color: rgba(99, 102, 241, 0.2) !important;
  color: var(--primary) !important;
  transform: translateX(4px);
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.2), inset 0 0 8px rgba(99, 102, 241, 0.1) !important;
}

body.dark .tb:hover {
  background: rgba(99, 102, 241, 0.15) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  color: #a5b4fc !important;
  box-shadow: 0 0 25px rgba(99, 102, 241, 0.4), inset 0 0 12px rgba(99, 102, 241, 0.2) !important;
}

.tb.on {
  background: rgba(99, 102, 241, 0.12) !important;
  color: var(--primary) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transform: translateX(0) !important;
}

body.dark .tb.on {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15)) !important;
  color: #ffffff !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
}

.tb.on::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 4px;
  background: #6366f1;
  border-radius: 0 4px 4px 0;
  box-shadow: 2px 0 10px rgba(99, 102, 241, 0.6);
}

.tb.on span {
  transform: translateX(0);
}

.tb i {
  font-style: normal;
  font-size: 20px;
}

.tb-assistant-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: block;
  object-fit: contain;
  object-position: center;
  vertical-align: middle;
  filter: drop-shadow(0 2px 6px rgba(37,99,235,0.2));
  transform: translateY(0);
}

body.dark .tb.on .tb-assistant-icon,
body.dark .tb:hover .tb-assistant-icon {
  filter: drop-shadow(0 0 8px rgba(129,140,248,0.28));
}

/* ── Sidebar collapsible groups — Premium v2 ──────── */
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
}

.nav-group + .nav-group {
  margin-top: 4px;
}

.nav-group-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #475569;
  padding: 10px 14px 4px;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: none;
  box-shadow: none;
}

.nav-group-label:hover {
  color: #6366f1;
  background: transparent;
  border: none;
  box-shadow: none;
  transform: none;
}
.nav-group-label:active {
  transform: none;
}

body.dark .nav-group-label {
  color: #475569;
  background: transparent;
  border: none;
  box-shadow: none;
}
body.dark .nav-group-label:hover {
  color: #a5b4fc;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Grupo activo */
.nav-group.has-active .nav-group-label {
  color: #4f46e5;
  background: transparent;
  border: none;
  font-weight: 700;
  box-shadow: none;
}
body.dark .nav-group.has-active .nav-group-label {
  color: #a5b4fc;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Chevron CSS */
.nav-group-chevron {
  margin-left: auto;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.4;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.2s;
}
.nav-group-chevron::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  border-radius: 1px;
}
.nav-group-label:hover .nav-group-chevron,
.nav-group.has-active .nav-group-chevron {
  opacity: 0.8;
}
.nav-group-label.collapsed .nav-group-chevron {
  transform: rotate(-90deg);
}

/* Items expandibles */
.nav-group-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  max-height: 500px;
  transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.22s ease;
  opacity: 1;
  padding-left: 4px;
}
.nav-group-items.collapsed {
  max-height: 0 !important;
  opacity: 0;
}

/* Línea vertical decorativa a la izquierda cuando está expandido */
.nav-group.has-active .nav-group-items {
  border-left: 2px solid rgba(99,102,241,0.2);
  padding-left: 8px;
  margin-left: 12px;
}
body.dark .nav-group.has-active .nav-group-items {
  border-left-color: rgba(99,102,241,0.3);
}

body.dark .logo {
  color: #f8fafc;
}



.logo img,
.login-logo-icon img,
.logo-premium {
  background: #ffffff !important;
  /* sin padding extra: el margen lo da el propio logo.png (12% parejo),
     así la distancia emblema↔borde es consistente en todos los tamaños */
  border-radius: 8px;
  box-sizing: border-box;
  object-fit: contain;
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.6), 0 0 5px rgba(99, 102, 241, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.logo img:hover,
.login-logo-icon img:hover,
.logo-premium:hover {
  box-shadow: 0 0 25px rgba(99, 102, 241, 0.8), 0 0 12px rgba(99, 102, 241, 0.9);
  transform: scale(1.1) rotate(-3deg);
}

.sec {
  display: none;
  opacity: 0;
  transform: translateY(8px);
}

.sec.on {
  display: block;
  animation: secFadeIn 0.22s cubic-bezier(0.4,0,0.2,1) forwards;
}

/* CRM y Mensajes: sin scroll en main-content, cada sección maneja su propio scroll */
.main-content.crm-active,
.main-content.msg-active {
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
  overscroll-behavior: none !important;
  /* touch-action: none bloqueaba clicks/taps en contactos en Android WebView */
  touch-action: auto !important;
}
/* Respaldo :has() para navegadores modernos */
.main-content:has(#s-crm.sec.on),
.main-content:has(#s-msg.sec.on) {
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
}
#s-crm.sec.on,
#s-msg.sec.on {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: pan-y !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.crm-sticky-header {
  flex-shrink: 0;
  padding-top: 18px;
  padding-bottom: 12px;
  width: 100%;
  box-sizing: border-box;
}

/* En pantallas anchas centrar el contenido del CRM con un ancho máximo */
@media (min-width: 1440px) {
  .crm-sticky-header {
    max-width: 1560px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
  }
  .kanban-board-wrap {
    padding-left: max(24px, calc((100% - 1560px) / 2));
    padding-right: max(24px, calc((100% - 1560px) / 2));
  }
}

/* ── Contador días en estado ──────────────────────────────── */
.dias-estado {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; padding: 2px 7px;
  border-radius: 20px; margin-top: 4px;
  background: rgba(99,102,241,0.1); color: #818cf8;
  border: 1px solid rgba(99,102,241,0.2);
}
.dias-apr-ok {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 600; padding: 2px 7px;
  border-radius: 20px; margin-top: 4px;
  background: rgba(34,197,94,0.1); color: #4ade80;
  border: 1px solid rgba(34,197,94,0.2);
}
.dias-apr-warn {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 600; padding: 3px 8px;
  border-radius: 20px; margin-top: 4px;
  background: rgba(245,158,11,0.15); color: #fbbf24;
  border: 1px solid rgba(245,158,11,0.35);
}
.dias-apr-urgent {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; padding: 3px 8px;
  border-radius: 20px; margin-top: 5px;
  background: rgba(239,68,68,0.15); color: #f87171;
  border: 1px solid rgba(239,68,68,0.4);
  animation: pulseUrgente 1.5s ease-in-out infinite;
}
@keyframes pulseUrgente {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes secFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: var(--shadow-md);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}

body.dark .card {
  background: var(--bg-dark-card);
  backdrop-filter: blur(16px);
  border-color: var(--glass-border);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.row2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  width: 100%;
  margin-bottom: 20px;
}

.row-cot {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  width: 100%;
}

@media (max-width: 900px) {
  .row-cot {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .k-stat-card {
    padding: 14px;
    gap: 8px;
  }

  .ks-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
    border-radius: 10px;
  }

  .row-cot .col-mob-contents {
    display: contents !important;
  }

  .row-cot .o1 { order: 1; }
  .row-cot .o2 { order: 2; }
  .row-cot .o3 { order: 3; }
  .row-cot .o4 { order: 4; }
  .row-cot .o5 { order: 5; }

  .card {
    padding: 16px !important;
  }

  /* Responsive Tables */
  .table-premium {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  .table-premium thead {
    display: none;
  }

  .table-premium tbody {
    display: block;
    width: 100%;
  }

  .table-premium tr {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100% !important;
    padding: 6px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    position: relative;
    gap: 1px;
  }

  #table-usuarios tr:first-child {
    margin-top: 30px;
  }

  body.dark .table-premium tr {
    border-bottom-color: rgba(255, 255, 255, 0.05);
  }

  .table-premium td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 2px 0 !important;
    border: none !important;
    text-align: left !important;
    font-size: 13px;
  }

  .table-premium td[data-label="RUT"],
  .table-premium td[data-label="Direccion"] {
    display: none !important;
  }

  .table-premium td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 9px;
    color: #94a3b8;
    text-transform: uppercase;
    opacity: 0.8;
    flex-shrink: 0;
  }

  .table-premium td:last-child {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin-top: 4px !important;
    padding-top: 4px !important;
    border-top: 1px solid rgba(148, 163, 184, 0.05) !important;
    width: 100% !important;
  }

  body.dark .table-premium td:last-child {
    border-top-color: rgba(255, 255, 255, 0.03) !important;
  }
}

/* Scrollbar — ocultamos en APK nativo (Android WebView los muestra en todo) */
.is-native ::-webkit-scrollbar,
.is-native::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
.is-native * {
  scrollbar-width: none !important;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

body.dark ::-webkit-scrollbar-track {
  background: #0a1628;
}

body.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}

body.dark ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Purged old KPI styles to avoid conflicts with premium grid */

.sh {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: -0.01em;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px
}

th {
  text-align: left;
  padding: 6px 8px;
  color: #9ca3af;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid #f0f0ef
}

td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(229, 229, 227, 0.6);
  color: #1c1c1a;
  vertical-align: middle;
  line-height: 1.3;
}

body.dark td {
  border-bottom-color: rgba(39, 39, 42, 0.6);
}

tr:last-child td {
  border-bottom: none
}

.sec table th {
  background: rgba(30, 41, 59, 0.05);
  border-bottom: 2px solid rgba(99, 102, 241, 0.2);
}

body.dark .sec table th {
  background: transparent;
  border-bottom: 2px solid rgba(99, 102, 241, 0.4);
}

tr:hover td {
  background: #fafaf9;
}
body.dark tr:hover td {
  background: rgba(99,102,241,0.05) !important;
}

/* ── data-table (asistencia, etc.) ─────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  padding: 10px 14px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: #64748b; background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  text-align: left;
}
.data-table td {
  padding: 11px 14px;
  color: var(--text, #e2e8f0);
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
body.dark .data-table tbody tr:nth-child(odd) td  { background: rgba(255,255,255,0.03); }
body.dark .data-table tbody tr:nth-child(even) td { background: rgba(99,102,241,0.04); }
.data-table tbody tr:hover td { background: rgba(99,102,241,0.13) !important; }
[data-theme="light"] .data-table th { color: #64748b; border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] .data-table td { color: #1e293b; border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .data-table tbody tr:nth-child(odd) td  { background: rgba(0,0,0,0.02); }
[data-theme="light"] .data-table tbody tr:nth-child(even) td { background: rgba(99,102,241,0.03); }
[data-theme="light"] .data-table tbody tr:hover td { background: rgba(99,102,241,0.07) !important; }

.mono {
  font-family: ui-monospace, monospace
}

.muted {
  color: #6b7280
}

.sm {
  font-size: 12px
}

.lsm {
  font-size: 12px;
  color: #9ca3af
}

.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.fg {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px
}

.fg label {
  font-size: 13px;
  color: #94a3b8;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
  margin-bottom: 4px;
}

input,
select,
textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: #fdfdfd;
  color: #1e293b;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
  outline: none;
  box-shadow: var(--shadow-sm);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1), var(--shadow-md);
  transform: translateY(-1px);
}

input:disabled,
select:disabled,
textarea:disabled {
  background: #f9fafb;
  color: #9ca3af
}

.fgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.srv-row,
.mat-row {
  display: grid;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  background: transparent;
  padding: 0;
  transition: all 0.2s;
}

.srv-row {
  grid-template-columns: 1fr 80px 80px 36px;
}

.mat-row {
  grid-template-columns: 1fr 120px 80px 36px;
}

.mat-series-input {
  min-height: 38px;
  resize: vertical;
  font-family: inherit;
  font-size: 12px;
}

.srv-row:hover,
.mat-row:hover {
  background: transparent;
}

.rm {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  cursor: pointer;
  color: #ef4444;
  font-size: 16px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.rm:hover {
  background: #ef4444;
  color: #fff;
  transform: rotate(90deg) scale(1.1);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.add-r {
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
  cursor: pointer;
  color: #818cf8;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 12px;
  margin-top: 8px;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.add-r:hover {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
  transform: translateY(-2px);
}

.col-hdr {
  font-size: 10px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  margin-bottom: 6px;
}

.tot-panel {
  background: #f8fafc;
  border-radius: 16px;
  padding: 20px;
  margin-top: 15px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.tl {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 6px 0;
  color: #64748b;
  font-weight: 500;
}

.tl.grand {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  border-top: 2px solid #f1f5f9;
  margin-top: 15px;
  padding-top: 15px;
  letter-spacing: -0.02em;
}

body.dark .tot-panel {
  background: rgba(30, 41, 59, 0.4);
  border-color: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

body.dark .tl.grand {
  color: #f8fafc;
  border-top-color: rgba(255, 255, 255, 0.1);
}

.ld {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #9ca3af;
  font-size: 13px;
  padding: 22px 0
}

.dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: bl 1.2s infinite
}

.dot:nth-child(2) {
  animation-delay: .2s
}

.dot:nth-child(3) {
  animation-delay: .4s
}

@keyframes bl {

  0%,
  80%,
  100% {
    opacity: .15
  }

  40% {
    opacity: 1
  }
}

.msg {
  font-size: 11px;
  padding: 8px 12px;
  border-radius: 8px;
  margin-top: 10px;
  line-height: 1.4;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mok {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.merr {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.minf {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.mwarn {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.empty {
  color: #9ca3af;
  font-size: 13px;
  text-align: center;
  padding: 32px;
  background: #f9fafb;
  border-radius: 10px
}

.cat-hdr {
  font-size: 10px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 4px 10px;
  background: #0f1e3d;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 4px;
  border-radius: 4px;
}

body.dark .cat-hdr {
  background: #312e81;
  color: #e0e7ff;
}

.btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px
}

.btns3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 14px
}

button {
  padding: 10px 20px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  background: #fff;
  color: #0f172a;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

button:hover {
  background: #f8fafc;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

button:active {
  transform: translateY(0) scale(0.98);
}

button:disabled {
  opacity: .5;
  cursor: not-allowed
}

.bprim {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 700;
  padding: 14px 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 20px -6px var(--primary-glow);
}

.bprim:hover:not(:disabled) {
  background: #4f46e5;
  transform: translateY(-2px);
  box-shadow: 0 12px 25px -8px var(--primary-glow);
}

.bwarn {
  background: #d97706;
  color: #fff;
  border-color: #d97706
}

.bwarn:hover:not(:disabled) {
  background: #b45309
}

.bgreen {
  background: #16a34a;
  color: #fff;
  border-color: #16a34a
}

.bgreen:hover:not(:disabled) {
  background: #15803d
}

.bred {
  background: #ef4444;
  color: #fff;
  border: none;
}

.bsec {
  background: rgba(148, 163, 184, 0.1);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

body.dark .bsec {
  background: rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
  border-color: rgba(255, 255, 255, 0.1);
}

.bdanger {
  background: rgba(239,68,68,.15);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,.3);
}
.bdanger:hover { background: rgba(239,68,68,.25); }

/* Mensajería - tabs tipo envío */
.mg-tab {
  flex: 1; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(99,102,241,.25);
  background: transparent; color: #94a3b8; font-size: 12px; cursor: pointer; transition: all .15s;
}
.mg-tab:hover { background: rgba(99,102,241,.12); color: #a5b4fc; }
.mg-tab-active { background: rgba(99,102,241,.2) !important; color: #a5b4fc !important; border-color: rgba(99,102,241,.5) !important; font-weight: 600; }

/* Mensajería - botones de rol */
.mg-rol-btn {
  padding: 7px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1);
  background: transparent; color: #94a3b8; font-size: 13px; cursor: pointer; transition: all .15s;
}
.mg-rol-btn[data-rol="tecnico"]        { border-color: rgba(6,182,212,.3);   color: #22d3ee; }
.mg-rol-btn[data-rol="vendedor"]       { border-color: rgba(16,185,129,.3);  color: #34d399; }
.mg-rol-btn[data-rol="administrador"]  { border-color: rgba(168,85,247,.3);  color: #c084fc; }
.mg-rol-btn[data-rol="supervisor"]     { border-color: rgba(245,158,11,.3);  color: #fbbf24; }

.mg-rol-btn[data-rol="tecnico"]:hover,       .mg-rol-btn[data-rol="tecnico"].active       { background: rgba(6,182,212,.15);   border-color: rgba(6,182,212,.6); }
.mg-rol-btn[data-rol="vendedor"]:hover,      .mg-rol-btn[data-rol="vendedor"].active      { background: rgba(16,185,129,.15);  border-color: rgba(16,185,129,.6); }
.mg-rol-btn[data-rol="administrador"]:hover, .mg-rol-btn[data-rol="administrador"].active { background: rgba(168,85,247,.15);  border-color: rgba(168,85,247,.6); }
.mg-rol-btn[data-rol="supervisor"]:hover,    .mg-rol-btn[data-rol="supervisor"].active    { background: rgba(245,158,11,.15);  border-color: rgba(245,158,11,.6); }
.mg-rol-btn.active { font-weight: 600; }

.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), #4f46e5);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  margin-right: 12px;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
}

a {
  color: #6366f1;
  text-decoration: none;
  font-size: 13px
}

a:hover {
  text-decoration: underline
}

.spin {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  vertical-align: middle;
  margin-right: 6px
}

.spin-dark {
  border-color: rgba(0, 0, 0, .15);
  border-top-color: #6366f1
}

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

.search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px
}

.search-bar input {
  flex: 1;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 10px
}

.search-bar button {
  white-space: nowrap;
  padding: 10px 18px
}

.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  margin-left: 8px
}

.mode-new {
  background: #dbeafe;
  color: #6366f1
}

.mode-edit {
  background: #fef3c7;
  color: #92400e
}

.cod-display {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  background: #f1f5f9;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 8px
}

/* Modal */
#mdl,
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.4);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.mdl-card {
  background: #ffffff;
  width: 90%;
  max-width: 480px;
  max-height: 85vh;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
  animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes modalSlideUp {
  from {
    transform: translateY(20px) scale(0.95);
    opacity: 0;
  }

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

.mdl-hdr {
  padding: 16px 24px;
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mdl-hdr h3 {
  font-size: 22px;
  font-weight: 800;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 10px;
}

body.dark .mdl-hdr h3 {
  color: #f8fafc;
}

.mdl-close {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #94a3b8;
  transition: all 0.2s;
  font-size: 18px;
}

body:not(.dark) .mdl-close {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #64748b;
}

.mdl-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

.mdl-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.mdl-body::-webkit-scrollbar {
  width: 6px;
}

.mdl-body::-webkit-scrollbar-track {
  background: transparent;
}

.mdl-body::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.2);
  border-radius: 10px;
}

.mdl-body::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

.mdl-ftr {
  padding: 16px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  background: #f8fafc;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

body.dark .mdl-card {
  background: rgba(30, 41, 59, 0.8) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}

body.dark .mdl-hdr h3 {
  color: #f8fafc;
}

body.dark .mdl-ftr {
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.dark .mdl-hdr {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.btn-outline {
  background: #fff;
  border: 1px solid #e5e5e3;
  color: #374151
}

.btn-outline:hover {
  background: #f3f4f6
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s
}

.btn-icon:hover {
  background: #f1f5f9;
  color: #1e293b;
  border-color: #cbd5e1;
}

body.dark .btn-icon {
  background: rgba(99,102,241,0.08);
  color: #94a3b8;
  border-color: rgba(99,102,241,0.15);
}
body.dark .btn-icon:hover {
  background: rgba(99,102,241,0.18);
  color: #c7d2fe;
  border-color: rgba(99,102,241,0.35);
}

.btn-action-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: #f1f5f9;
  /* Light grey instead of dark */
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.btn-action-premium:hover {
  background: #e2e8f0;
  color: #1e293b;
  transform: translateY(-1px);
}

body.dark .btn-action-premium {
  background: rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark .btn-action-premium:hover {
  background: rgba(99, 102, 241, 0.15);
  color: #fff;
  border-color: #6366f1;
}

/* Fotos */
.fotos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  margin-top: 10px
}

.foto-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e5e3;
  cursor: pointer
}

.foto-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s
}

.foto-item:hover img {
  transform: scale(1.05)
}

.foto-nombre {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 9px;
  padding: 3px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.foto-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px
}

.upload-zone {
  border: 2px dashed #e5e5e3;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
  margin-top: 8px
}

.upload-zone:hover {
  border-color: #93c5fd;
  background: #f0f9ff;
  color: #6366f1
}

/* Lightbox */
#lbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .92);
  z-index: 999999;
  align-items: center;
  justify-content: center
}

#lbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 0 60px rgba(0, 0, 0, .5)
}

#lbox-close {
  position: fixed;
  top: 20px;
  right: 24px;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
  z-index: 10000
}


@keyframes loginGradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.login-box {
  background: rgba(255, 255, 255, 0.85);
  /* Más opacidad para legibilidad */
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  width: 100%;
  max-width: 440px;
  /* Un poco más ancha */
  padding: 56px 48px;
  border-radius: 40px;
  /* Bordes más suaves */
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.08),
    0 20px 40px -15px rgba(0, 0, 0, 0.05),
    inset 0 0 20px rgba(255, 255, 255, 0.5);
  z-index: 10;
  animation: loginAppear 1s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
}

.login-main {
  min-width: 0;
}

@keyframes loginAppear {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }

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

.login-logo {
  text-align: center;
  margin-bottom: 24px
}

.login-logo-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
}

.login-title {
  font-size: 30px;
  font-weight: 900;
  color: #020617;
  /* Más oscuro para contraste premium */
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}

.login-sub {
  font-size: 15px;
  color: #64748b;
  margin-bottom: 24px;
}

.login-fg {
  text-align: left;
  margin-bottom: 20px;
}

.login-fg label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 8px;
  margin-left: 4px;
}

.login-fg input {
  width: 100%;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  font-size: 15px;
  transition: all 0.3s;
  outline: none;
}

.login-fg input:focus {
  background: #fff;
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
  transform: translateY(-1px);
}

.login-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: white;
  border: none;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 12px;
  box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.4);
}

.login-btn:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 20px 30px -10px rgba(99, 102, 241, 0.5);
  filter: brightness(1.1);
}

.login-btn:active {
  transform: translateY(-1px) scale(0.98);
}

.login-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

#login-err {
  display: none
}

.spin-w {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  vertical-align: middle;
  margin-right: 6px
}

.version-tag {
  color: rgba(15, 23, 42, 0.4);
  font-weight: 500;
  text-align: center !important;
  width: 100% !important;
  font-size: 11px !important;
  margin: 5px 0 !important;
  display: block !important;
}

body.dark .version-tag {
  color: rgba(255, 255, 255, 0.2);
}
.beta-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 3px;
  text-transform: uppercase;
}

.sidebar-footer {
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 0 !important;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  width: 100%;
  box-sizing: border-box;
}

body.dark .user-badge {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}

#badge-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), #4f46e5);
  color: white !important;
  font-size: 20px;
  flex-shrink: 0;
}

#badge-nombre {
  font-weight: 700;
  color: #0f172a;
  font-size: 11.5px;
  line-height: 1.25;
  display: block;
}

body.dark #badge-nombre {
  color: #f8fafc;
}

#badge-rol {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

.role-tag {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  margin-top: 4px;
  display: inline-block;
}

/* ── SECCIÓN FOOTER UNIFICADA (PC/Móvil) ── */
.footer-actions {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 15px 0 !important;
  width: 100% !important;
  padding: 0 5px !important;
  box-sizing: border-box !important;
}

.theme-btn,
.footer-btn,
#tb-cfg {
  background: none !important;
  border: none !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  color: #64748b !important;
  cursor: pointer !important;
  font-size: 16px !important;
}

body.dark .theme-btn,
body.dark .footer-btn,
body.dark #tb-cfg {
  color: #94a3b8 !important;
}

.theme-btn:hover,
.footer-btn:hover,
#tb-cfg:hover {
  transform: translateY(-2px) !important;
  opacity: 0.8 !important;
}

.footer-actions button:hover {
  background: rgba(99, 102, 241, 0.15) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  color: var(--primary) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Pill de Conexión Premium - Referencia Visual */
.conn-pill-base {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 1px 8px !important;
  border-radius: 20px !important;
  transition: all 0.4s ease !important;
  cursor: default !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1px !important;
  white-space: nowrap !important;
  height: 22px !important;
  width: fit-content !important;
  box-sizing: border-box !important;
  backdrop-filter: blur(8px) !important;
}

#conn-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  display: block !important;
}

#conn-lbl {
  display: inline-block !important;
  text-transform: capitalize !important;
}

/* Estado: ONLINE (Verde Premium) */
.conn-pill-base {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 20px !important;
  padding: 6px 12px !important;
  width: fit-content !important;
  margin: 0 auto 20px auto !important;
  justify-content: center !important;
  transition: all 0.4s ease !important;
  cursor: default !important;
}

/* Sidebar context adjustment */
.sidebar .conn-pill-base {
  margin: 0 !important;
  padding: 6px 10px !important;
}

.conn-pill-base div[id*="dot"] {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  transition: all 0.4s ease !important;
}

.conn-pill-base span[id*="lbl"] {
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  transition: all 0.4s ease !important;
}

/* Estado: ONLINE (Verde Premium) */
.conn-pill-base.online {
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1.5px solid rgba(34, 197, 94, 0.4) !important;
}

.conn-pill-base.online span[id*="lbl"] {
  color: #22c55e !important;
}

.conn-pill-base.online div[id*="dot"] {
  background: #22c55e !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.8) !important;
}

/* Estado: OFFLINE / LOADING (Rojo Premium) */
.conn-pill-base.offline,
.conn-pill-base.loading,
.conn-pill-base:not(.online) {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.4) !important;
}

.conn-pill-base.offline span[id*="lbl"],
.conn-pill-base.loading span[id*="lbl"],
.conn-pill-base:not(.online) span[id*="lbl"] {
  color: #ef4444 !important;
}

.conn-pill-base.offline div[id*="dot"],
.conn-pill-base.loading div[id*="dot"],
.conn-pill-base:not(.online) div[id*="dot"] {
  background: #ef4444 !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.8) !important;
}

/* Animación de carga para el dot rojo */
.conn-pill-base.loading div[id*="dot"] {
  animation: pulse-red 1.5s infinite ease-in-out;
}

@keyframes pulse-red {
  0% {
    transform: scale(1);
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
  }

  50% {
    transform: scale(1.2);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.9);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
  }
}

.btn-pass {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.1) !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-pass:hover {
  background: rgba(245, 158, 11, 0.3) !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.4), inset 0 0 12px rgba(245, 158, 11, 0.2) !important;
  transform: translateY(-2px);
}

#btn-usuarios {
  display: none;
}

.btn-hdr-blue,
.btn-hdr-red {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

.btn-hdr-blue {
  width: 100% !important;
  padding: 14px 18px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  background: rgba(99, 102, 241, 0.15) !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  color: #6366f1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.btn-hdr-blue:hover {
  background: rgba(99, 102, 241, 0.25) !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.3), inset 0 0 15px rgba(99, 102, 241, 0.2) !important;
  transform: translateY(-2px);
}

.btn-hdr-red {
  width: 100% !important;
  padding: 14px 18px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
  margin-top: 0 !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.btn-hdr-red:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.3), inset 0 0 15px rgba(239, 68, 68, 0.2) !important;
  transform: translateY(-2px);
}

body.dark .btn-hdr-blue {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.4);
  color: #818cf8;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.2);
}

body.dark .btn-hdr-blue:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: #818cf8;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.5), inset 0 0 0 1px #818cf8;
}

body.dark .btn-hdr-red {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.2);
}

body.dark .btn-hdr-red:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #f87171;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.5), inset 0 0 0 1px #f87171;
}

.card-search {
  background: #f9fafb;
  margin-bottom: 12px;
}

.sh-search {
  margin-bottom: 10px;
}

.sh-premium span {
  color: #1e293b;
}

body.dark .sh-premium span {
  color: #fff;
}

.fg label {
  display: block;
  font-size: 11px;
  color: #64748b;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

body.dark .fg label {
  color: #94a3b8;
}

.fg input,
.fg select,
.fg textarea {
  width: 100%;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 400;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: all 0.2s;
  outline: none;
}

.fg input:focus,
.fg select:focus,
.fg textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1), 0 1px 3px rgba(0,0,0,0.06);
  outline: none;
}

.mdl-u-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #374151;
  border-left: 3px solid #6366f1;
  padding-left: 10px;
}

/* Tabla de Usuarios Simetría */
.mdl-u-body table,
#lista-usuarios-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  table-layout: fixed;
  /* Force respect widths */
}

.fade-scroll-mask {
  mask-image: linear-gradient(to bottom, transparent 5px, black 60px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 5px, black 60px);
}

#lista-usuarios-header {
  position: relative;
  z-index: 20;
}

#lista-usuarios-body thead th {
  position: sticky;
  top: -11px;
  /* Align with parent padding */
  z-index: 100;
  background: var(--card-bg);
  padding: 12px 15px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
}

.mdl-u-body th {
  padding: 8px 12px;
  font-size: 10px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: none;
}

.mdl-u-body td {
  padding: 12px;
  background: #f8fafc;
  border-bottom: none;
  vertical-align: middle;
}

.mdl-u-body tr td:first-child {
  border-radius: 10px 0 0 10px;
}

.mdl-u-body tr td:last-child {
  border-radius: 0 10px 10px 0;
}

body.dark .mdl-u-body td {
  background: #27272a;
}

.mdl-u-body tr:hover td {
  background: #f1f5f9 !important;
}

body.dark .mdl-u-body tr:hover td {
  background: #3f3f46 !important;
}

.btn-mdl-outline,
.btn-mdl-danger {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  min-width: 80px;
  text-align: center;
  display: inline-block;
}

.btn-mdl-outline {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  margin-right: 6px;
}

.btn-mdl-danger {
  border: 1px solid #fee2e2;
  color: #ef4444;
  background: #fef2f2;
}

body.dark .btn-mdl-outline {
  background: #18181b;
  border-color: #3f3f46;
  color: #d1d5db;
}

body.dark .btn-mdl-danger {
  background: #450a0a;
  border-color: #7f1d1d;
  color: #fca5a5;
}

.btn-mdl-outline:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.btn-mdl-danger:hover {
  background: #fee2e2;
  border-color: #f87171;
}

body.dark .btn-mdl-outline:hover {
  background: #27272a;
}

body.dark .btn-mdl-danger:hover {
  background: #7f1d1d;
}

.btn-mdl-close {
  padding: 8px 20px;
  border-radius: 8px;
  border: 1px solid #e5e5e3;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
}

.mdl-card {
  background: #fff;
}

.role-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase
}

.role-admin {
  background: rgba(168, 85, 247, 0.1) !important;
  color: #c084fc !important;
}

.role-supervisor {
  background: rgba(245, 158, 11, 0.1) !important;
  color: #fbbf24 !important;
}

.role-vendedor {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #34d399 !important;
}

.role-tecnico {
  background: rgba(6, 182, 212, 0.1) !important;
  color: #22d3ee !important;
}

/* For light mode contexts if any */
body:not(.dark) .role-admin {
  background: #f3e8ff !important;
  color: #7e22ce !important;
}

body:not(.dark) .role-supervisor {
  background: #fef3c7 !important;
  color: #92400e !important;
}

body:not(.dark) .role-vendedor {
  background: #dcfce7 !important;
  color: #166534 !important;
}

body:not(.dark) .role-tecnico {
  background: #cffafe !important;
  color: #0e7490 !important;
}

.role-contador {
  background: rgba(100, 116, 139, 0.1) !important;
  color: #94a3b8 !important;
}
body:not(.dark) .role-contador {
  background: #f1f5f9 !important;
  color: #475569 !important;
}

.status-p {
  background: #fef3c7;
  color: #92400e;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.status-c {
  background: #dbeafe;
  color: #1e40af;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.status-f {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-a {
  background: rgba(251, 146, 60, 0.12) !important;
  color: #fb923c !important;
  border: 1px solid rgba(251, 146, 60, 0.3);
}

.status-x {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.status-blocked {
  background: rgba(249, 115, 22, 0.1) !important;
  color: #f97316 !important;
  border: 1px solid rgba(249, 115, 22, 0.2);
}

body.dark .status-f {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10b981 !important;
}

body.dark .status-x {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
}

/* ── MODAL USUARIOS ─────────────────────────────────────────────── */
#mdl-usuarios {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
  z-index: 998;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px)
}

.mdl-u-card {
  background: #fff;
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .15)
}

.mdl-u-hdr {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e5e3;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.mdl-u-body {
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  /* Prevent horizontal scroll */
  flex: 1
}

.mdl-u-ftr {
  padding: 14px 20px;
  border-top: 1px solid #e5e5e3;
  display: flex;
  justify-content: flex-end;
  gap: 8px
}

/* MODO OSCURO */
body.dark {
  background: #121212;
  color: #e5e7eb;
}

body.dark .topbar,
body.dark .card,
body.dark .kpi,
body.dark .mdl-u-card,
body.dark .mdl-card {
  background: #1e1e1e;
  border-color: #374151;
}

body.dark input,
body.dark select,
body.dark textarea {
  background: #2d3748;
  color: #e5e7eb;
  border-color: #4b5563;
}

body.dark input:disabled,
body.dark select:disabled {
  background: #1f2937;
  color: #9ca3af;
}

body.dark th,
body.dark td,
body.dark .mdl-hdr,
body.dark .mdl-ftr,
body.dark .mdl-u-hdr,
body.dark .mdl-u-ftr {
  border-color: #374151;
  color: #e5e7eb;
  background: #1e1e1e;
}

body.dark .btn-outline {
  background: #2d3748;
  border-color: #4b5563;
  color: #e5e7eb;
}

body.dark .btn-outline:hover {
  background: #374151;
}

body.dark tr:hover td {
  background: #2d3748;
}

body.dark .sh,
body.dark .kv,
body.dark .ks-val,
body.dark .tl.grand {
  color: #f3f4f6 !important;
}

body.dark .kv.pos,
body.dark .pos {
  color: #4ade80 !important;
}

body.dark .kv.neg,
body.dark .neg {
  color: #f87171 !important;
}

body.dark .tb {
  color: #64748b;
}

body.dark .tb:hover {
  background: rgba(99, 102, 241, 0.15) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  color: #a5b4fc !important;
  box-shadow: 0 0 25px rgba(99, 102, 241, 0.4), inset 0 0 12px rgba(99, 102, 241, 0.2) !important;
}

body.dark .tb.on {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(139, 92, 246, 0.12)) !important;
  color: #ffffff !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 0 25px rgba(99, 102, 241, 0.4), inset 0 0 15px rgba(99, 102, 241, 0.2) !important;
}

body.dark .tot-panel,
body.dark .cat-hdr,
body.dark .empty,
body.dark .cod-display {
  background: #2d3748;
  border-color: #374151;
  color: #e5e7eb;
}

body.dark button {
  background: rgba(30, 41, 59, 0.6);
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

body.dark button:hover:not(:disabled) {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
}

/* psel-trigger overrides — must beat body.dark button (0,1,1) */
body.dark .psel-trigger {
  background: rgba(255,255,255,0.04) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  transform: none !important;
}
body.dark .psel-trigger.psel-has-value { color: #e2e8f0 !important; }
body.dark .psel-trigger:hover {
  border-color: rgba(99,102,241,0.5) !important;
  background: rgba(99,102,241,0.05) !important;
  transform: none !important;
  box-shadow: none !important;
}
body.dark .psel-trigger.open {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15) !important;
  background: rgba(99,102,241,0.07) !important;
  transform: none !important;
}

body.dark .upload-zone {
  background: rgba(255, 255, 255, 0.02);
  border-color: #374151;
  color: #9ca3af;
}

body.dark .upload-zone:hover {
  background: rgba(99, 102, 241, 0.1);
  border-color: #6366f1;
  color: #818cf8;
}

body.dark .foto-count {
  background: rgba(34, 197, 94, 0.1);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.3);
}

body.dark .btn-icon {
  background: rgba(99, 102, 241, 0.1) !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  color: #818cf8 !important;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

body.dark .btn-icon:hover {
  background: rgba(99, 102, 241, 0.2) !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
  transform: translateY(-1px);
}

body.dark .bprim {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}

body.dark .bprim:hover:not(:disabled) {
  background: #2563eb;
}

body.dark .msg.minf {
  background: #1e3a8a;
  color: #bfdbfe;
  border-color: #1e40af;
}

body.dark .logo {
  color: #e5e7eb;
}

body.dark .mok {
  background: #064e3b;
  color: #d1fae5;
  border-color: #065f46;
}

body.dark .merr {
  background: #7f1d1d;
  color: #fecaca;
  border-color: #991b1b;
}

body.dark .mwarn {
  background: #78350f;
  color: #fde68a;
  border-color: #92400e;
}


body.dark .user-badge {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  padding: 12px 14px !important;
  border-radius: 16px;
  margin-top: 0;
}

body.dark #badge-nombre {
  color: #e5e7eb;
}

body.dark .btn-pass {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.5);
}

body.dark .btn-hdr-blue {
  background: #1e3a8a;
  border-color: #1e40af;
  color: #bfdbfe;
}

body.dark .btn-hdr-red {
  background: #7f1d1d;
  border-color: #991b1b;
  color: #fecaca;
}

body.dark .card-search {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.05);
}

body.dark .mode-new {
  background: rgba(99, 102, 241, 0.15) !important;
  color: #818cf8 !important;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid rgba(99, 102, 241, 0.3);
}

body.dark .mode-edit {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

body.dark .mdl-u-title {
  color: #e5e7eb;
}

body.dark .btn-mdl-outline,
body.dark .btn-mdl-close {
  background: #1e1e1e;
  color: #e5e7eb;
  border-color: #4b5563;
}

body.dark .btn-mdl-danger {
  background: #7f1d1d;
  color: #fecaca;
  border-color: #991b1b;
}

.btn-pdf {
  margin-top: 8px;
  width: 100%;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  color: #374151;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
}

body.dark .btn-pdf {
  background: #1e1e1e;
  border-color: #4b5563;
  color: #e5e7eb;
}

body.dark .btn-pdf:hover {
  background: #2d3748;
}

.bg-alt {
  background: #f9fafb;
}

body.dark .bg-alt {
  background: #1e1e1e;
}

/* ─── DARK MODE REFINEMENTS PARA LOGIN ─── */
body.dark #login-screen:not(.lg2) {
  background: #020617;
}

body.dark .login-box {
  background: rgba(15, 23, 42, 0.7);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

body.dark .login-title {
  color: #f8fafc;
}

body.dark .login-sub {
  color: #94a3b8;
}

body.dark .login-fg label {
  color: #94a3b8;
}

body.dark .login-fg input {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

body.dark .login-fg input:focus {
  background: rgba(255, 255, 255, 0.05);
  border-color: #6366f1;
}

body.dark .login-btn {
  box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.3);
}

body.dark .login-btn:hover:not(:disabled) {
  box-shadow: 0 20px 30px -10px rgba(99, 102, 241, 0.4);
}



body.dark .search-bar input {
  background: #2d3748;
  color: #e5e7eb;
}

.dark-btn-login {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #f1f5f9;
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 0 8px rgba(99, 102, 241, 0.3);
}

.dark-btn-login:hover {
  background: #e2e8f0;
  transform: scale(1.1);
}

/* KANBAN CRM */
.kanban-board-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  width: 100%;
  scrollbar-gutter: stable;
}
.kanban-board {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 24px;
  align-items: flex-start;
}

.k-col {
  flex: 0 0 300px;
  width: 300px;
  background: #f8fafc;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e8f0;
}

.k-hdr {
  font-weight: 600;
  font-size: 14px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 12px;
}

body.dark .k-hdr {
  color: #94a3b8;
}

.k-cnt {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
}

.k-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100px;
}

.k-item {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  cursor: grab;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: visible;
  z-index: 1;
  /* Borde izquierdo de color según estado */
  border-left: 4px solid transparent;
}
.k-item[data-estado="Pendiente"]   { border-left-color: #f59e0b; }
.k-item[data-estado="En Curso"]    { border-left-color: #6366f1; }
.k-item[data-estado="Por Aprobar"] { border-left-color: #fb923c; }
.k-item[data-estado="Finalizado"]  { border-left-color: #22c55e; }
.k-item[data-estado="Cancelado"]   { border-left-color: #ef4444; }

/* Pulso en "Por Aprobar" */
@keyframes kAprPulse {
  0%, 100% { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 0 0 0 rgba(251,146,60,0); }
  50%       { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 0 0 6px rgba(251,146,60,0.2); }
}
.k-item[data-estado="Por Aprobar"] { animation: kAprPulse 2.4s ease-in-out infinite; }
.k-item[data-estado="Por Aprobar"]:hover { animation: none; }

.k-item:has(.custom-select.open) { z-index: 999; }

/* ── Modo compacto ── */
.kanban-board.compact .k-item { padding: 10px 14px; }
.kanban-board.compact .k-desc,
.kanban-board.compact .crm-alert-badge,
.kanban-board.compact [data-action="comment"] { display: none !important; }
.kanban-board.compact .k-item .les-wrap { padding: 5px 10px; font-size: 11px; }

/* ── Swipe overlay ── */
.k-swipe-overlay {
  position: absolute; inset: 0; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: 0.3px;
  opacity: 0; pointer-events: none; z-index: 10;
  transition: opacity 0.08s; border-radius: inherit;
}
.k-swipe-overlay.k-swipe-next { background: rgba(99,102,241,0.25); color: #6366f1; }
.k-swipe-overlay.k-swipe-prev { background: rgba(245,158,11,0.25); color: #f59e0b; }

/* ── Long-press menú ── */
.k-quick-menu {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) scale(0.95);
  background: #0f1e3d; border: 1px solid rgba(99,102,241,0.25); border-radius: 14px;
  padding: 6px; z-index: 9999; min-width: 170px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
  opacity: 0; transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}
.k-quick-menu.open { opacity: 1; transform: translateX(-50%) scale(1); pointer-events: auto; }
body:not(.dark) .k-quick-menu { background: #fff; border-color: rgba(148,163,184,0.25); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.kqm-title { font-size: 10px; font-weight: 700; opacity: 0.45; text-transform: uppercase; letter-spacing: 0.8px; padding: 4px 10px 2px; }
.kqm-item  { padding: 9px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text); }
.kqm-item:hover { background: rgba(99,102,241,0.1); }
.kqm-danger { color: #ef4444 !important; }
.kqm-danger:hover { background: rgba(239,68,68,0.1) !important; }

body.dark .k-item {
  background: rgba(30, 41, 59, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2) !important;
}

.k-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  border-color: rgba(99, 102, 241, 0.3);
}

.k-cod {
  font-family: monospace;
  color: #6366f1;
  font-size: 12px;
  margin-bottom: 4px;
  font-weight: bold;
}

.k-cli {
  font-weight: 700;
  font-size: 14px;
  color: #0f172a;
  margin-bottom: 6px;
}

.k-desc {
  font-size: 11px;
  color: #64748b;
  line-height: 1.4;
  margin-bottom: 8px;
}

.k-select {
  font-size: 11px;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  width: 100%;
  cursor: pointer;
}

body.dark select {
  background-color: #0f1e3d;
  color: #f8fafc;
  border-color: #334155;
}

body.dark select option {
  background-color: #0f1e3d;
  color: #f8fafc;
}

body.dark .k-col {
  background: rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
}

body.dark .k-hdr {
  background: rgba(15, 23, 42, 0.8) !important;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px 20px 0 0;
}

body.dark .k-cnt {
  background: #334155;
  color: #cbd5e1;
}

body.dark .k-item {
  background: rgba(15, 23, 42, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  position: relative;
  overflow: visible;
  /* backdrop-filter removido del elemento padre para no crear stacking context
     que impida el desplegable de salir de los límites de la tarjeta */
}

body.dark .k-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: radial-gradient(circle at center, rgba(99, 102, 241, 0.05), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

body.dark .k-cli {
  color: #f8fafc;
}

body.dark .k-desc {
  color: #94a3b8;
}

body.dark .k-cod {
  color: #60a5fa;
}

/* --- DARK MODE FIXES FOR SIDEBAR LAYOUT --- */
/* --- PREMIUM COLOR SYSTEM --- */
:root {
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
}

body.dark {
  background: #020617;
  color: #f8fafc;
}

body.dark .app-layout,
body.dark .main-content {
  background: #020617;
}

body.dark .sidebar {
  background: #010413;
  border-color: rgba(255, 255, 255, 0.05);
}

body.dark .logo {
  color: #fafafa;
}

body.dark .tb {
  background: rgba(255, 255, 255, 0.03);
  color: #64748b;
}

body.dark .tb:hover {
  background: rgba(99, 102, 241, 0.15) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  color: #a5b4fc !important;
  box-shadow: 0 0 25px rgba(99, 102, 241, 0.4), inset 0 0 12px rgba(99, 102, 241, 0.2) !important;
}

body.dark .tb.on {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(139, 92, 246, 0.12)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  text-shadow: none !important;
}

body.dark .sidebar-footer {
  border-color: #27272a !important;
}

body.dark .card {
  background: #0a1628;
  /* Navy sólido para contraste total */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fafafa;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
}

/* Premium KPI Grid System */
.k-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
  width: 100%;
}

.k-grid-dash-5 {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* CRM: 4 columnas en desktop, 2x2 en móvil */
.k-grid-crm-4 {
  grid-template-columns: repeat(4, 1fr);
}

.k-grid-crm-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.k-grid-crm-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ks-icon-sintec {
  background: rgba(6, 182, 212, 0.12);
  color: #06b6d4;
}
body.dark .ks-icon-sintec {
  background: rgba(6, 182, 212, 0.15);
  color: #22d3ee;
}

/* ── Mapa Global Modal ─────────────────────────────── */
#mdl-mapa-global {
  position: fixed; inset: 0; z-index: 9800;
  background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  box-sizing: border-box;
}
#mdl-mapa-card {
  background: #fff;
  border-radius: 18px;
  width: 100%; max-width: 920px;
  height: 80vh; max-height: 700px;
  display: flex; flex-direction: column;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}
body.dark #mdl-mapa-card {
  background: #1e2130;
  border-color: rgba(255,255,255,0.08);
}
#mapa-global-container {
  flex: 1; min-height: 0;
}
/* Mapa header light/dark */
#mdl-mapa-card .mapa-hdr {
  border-bottom-color: #f1f5f9;
}
body.dark #mdl-mapa-card .mapa-hdr {
  border-bottom-color: rgba(255,255,255,0.08);
}
#mdl-mapa-card h3 { color: #1e293b; }
body.dark #mdl-mapa-card h3 { color: #e2e8f0; }
#mapa-filtro-tecnico {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #1e293b;
}
body.dark #mapa-filtro-tecnico {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.1);
  color: #e2e8f0;
}
#mdl-mapa-card .mapa-close-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
}
body.dark #mdl-mapa-card .mapa-close-btn {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.1);
  color: #e2e8f0;
}

/* Leaflet overrides for dark theme */
.leaflet-popup-content-wrapper {
  background: #1e2130;
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.leaflet-popup-tip { background: #1e2130; }
.leaflet-popup-close-button { color: #94a3b8 !important; }

@media (max-width: 1200px) {
  .k-grid-crm-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 490px) {
  .k-grid-crm-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #mdl-mapa-card {
    height: 90vh;
    border-radius: 14px;
  }
  .mapa-hdr-responsive {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  .mapa-hdr-responsive > div:last-child {
    width: 100%;
    justify-content: flex-start;
  }
  #mapa-leyenda {
    width: 100%;
    margin-top: 2px;
  }
}

@media (max-width: 1200px) {
  .k-grid-dash-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .k-stat-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .k-grid-crm-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .k-grid-crm-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .k-grid-crm-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 490px) {
  .k-grid-dash-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .k-stat-card {
    padding: 12px;
    gap: 6px;
  }

  .ks-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
    border-radius: 8px;
  }

  .ks-val {
    font-size: 14px;
  }
}

@media (max-width: 490px) {
  .k-grid-dash-5 {
    grid-template-columns: 1fr !important;
  }

  .k-grid-crm-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.k-stat-card {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 20px;
  padding: 20px 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.k-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08);
  border-color: var(--primary);
}

.k-stat-card.ks-active {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.18);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35);
  transform: translateY(-2px);
}

.k-stat-card.ks-active-warn {
  border-color: rgba(245, 158, 11, 0.7);
  background: rgba(245, 158, 11, 0.14);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
  transform: translateY(-2px);
}

@media (max-width: 490px) {
  /* Dashboard KPIs: ícono arriba para que los números quepan */
  .k-grid-dash-5 .k-stat-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 12px !important;
    gap: 6px !important;
  }

  /* CRM KPIs: mantiene emoji a la izquierda, texto a la derecha */
  .k-grid-crm-4 .k-stat-card {
    flex-direction: row !important;
    align-items: center !important;
    padding: 12px !important;
    gap: 10px !important;
  }

  .ks-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }

  .ks-val {
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  .ks-lbl {
    font-size: 10px !important;
  }
}

@media (max-width: 490px) {
  .k-grid-dash-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .k-grid-dash-5 .k-stat-card {
    padding: 10px !important;
    gap: 4px !important;
  }

  .k-grid-crm-4 .k-stat-card {
    padding: 10px !important;
    gap: 8px !important;
  }

  .ks-icon {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }

  .ks-val {
    font-size: 12px !important;
  }

  .ks-lbl {
    font-size: 9px !important;
    letter-spacing: 0.02em !important;
  }
}

.ks-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
}

.k-stat-card > div:last-child {
  min-width: 0;
  flex: 1;
}

.ks-lbl {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.ks-val {
  font-size: clamp(15px, 1.4vw, 22px);
  font-weight: 800;
  color: #0f172a;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  line-height: 1.1;
  min-width: 0;
  word-break: break-all;
}

/* Iconic Colors (Adaptive) */
.ks-icon-pend {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.ks-icon-curs {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

.ks-icon-canc {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.ks-icon-fin {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.ks-icon-user {
  background: rgba(99, 102, 241, 0.1);
  color: #4f46e5;
}

.ks-icon-iva {
  background: rgba(139, 92, 246, 0.1);
  color: #7c3aed;
}

.ks-icon-apr {
  background: rgba(251, 146, 60, 0.1);
  color: #fb923c;
}

body.dark .ks-icon-pend {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
}

body.dark .ks-icon-curs {
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.15);
}

body.dark .ks-icon-canc {
  color: #f87171;
  background: rgba(239, 68, 68, 0.15);
}

body.dark .ks-icon-fin {
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
}

body.dark .ks-icon-user {
  color: #818cf8;
  background: rgba(99, 102, 241, 0.15);
}

body.dark .ks-icon-iva {
  color: #a78bfa;
  background: rgba(139, 92, 246, 0.15);
}

.tl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
  color: #64748b;
}

body.dark .tl {
  color: #94a3b8;
}

.tl.grand {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #0f172a;
}

body.dark .tl.grand {
  color: #ffffff;
}

.tl.grand span:first-child {
  font-size: 18px;
  font-weight: 800;
}

.tl.grand #tt {
  font-size: 28px;
  font-weight: 900;
  color: #6366f1;
  text-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
}

.btns {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 12px;
}

.bprim,
.bsec {
  padding: 12px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
}

.bprim {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: white;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.bprim:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
  filter: brightness(1.1);
}

.bsec {
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.bsec:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
  transform: translateY(-2px);
}

.btn-pdf {
  transition: all 0.3s ease !important;
}

.btn-pdf:hover {
  background: rgba(99, 102, 241, 0.1) !important;
  border-style: solid !important;
  transform: scale(1.02);
}

body.dark .k-stat-card {
  background: rgba(8, 18, 48, 0.75) !important;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(99,102,241,0.18) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
}

body.dark .k-stat-card:hover {
  transform: translateY(-4px);
}

.kv {
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  min-width: 0;
}

body.dark .kv {
  color: #ffffff !important;
}

/* Tarjetas siempre visibles (dashboard): fondo sólido, SIN backdrop-filter.
   backdrop-filter en decenas de tarjetas crea muchas capas GPU que Chrome
   re-rasteriza a una escala incorrecta al volver de otra pestaña con DPI
   fraccionario (125% Windows) → todo "se agranda" hasta refrescar.
   El !important anula TODAS las reglas blur dispersas sobre estos elementos. */
body.dark .k-stat-card,
body.dark .card,
body.dark .job-card,
body.dark .k-col {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* GLOBAL anti-zoom: habia ~315 elementos siempre visibles (botones, inputs,
   selects, chips, badges) con backdrop-filter -> cientos de capas GPU que
   Chrome re-rasteriza a escala incorrecta con DPI 125% al volver de otra
   pestana (todo "se agranda" hasta refrescar). Se mantiene blur SOLO en
   overlays y tarjetas de modal, que son transitorios y no disparan el bug. */
body *:not(.modal-overlay):not(.mdl-card):not(.modal-card):not(.qs-overlay):not(.mapa-overlay):not(.login-box) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.dark .k-stat-card,
body.dark .card,
body.dark .job-card {
  background: linear-gradient(145deg, #0f1e3d, #0c1830) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  border-radius: 20px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Modales: pocos y transitorios, aquí el blur sí aporta y no causa el bug */
body.dark .mdl-card {
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Elevar la tarjeta que se está usando para que sus menús pasen por encima de las demás */
.card:focus-within {
  z-index: 100 !important;
}

/* Permitir que el menú sobresalga solo en las tarjetas que tienen buscador */
body.dark .card:has(.search-container) {
  overflow: visible !important;
}

/* Ajustar el resplandor en las tarjetas con buscador para que no se escape */
body.dark .card:has(.search-container)::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.15), transparent 80%);
}

body.dark .k-stat-card::before,
body.dark .card::before,
body.dark .job-card::before,
body.dark .mdl-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(99, 102, 241, 0.1), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

body.dark .k-stat-card:hover {
  background: rgba(30, 41, 59, 0.85);
}

/* Card que contiene tabla: glow azul integrado en background (no ::before, que queda oculto) */
body.dark .card:has(.data-table) {
  background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(99,102,241,0.12) 0%, transparent 70%), #0e1729 !important;
}
body.dark .data-table th {
  background: rgba(99,102,241,0.06) !important;
}
body.dark .data-table tbody tr:nth-child(odd)  td { background: rgba(255,255,255,0.025) !important; }
body.dark .data-table tbody tr:nth-child(even) td { background: rgba(99,102,241,0.05)   !important; }
body.dark .data-table tbody tr:hover           td { background: rgba(99,102,241,0.14)   !important; }

body.dark .kl {
  color: #94a3b8;
  font-size: 11px;
}

body.dark .kv {
  font-size: 18px;
}

body.dark .sh {
  color: #fafafa;
  border-bottom-color: #27272a;
}

/* Global Semantic Colors (Adaptive) */
.pos {
  color: #059669 !important;
}

/* Green */
.neg {
  color: #dc2626 !important;
}

/* Red */
.war {
  color: #d97706 !important;
}

/* Amber/Orange */
.info {
  color: #2563eb !important;
}

/* Blue */
.apr {
  color: #fb923c !important;
}

/* Orange - Por Aprobar */
.iva-color {
  color: #7c3aed !important;
}

/* Purple */
.user-color {
  color: #4f46e5 !important;
}

/* Indigo */

body.dark .pos {
  color: #34d399 !important;
}

body.dark .neg {
  color: #f87171 !important;
}

body.dark .war {
  color: #fbbf24 !important;
}

body.dark .info {
  color: #60a5fa !important;
}

body.dark .apr {
  color: #fb923c !important;
}

body.dark .iva-color {
  color: #a78bfa !important;
}

body.dark .user-color {
  color: #818cf8 !important;
}

/* Purged old semantic classes */

body.dark .step-badge {
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
}

body.dark input,
body.dark select,
body.dark textarea {
  background: rgba(30, 41, 59, 0.4) !important;
  color: #ffffff;
  border: 1px solid rgba(99, 102, 241, 0.28);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  outline: none;
}
body.dark input:hover,
body.dark select:hover,
body.dark textarea:hover {
  border-color: rgba(99, 102, 241, 0.45);
}

/* Vertical Pro Stepper (Premium Numeric Control) */
.stepper-premium {
  display: inline-flex;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  height: 44px;
  overflow: hidden;
  transition: all 0.2s ease;
  width: 100px;
}

body.dark .stepper-premium {
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.fg .stepper-premium {
  width: 100%;
}

.stepper-premium:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

body.dark .stepper-premium:focus-within {
  background: #0b1120;
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
}

.stepper-premium input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 12px !important;
  width: 100% !important;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #1e293b;
  font-size: 14px;
  -moz-appearance: textfield;
}

body.dark .stepper-premium input {
  color: white;
}

.stepper-premium input::-webkit-outer-spin-button,
.stepper-premium input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.stepper-btns {
  display: flex;
  flex-direction: column;
  border-left: 1px solid #e2e8f0;
  width: 32px;
}

body.dark .stepper-btns {
  border-left-color: rgba(255, 255, 255, 0.1);
}

.stepper-btns button {
  flex: 1;
  background: rgba(255, 255, 255, 0.02);
  border: none;
  color: #94a3b8;
  font-size: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  padding: 0;
}

.stepper-btns button:hover {
  background: var(--primary);
  color: white;
}

.stepper-btns .step-up {
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
}

/* Row Layouts */
.srv-row,
.mat-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 14px;
}

.srv-row .search-container,
.mat-row .search-container {
  flex: 1;
  min-width: 0;
}

.mat-series-input {
  flex: 0 1 180px;
}

.stepper-premium {
  flex-shrink: 0;
}

.rm {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.1);
  color: #ef4444;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rm:hover {
  background: #ef4444;
  color: white;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}

/* Tab Chips for Filtering */
.tab-chip {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

body:not(.dark) .tab-chip {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
}

.tab-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

body:not(.dark) .tab-chip:hover {
  background: #e2e8f0;
  color: #1e293b;
  border-color: #cbd5e1;
}

.tab-chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.srv-row,
.mat-row {
  flex-wrap: wrap;
}

.srv-row .search-container,
.mat-row .search-container {
  flex: 1 1 100%;
}

.stepper-premium {
  flex: 1;
}
}

body.dark input::placeholder,
body.dark textarea::placeholder {
  color: #475569;
  opacity: 0.8;
}

/* ── SELECT PREMIUM GLOBAL ──────────────────────────────────────────────── */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%236366f1' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding: 10px 36px 10px 14px !important;
  background-color: rgba(30, 41, 59, 0.4) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
  color: var(--text, #e2e8f0) !important;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

select:hover {
  border-color: rgba(99,102,241,0.45) !important;
  background-color: rgba(30, 41, 59, 0.55) !important;
}

select:focus {
  border-color: rgba(99,102,241,0.6) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15) !important;
  background-color: rgba(30, 41, 59, 0.6) !important;
}

/* ─── INPUTS DE FECHA/HORA PREMIUM (global) ─────────────────────────────── */
input[type="date"], input[type="time"], input[type="month"], input[type="datetime-local"] {
  /* color-scheme:dark fuerza el CALENDARIO NATIVO emergente en oscuro
     (en Android/Chromium el popup salía blanco y se veía fuera de lugar). */
  color-scheme: dark;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(99,102,241,0.28);
  color: #e2e8f0;
  font-size: 14px;
  font-family: inherit;
  padding: 11px 14px;
  border-radius: 12px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
}
input[type="date"]:hover, input[type="time"]:hover, input[type="month"]:hover, input[type="datetime-local"]:hover {
  border-color: rgba(99,102,241,0.45);
  background: rgba(99,102,241,0.06);
}
input[type="date"]:focus, input[type="time"]:focus, input[type="month"]:focus, input[type="datetime-local"]:focus {
  border-color: rgba(99,102,241,0.65);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15), 0 2px 8px rgba(0,0,0,0.2);
  background: rgba(99,102,241,0.05);
}
/* Ícono de calendario/reloj estilizado (índigo, visible en tema oscuro) */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.85;
  filter: invert(45%) sepia(60%) saturate(2500%) hue-rotate(225deg) brightness(95%);
  transition: opacity 0.15s, transform 0.15s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  transform: scale(1.12);
}
/* Texto del valor de fecha/hora más legible */
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit { color: #e2e8f0; }
input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
/* Placeholder de fecha vacía (dd-mm-aaaa) más tenue */
input[type="date"]:not(:focus)::-webkit-datetime-edit-year-field,
input[type="date"]:not(:focus)::-webkit-datetime-edit-month-field,
input[type="date"]:not(:focus)::-webkit-datetime-edit-day-field { color: #94a3b8; }
/* Modo claro: input de fecha/hora */
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="time"],
[data-theme="light"] input[type="month"],
[data-theme="light"] input[type="datetime-local"] {
  color-scheme: light;
  background: rgba(0,0,0,0.03);
  color: #1e293b;
  border-color: rgba(99,102,241,0.3);
}
[data-theme="light"] input[type="date"]:focus,
[data-theme="light"] input[type="time"]:focus { background: rgba(99,102,241,0.04); }

/* Opciones del dropdown nativo */
select option {
  background-color: #0d1123;
  color: #e2e8f0;
  padding: 8px 14px;
  font-size: 13px;
}

select option:checked,
select option:focus {
  background-color: #4f46e5;
  color: #fff;
}

/* Modo claro */
[data-theme="light"] select {
  background-color: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: #1e293b !important;
}
[data-theme="light"] select option {
  background-color: #fff;
  color: #1e293b;
}
[data-theme="light"] select option:checked {
  background-color: #6366f1;
  color: #fff;
}

body.dark input:focus,
body.dark select:focus,
body.dark textarea:focus {
  border-color: rgba(99, 102, 241, 0.65);
  background: rgba(99, 102, 241, 0.06) !important;
  /* Ring índigo consistente con selects y date inputs premium */
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18), 0 2px 8px rgba(0, 0, 0, 0.25);
  outline: none;
}

/* ══ CUSTOM DROPDOWN PREMIUM ══════════════════════════════════════════════ */
.custom-select {
  position: relative;
  user-select: none;
}

.cs-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 16px;
  background: rgba(30, 41, 59, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text, #e2e8f0);
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.cs-selected:hover {
  border-color: rgba(99,102,241,0.45);
  background: rgba(99,102,241,0.06);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1), 0 2px 8px rgba(0,0,0,0.15);
}

.custom-select.open .cs-selected {
  border-color: rgba(99,102,241,0.6);
  background: rgba(99,102,241,0.08);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15), 0 2px 8px rgba(0,0,0,0.2);
}

.cs-selected::after {
  content: '▾';
  font-size: 16px;
  color: #6366f1;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.custom-select.open .cs-selected::after {
  transform: rotate(180deg);
}

.cs-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: rgba(13, 17, 35, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(99,102,241,0.35);
  border-radius: 16px;
  z-index: 9999;
  display: none;
  padding: 6px;
  box-shadow:
    0 0 0 1px rgba(99,102,241,0.08),
    0 4px 6px -2px rgba(0,0,0,0.3),
    0 24px 64px -8px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.05);
  animation: csDropIn 0.18s ease;
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
}

@keyframes csDropIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.custom-select.open .cs-options { display: block; }

/* Scrollbar */
.cs-options::-webkit-scrollbar { width: 4px; }
.cs-options::-webkit-scrollbar-track { background: transparent; }
.cs-options::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.3); border-radius: 4px; }
.cs-options::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.6); }

.cs-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: #cbd5e1;
  transition: background 0.12s, color 0.12s, transform 0.1s;
  position: relative;
}

.cs-option:hover {
  background: rgba(99,102,241,0.12);
  color: #a5b4fc;
  transform: translateX(2px);
}

.cs-option.active {
  background: linear-gradient(90deg, rgba(99,102,241,0.18), rgba(139,92,246,0.1));
  color: #818cf8;
  font-weight: 600;
}

.cs-option.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 3px;
  background: linear-gradient(180deg, #6366f1, #8b5cf6);
  border-radius: 0 3px 3px 0;
}

/* Light theme overrides */
[data-theme="light"] .cs-selected {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.1);
  color: #1e293b;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

[data-theme="light"] .cs-selected:hover {
  border-color: rgba(99,102,241,0.4);
  background: rgba(99,102,241,0.04);
}

[data-theme="light"] .cs-options {
  background: rgba(255,255,255,0.97);
  border-color: rgba(99,102,241,0.2);
  box-shadow: 0 16px 50px rgba(0,0,0,0.15), 0 4px 16px rgba(99,102,241,0.08);
}

[data-theme="light"] .cs-option { color: #334155; }
[data-theme="light"] .cs-option:hover { background: rgba(99,102,241,0.07); color: #4f46e5; }
[data-theme="light"] .cs-option.active { background: rgba(99,102,241,0.1); color: #4f46e5; }
/* ══ END CUSTOM DROPDOWN ══════════════════════════════════════════════════ */

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

body.dark .fg {
  margin-bottom: 8px;
}

body.dark input:focus,
body.dark select:focus,
body.dark textarea:focus {
  background: #0a1628;
  border-color: #3b82f6;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(59, 130, 246, 0.1);
}

body.dark input::placeholder,
body.dark textarea::placeholder {
  color: #4b5563;
}

body.dark table td {
  border-bottom-color: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
}

body.dark th {
  background: rgba(255, 255, 255, 0.03);
  color: #94a3b8;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark td {
  border-color: #27272a;
  color: #d4d4d8;
}

body.dark tr:hover td {
  background: #27272a;
}

body.dark .mdl-card {
  background: rgba(15, 23, 42, 0.8) !important;
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 20px rgba(99, 102, 241, 0.1);
}

body.dark .mdl-u-card {
  background: #18181b;
  border-color: #27272a;
  color: #fafafa;
}

body.dark .login-fg label {
  color: #a1a1aa;
}

body.dark .login-fg input {
  background: #27272a;
  color: #fafafa;
  border-color: #3f3f46;
}

body.dark .mdl-u-title {
  color: #fafafa;
}

body.dark .k-col {
  background: rgba(8, 18, 48, 0.7) !important;
  border-color: rgba(99,102,241,0.12) !important;
  border-radius: 20px !important;
}

body.dark .k-hdr {
  background: rgba(99,102,241,0.08) !important;
  color: #f8fafc !important;
  border-bottom: 1px solid rgba(99,102,241,0.15) !important;
}

body.dark .k-cnt {
  background: rgba(99,102,241,0.18);
  color: #c7d2fe;
}

body.dark .k-item {
  background: #0f1e3d !important;
  border-color: rgba(99,102,241,0.12) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

body.dark .k-cli {
  color: #f8fafc;
}

body.dark .k-desc {
  color: #94a3b8;
}

body.dark .k-cod {
  color: #818cf8;
}

body.dark .search-bar input {
  background: #27272a;
  color: #fafafa;
}

.btn-hdr-blue {
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
  padding: 8px 20px;
  font-weight: 600;
  white-space: nowrap;
}

body.dark .btn-hdr-blue {
  background: #1e1b4b;
  border-color: #312e81;
  color: #a5b4fc;
}

.btn-hdr-red {
  background: var(--danger);
  color: #fff;
  border: 1px solid var(--danger);
  padding: 8px 20px;
  font-weight: 600;
  white-space: nowrap;
}

body.dark .btn-hdr-red {
  background: #450a0a;
  border-color: #7f1d1d;
  color: #fca5a5;
}

/* Estilos para los botones de acción del footer */
.theme-btn,
#tb-cfg,
.btn-pass {
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.theme-btn:hover,
#tb-cfg:hover,
.btn-pass:hover {
  background: rgba(99, 102, 241, 0.1);
  transform: translateY(-2px);
}

.btn-pass:hover {
  background: rgba(245, 158, 11, 0.25) !important;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.5);
  border-color: rgba(245, 158, 11, 0.7) !important;
}

body.dark .btn-pass:hover {
  background: rgba(245, 158, 11, 0.1) !important;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
}

#tb-cfg:hover {
  transform: translateY(-2px) rotate(30deg);
  opacity: 1 !important;
}

.conn-pill-base:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}

body.dark .theme-btn:hover,
body.dark #tb-cfg:hover,
body.dark .btn-pass:hover {
  background: rgba(255, 255, 255, 0.05);
}

body.dark .sidebar.collapsed .btn-pass {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.5);
}

/* Hover glow para botones del footer */
.btn-hdr-blue:hover:not(:disabled) {
  background: #4f46e5;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.5);
  transform: translateY(-1px);
}

body.dark .btn-hdr-blue:hover:not(:disabled) {
  background: #312e81 !important;
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
  transform: translateY(-1px);
}

.btn-hdr-red:hover:not(:disabled) {
  background: #dc2626;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
  transform: translateY(-1px);
}

body.dark .btn-hdr-red:hover:not(:disabled) {
  background: #7f1d1d !important;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
  transform: translateY(-1px);
}

.btn-pass:hover:not(:disabled) {
  background: #b45309 !important;
  box-shadow: 0 0 12px rgba(217, 119, 6, 0.5) !important;
  transform: translateY(-1px) !important;
}

body.dark .btn-pass:hover:not(:disabled) {
  background: #6b3007 !important;
  box-shadow: 0 0 15px rgba(217, 119, 6, 0.5) !important;
  transform: translateY(-1px) !important;
}



@media (max-width: 490px) {
  html {
    height: var(--app-height, 100dvh) !important;
    overflow: hidden !important; /* solo en html: evita scroll del doc sin afectar teclado */
  }
  body {
    height: var(--app-height, 100dvh) !important;
    /* Sin overflow en body: permite que el teclado virtual funcione en Capacitor WebView */
  }

  .app-layout {
    flex-direction: column;
    /* Header es fixed y fuera del flujo; safe-top evita chocar con notch/status bar. */
    padding-top: calc(60px + var(--safe-top)) !important;
    box-sizing: border-box !important;
    height: var(--app-height, 100dvh) !important;
    min-height: unset !important;
    margin: 0 !important;
  }

  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(8px + var(--safe-top)) 16px 8px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    /* fixed garantiza que NUNCA se desplace — sticky puede fallar en WebView de Capacitor */
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    border-bottom: 1px solid rgba(229, 229, 227, 0.6);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    height: calc(60px + var(--safe-top));
  }

  body.dark .mobile-header {
    background: rgba(1, 4, 19, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom-color: rgba(255, 255, 255, 0.05);
  }

  .mobile-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 16px;
    flex: 1;
    order: 1;
    /* Logo first */
  }

  .mobile-logo span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-toggle {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 8px;
    font-size: 22px;
    cursor: pointer;
    color: var(--primary);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.3);
    order: 2;
    /* Toggle second (right) */
  }

  .mobile-toggle:active {
    transform: scale(0.9);
    background: rgba(99, 102, 241, 0.2);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.6), inset 0 0 0 1px var(--primary);
  }

  /* El sidebar hereda todos los estilos visuales del PC.
     Solo el posicionamiento/deslizamiento se controla en el bloque MOBILE SPACE FIX. */

  .menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: 1250;
  }

  .menu-overlay.on {
    display: block;
  }

  .main-content {
    padding: 20px 16px;
  }

  .k-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .card {
    padding: 16px;
    border-radius: 16px;
  }

  .row2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #dash-body,
  #cli-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;
    padding: 0 12px;
  }

  table {
    min-width: auto;
  }

  table th,
  table td {
    padding: 8px 6px;
    font-size: 11px;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

/* ─── SELECTOR DE MATERIALES INTELIGENTE ─── */
.search-container {
  position: relative;
  width: 100%;
}

table th,
table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid #e5e5e3;
  font-size: 13px;
}

.search-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #e5e5e3;
  font-size: 14px;
  transition: all 0.2s;
}

.search-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 280px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #e5e5e3;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  z-index: 2000;
  display: none;
}

.search-results::-webkit-scrollbar {
  width: 6px;
}

.search-results::-webkit-scrollbar-track {
  background: transparent;
}

.search-results::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 10px;
}

.search-results.active {
  display: block;
}

.search-item {
  padding: 10px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-item:hover {
  background: #f5f5f4;
}

.search-item .price {
  font-weight: 600;
  color: #6366f1;
  font-size: 12px;
}

body.dark .search-input {
  background: #18181b;
  border-color: #27272a;
  color: #fff;
}

body.dark .search-results {
  background: #0f1e3d !important;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: none;
}

body.dark .search-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

body.dark .search-results::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}

/* ─── MEJORAS UX (TOASTS, LOADER, MODAL) ─── */
.loader-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  z-index: 9999;
  transition: width 0.3s ease;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toast {
  min-width: 280px;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 16px 20px;
  border-radius: 16px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: toast-in 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

body.dark .toast {
  background: rgba(30, 30, 30, 0.85);
  border-color: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.toast.hiding {
  opacity: 0;
  transform: translateX(50px);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }

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

.toast-icon {
  font-size: 20px;
}

.toast-msg {
  font-size: 14px;
  font-weight: 500;
}

.toast-success .toast-icon {
  color: #22c55e;
}

.toast-error .toast-icon {
  color: #ef4444;
}

.toast-info .toast-icon {
  color: #3b82f6;
}

.toast-warn .toast-icon {
  color: #f59e0b;
}

.mdl-confirm {
  width: 100%;
  max-width: 400px;
  padding: 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.mdl-confirm h3 {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.mdl-confirm p {
  color: #94a3b8;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.mdl-confirm .confirm-icon {
  width: 64px;
  height: 64px;
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 10px;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.mdl-confirm .btns {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

/* ─── PREMIUM MODAL STYLES ─── */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease;
}

.modal-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 90%;
  max-width: 450px;
  position: relative;
  overflow: hidden;
}

body.dark .modal-card,
body.dark .mdl-confirm {
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  border-radius: 32px;
}

.modal-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(99, 102, 241, 0.1), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

@keyframes modalSlide {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes confirmPop {
  from {
    opacity: 0;
    transform: scale(0.88) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.sh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.sh span {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.close-btn {
  background: rgba(0, 0, 0, 0.05);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  color: #64748b;
  transition: all 0.2s;
}

body.dark .close-btn {
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
}

.close-btn:hover {
  background: #ef4444;
  color: white;
  transform: rotate(90deg);
}

.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 8px;
  display: block;
}

body.dark .form-group label {
  color: #94a3b8;
}

.modal-card input[type="number"],
.modal-card input[type="text"],
.modal-card select {
  width: 100%;
  padding: 12px 16px;
  padding-left: 30px;
  /* Espacio para el símbolo $ en inputs numéricos */
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.5);
  font-size: 15px;
  font-weight: 500;
  transition: all 0.2s;
  color: inherit;
  font-family: inherit;
}

body.dark .modal-card input[type="number"],
body.dark .modal-card input[type="text"],
body.dark .modal-card select {
  background: rgba(30, 41, 59, 0.5) !important;
  border-color: rgba(59, 130, 246, 0.2);
  color: white;
  box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

.modal-card input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
  background: #fff;
}

body.dark .modal-card input:focus {
  background: #0f1e3d;
}

.modal-card input::placeholder {
  color: #94a3b8;
  opacity: 0.6;
}

body.dark .modal-card input::placeholder {
  color: #64748b;
}

.bprim {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: white;
  border: none;
  padding: 14px 24px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.bprim:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
  filter: brightness(1.1);
}

.bprim:active {
  transform: translateY(0);
}

/* ─── DASHBOARD RECENT JOBS CARDS ─── */
.jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 10px;
}

#cli-body {
  overflow-x: auto;
}

#dash-body {
  padding: 15px;
}

.job-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.job-card:hover {
  border-color: var(--primary);
}

.jc-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
}

.jc-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: white;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.jc-meta {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.jc-code {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
}

.jc-client {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jc-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jc-loc {
  font-size: 11px;
}

.jc-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.jc-price {
  font-weight: 700;
  font-size: 14px;
  color: #0f172a;
}

.badge {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.status-p {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.status-c {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.status-x {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.status-f {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

/* ─── PREMIUM TABLES (Original Uplink Integration) ─── */
.table-premium {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
  margin-top: 15px;
  background: transparent !important;
}

.table-premium th {
  padding: 18px 16px;
  text-align: left;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #fff;
  background: rgba(255, 255, 255, 0.08) !important;
  border-bottom: 2px solid #6366f1;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  text-shadow: 0 0 10px rgba(99, 102, 241, 0.6);
  white-space: nowrap;
}

.table-premium td {
  padding: 18px 20px;
  border: none;
  font-size: 13px;
  color: #f1f5f9;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.02) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Redondear bordes de la fila completa */
.table-premium td:first-child {
  border-radius: 12px 0 0 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
}

.table-premium td:last-child {
  border-radius: 0 12px 12px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.table-premium tr:hover td {
  background: rgba(99, 102, 241, 0.08) !important;
  border-color: rgba(99, 102, 241, 0.3);
  transform: translateY(-2px);
  /* Pequeña elevación */
  box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.5), 0 0 15px rgba(99, 102, 241, 0.1);
  color: #fff;
}

/* Categorías Estilo Clásico Facha */
.cat-hdr {
  background: rgba(99, 102, 241, 0.15) !important;
  color: #818cf8 !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.1em;
  border-left: 4px solid #6366f1;
  padding: 12px 20px !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.2) !important;
}

/* Modo Claro */
body:not(.dark) .table-premium th {
  color: #64748b;
  border-bottom-color: #e2e8f0;
}

body:not(.dark) .table-premium td {
  color: #1e293b;
  border-bottom-color: #f1f5f9;
}

body:not(.dark) .table-premium tr:hover {
  background: #f8fafc;
}

.table-premium .btn-icon {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.table-premium .btn-icon:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateY(-1px);
}

body.dark .table-premium tr:hover td {
  background: transparent !important;
}

.table-premium .btn-icon {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  border: 1px solid rgba(99, 102, 241, 0.2);
  padding: 8px;
  /* Mas cuadrado */
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

/* Alineación de acciones en glosario */
#srv-table td:last-child,
#mat-table td:last-child {
  display: flex;
  flex-direction: column;
  /* Stacked: Pencil above Trash */
  gap: 6px;
  justify-content: center;
  align-items: flex-end;
}

.table-premium .btn-icon:hover {
  background: var(--primary);
  color: white;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* ─── PREMIUM SEARCH HEADERS ─── */
.search-card-premium {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px !important;
  margin-bottom: 20px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 20px;
}

body.dark .search-card-premium {
  background: rgba(8, 18, 48, 0.8) !important;
  border-color: rgba(99,102,241,0.2) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
}

.sh-premium {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

body.dark .sh-premium {
  color: #f8fafc;
}

.search-group-premium {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.search-group-premium input,
.search-group-premium select {
  flex: 1;
  min-width: 200px;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  border-radius: 12px !important;
}

body.dark .search-group-premium input,
body.dark .search-group-premium select {
  background: rgba(30, 41, 59, 0.5) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  color: white !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 16px !important;
  box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(10px);
}

body.dark .search-group-premium input:focus,
body.dark .search-group-premium select:focus {
  background: #070b14 !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2), 0 0 20px rgba(59, 130, 246, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.8) !important;
  outline: none;
  transform: scale(1.01);
}

.search-group-premium input,
.search-group-premium select {
  transition: all 0.3s ease;
}

.btn-icon-premium {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  cursor: pointer;
  font-size: 18px;
  color: #64748b;
  transition: all 0.2s;
}

body.dark .btn-icon-premium {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

.btn-icon-premium:hover {
  background: var(--primary);
  color: white;
  transform: rotate(180deg);
  border-color: var(--primary);
}

body.dark .job-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.05);
}

body.dark .jc-client {
  color: #f8fafc;
}

body.dark .jc-price {
  color: #f8fafc;
}

body.dark .job-card:hover {
  background: rgba(255, 255, 255, 0.05);
}

body.dark .dash-hdr h1 {
  color: #f8fafc !important;
}

body.dark .dash-hdr p {
  color: #94a3b8 !important;
}

/* ─── PREMIUM DASHBOARD IDENTITY ─── */

/* Characteristic KPI Colors & Glows */
/* Characteristic KPI Colors & Glows (Iluminación Dinámica) */
.k-stat-card:has(.user-color):hover,
.k-stat-card:has(.ks-icon-user):hover {
  border-color: #6366f1 !important;
  box-shadow: 0 15px 45px rgba(99, 102, 241, 0.4), inset 0 0 20px rgba(99, 102, 241, 0.2) !important;
}

.k-stat-card:has(.pos):hover,
.k-stat-card:has(.ks-icon-fin):hover {
  border-color: #10b981 !important;
  box-shadow: 0 15px 45px rgba(16, 185, 129, 0.4), inset 0 0 20px rgba(16, 185, 129, 0.2) !important;
}

.k-stat-card:has(.neg):hover,
.k-stat-card:has(.ks-icon-canc):hover {
  border-color: #ef4444 !important;
  box-shadow: 0 15px 45px rgba(239, 68, 68, 0.4), inset 0 0 20px rgba(239, 68, 68, 0.2) !important;
}

.k-stat-card:has(.war):hover,
.k-stat-card:has(.ks-icon-pend):hover {
  border-color: #f59e0b !important;
  box-shadow: 0 15px 45px rgba(245, 158, 11, 0.4), inset 0 0 20px rgba(245, 158, 11, 0.2) !important;
}

.k-stat-card:has(.ks-icon-sintec):hover {
  border-color: #06b6d4 !important;
  box-shadow: 0 15px 45px rgba(6, 182, 212, 0.4), inset 0 0 20px rgba(6, 182, 212, 0.2) !important;
}
#crm-k-sintec { color: #06b6d4 !important; }
body.dark #crm-k-sintec { color: #22d3ee !important; }

.k-stat-card:has(.iva-color):hover,
.k-stat-card:has(.ks-icon-iva):hover {
  border-color: #8b5cf6 !important;
  box-shadow: 0 15px 45px rgba(139, 92, 246, 0.4), inset 0 0 20px rgba(139, 92, 246, 0.2) !important;
}

.k-stat-card:has(.info):hover,
.k-stat-card:has(.ks-icon-curs):hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 15px 45px rgba(59, 130, 246, 0.4), inset 0 0 20px rgba(59, 130, 246, 0.2) !important;
}

.k-stat-card:has(.apr):hover,
.k-stat-card:has(.ks-icon-apr):hover {
  border-color: #fb923c !important;
  box-shadow: 0 15px 45px rgba(251, 146, 60, 0.4), inset 0 0 20px rgba(251, 146, 60, 0.2) !important;
}

/* KPIs de Personal — misma iluminación dinámica que el CRM, con el color de cada rol */
.k-stat-card.per-kpi:hover,
.k-stat-card.per-kpi.is-active {
  border-color: rgb(var(--kc)) !important;
  box-shadow: 0 15px 45px rgba(var(--kc), 0.4), inset 0 0 20px rgba(var(--kc), 0.2) !important;
  transform: translateY(-2px);
}

/* El filtro activo mantiene además un realce de fondo sutil del color del rol */
.k-stat-card.per-kpi.is-active {
  background: rgba(var(--kc), 0.10) !important;
}

/* Icons Glow Enhancement */
.ks-icon-user {
  background: rgba(99, 102, 241, 0.2) !important;
  color: #6366f1 !important;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
}

.ks-icon-fin {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #10b981 !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.ks-icon-canc {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #ef4444 !important;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}

.ks-icon-pend {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #f59e0b !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}

.ks-icon-curs {
  background: rgba(3b, 82, 246, 0.2) !important;
  color: #3b82f6 !important;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}

.ks-icon-iva {
  background: rgba(139, 92, 246, 0.2) !important;
  color: #8b5cf6 !important;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
}

/* Click Effects (Dark Blue) */
.k-stat-card:active,
.tb:active {
  transform: scale(0.96);
  background: rgba(99, 102, 241, 0.2) !important;
  color: inherit !important;
  border-color: #4f46e5 !important;
}

body.dark .k-stat-card:active,
body.dark .tb:active {
  background: #1e1b4b !important;
  color: white !important;
}

.k-stat-card:active .ks-lbl,
.k-stat-card:active .ks-val,
.k-stat-card:active .ks-icon {
  color: white !important;
}

/* Sidebar Active State (Adaptive Premium Blue) */
.tb.on {
  background: rgba(99, 102, 241, 0.1) !important;
  /* Lighter blue for light mode */
  color: #4f46e5 !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
  font-weight: 700;
  position: relative;
}

body.dark .tb.on {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(139, 92, 246, 0.12)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  text-shadow: none !important;
}

.tb.on::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 4px;
  background: #6366f1;
  border-radius: 0 4px 4px 0;
  box-shadow: 2px 0 10px rgba(99, 102, 241, 0.6);
}

/* ─── Premium Dashboard Enhancements ─── */
.jobs-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 20px !important;
  margin-top: 10px !important;
}

.job-card {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 24px !important;
  padding: 22px !important;
  cursor: pointer !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  animation: slideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards !important;
  color: #1e293b !important;
}

body.dark .job-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

.job-card:hover {
  transform: translateY(-10px) scale(1.02) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1), 0 0 20px rgba(99, 102, 241, 0.1) !important;
}

body.dark .job-card:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 20px rgba(99, 102, 241, 0.15) !important;
}

.jc-hdr {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.jc-avatar {
  width: 52px !important;
  height: 52px !important;
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: white !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.5) !important;
}

.jc-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.jc-code {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  color: #6366f1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

.jc-client {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: inherit !important;
  letter-spacing: -0.01em !important;
}

.jc-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.jc-loc {
  font-size: 13px !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.dark .jc-loc {
  color: #94a3b8 !important;
}

.jc-stats {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 6px !important;
}

.jc-price {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  color: inherit !important;
  letter-spacing: -0.5px !important;
}

.badge {
  padding: 5px 12px !important;
  border-radius: 20px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}


.status-p {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #f59e0b !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.15) !important;
}

.status-c {
  background: rgba(59, 130, 246, 0.12) !important;
  color: #60a5fa !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.15) !important;
}

.status-f {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #34d399 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.15) !important;
}

.status-x {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #f87171 !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.15) !important;
}

body.dark .status-p {
  color: #fbbf24 !important;
}

body.dark .status-c {
  color: #60a5fa !important;
}

body.dark .status-f {
  color: #34d399 !important;
}

body.dark .status-x {
  color: #f87171 !important;
}

/* Section Header Fix */
.sh-premium {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  padding: 8px 0 !important;
  position: relative !important;
  border-bottom: 1px solid #e2e8f0;
}

body.dark .sh-premium {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* Separator borders that adapt to light/dark mode */
.section-divider-bottom {
  border-bottom: 1px solid #e2e8f0;
}
body.dark .section-divider-bottom {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.sh-count {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  color: rgba(148, 163, 184, 0.5) !important;
  background: rgba(255, 255, 255, 0.03);
  padding: 2px 8px;
  border-radius: 6px;
}

.btn-icon-premium,
.btn-action-premium {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  padding: 8px 18px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon-premium:hover,
.btn-action-premium:hover {
  background: #6366f1 !important;
  color: #fff !important;
  border-color: #6366f1 !important;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* HIGH-PRIORITY ACTION BUTTONS */
.btn-edit-premium,
.btn-delete-premium {
  background: rgba(99, 102, 241, 0.08) !important;
  border: 1px solid rgba(99, 102, 241, 0.15) !important;
  color: #6366f1 !important;
}

body.dark .btn-edit-premium,
body.dark .btn-delete-premium {
  background: rgba(99, 102, 241, 0.1) !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  color: #a5b4fc !important;
}



/* ─── MOBILE SPACE FIX ─── */
@media (max-width: 490px) {
  .app-layout {
    display: block !important;
    width: 100% !important;
  }

  .sidebar {
    position: fixed !important;
    left: -300px !important;
    top: 0 !important;
    bottom: 0 !important;        /* cubre hasta el borde real de pantalla */
    height: auto !important;     /* top+bottom define la altura, no dvh */
    width: 260px !important;
    z-index: 5000 !important;
    transition: left 0.3s ease;
    margin: 0 !important;
    padding: 24px 12px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .sidebar.open {
    left: 0 !important;
  }

  /* Nav scrolleable para que el footer siempre esté visible */
  .sidebar .tabs {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Symmetry fixes for Mobile Sidebar */
  .sidebar-footer {
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 3px !important;
    padding-top: 6px !important;
    flex-shrink: 0 !important;
  }

  .sidebar-footer .version-tag {
    margin: 0 !important;
    line-height: 1 !important;
    font-size: 10px !important;
  }

  .sidebar-footer .footer-actions {
    gap: 6px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .sidebar-footer .footer-actions .theme-btn,
  .sidebar-footer .footer-actions .footer-btn,
  .sidebar-footer .footer-actions #tb-cfg {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
  }

  .sidebar-footer .user-badge {
    padding: 6px 10px !important;
    border-radius: 12px !important;
  }

  .sidebar-footer #badge-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  .sidebar-footer .btn-pass {
    padding: 6px 8px !important;
    min-height: unset !important;
    height: 30px !important;
    width: 30px !important;
  }

  .sidebar-footer #btn-usuarios,
  .sidebar-footer #btn-logout {
    padding: 8px 14px !important;
    min-height: unset !important;
    font-size: 13px !important;
  }

  .sidebar .logo {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 14px 18px !important;
    margin-bottom: 15px !important;
    box-sizing: border-box !important;
  }

  .sidebar .tabs {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    align-items: stretch !important;
    width: 100% !important;
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }


  .main-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 20px 16px !important;
    display: block !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .card {
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  .row2,
  .fgrid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }

  /* Cotizador: reordenar pasos 1→2→3→4→5 en móvil */
  .row-cot {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .row-cot .col-mob-contents {
    display: contents !important;
  }

  .row-cot .o1 {
    order: 1;
  }

  .row-cot .o2 {
    order: 2;
  }

  .row-cot .o3 {
    order: 3;
  }

  .row-cot .o4 {
    order: 4;
  }

  .row-cot .o5 {
    order: 5;
  }

  .k-stats-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  body,
  .main-content {
    margin: 0 !important;
  }

  /* .app-layout usa padding-top en vez de margin — no incluir en el reset de margin */

  .main-content {
    /* Hereda la altura del padre .app-layout (que ya usa --app-height correcto)
       Esto funciona igual en Chrome móvil (con barra browser) y APK Capacitor */
    height: 100% !important;
    padding-bottom: calc(16px + var(--safe-bottom)) !important;
    overflow-y: auto !important;
  }

  /* Secciones llenan el viewport en móvil: evita fondo oscuro debajo del contenido */
  .sec.on {
    min-height: calc(100% - 40px);
  }
  /* CRM y MSG manejan su propio scroll — no aplicar min-height */
  #s-crm.sec.on,
  #s-msg.sec.on {
    min-height: unset !important;
  }
}

body.dark .btn-success-premium:hover {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: #10b981 !important;
  color: #34d399 !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4) !important;
}

/* ── Glosario search ─────────────────────────────────────────────────────────── */
#gls-search {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text, #e2e8f0);
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}
#gls-search::placeholder {
  color: #64748b;
}
body:not(.dark) #gls-search {
  color: #1e293b;
}

@media (max-width: 490px) {
  .job-card {
    width: auto !important;
    margin: 0 8px 14px 8px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 490px) {
  #dash-body {
    margin: 0 !important;
    padding: 12px !important;
    overflow-x: hidden !important;
  }

  .job-card {
    padding: 12px !important;
    gap: 8px !important;
    margin: 0 0 12px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
  }

  .jc-avatar {
    width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }

  .jc-hdr {
    gap: 8px !important;
  }

  .jc-code {
    font-size: 10px !important;
  }

  .jc-client {
    font-size: 13px !important;
  }

  .jc-body {
    gap: 6px !important;
  }

  .jc-loc {
    font-size: 11px !important;
  }

  .jc-price {
    font-size: 13px !important;
  }
}

@media (max-width: 456px) {
  #dash-body {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .job-card {
    padding: 8px 10px !important;
    gap: 5px !important;
    width: calc(100% - 32px) !important;
    margin: 0 auto 8px 8px !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .jc-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
  }

  .jc-code {
    font-size: 9px !important;
  }

  .jc-client {
    font-size: 11px !important;
  }

  .jc-body {
    gap: 4px !important;
  }

  .jc-loc {
    font-size: 10px !important;
  }

  .jc-price {
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 80px !important;
  }

  .jc-stats {
    gap: 4px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  .jc-stats > div {
    min-width: 0 !important;
    flex-shrink: 1 !important;
    overflow: hidden !important;
  }
}

/* ─── MOBILE PERFORMANCE ─── */
@media (max-width: 490px) {
  /* Simplificar transiciones: solo animar propiedades baratas */
  .job-card,
  .card,
  .btn,
  .tab,
  input,
  select,
  button {
    transition: border-color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease !important;
  }

  /* Desactivar backdrop-filter en tarjetas — muy costoso en móvil */
  .job-card,
  .card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Desactivar hover con transform — en touch dispara al tocar y se siente raro */
  .job-card:hover,
  .card:hover {
    transform: none !important;
  }

  /* Sidebar: solo animar la posición, no todo */
  .sidebar {
    transition: left 0.25s ease !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.98) !important;
  }

  body.dark .sidebar {
    background: rgba(1, 4, 19, 0.98) !important;
  }

  /* Forzar compositing GPU en elementos que se mueven */
  .sidebar,
  .job-card {
    will-change: transform;
    transform: translateZ(0);
  }
}
/* ─── Paginación ─────────────────────────────────────────────────────────── */
.pag-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(99,102,241,0.3);
  background: rgba(99,102,241,0.06);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.pag-btn:hover:not(:disabled) { background: rgba(99,102,241,0.15); }
.pag-btn:disabled { opacity: 0.35; cursor: default; }
.pag-info { font-size: 12px; color: var(--muted, #9ca3af); font-weight: 500; }


/* ── CUSTOM SELECT PREMIUM ──────────────────────────────────────────────────── */
/* .cs-input es un <input> dentro de .fg — hereda TODOS los estilos de .fg input.
   Solo agregamos lo mínimo específico del custom select. */
.cs-wrap { position: relative; width: 100%; }

.cs-input { cursor: pointer; }
.cs-input:focus { cursor: text; }

.cs-wrap.cs-open .cs-input {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,0.1), 0 1px 3px rgba(0,0,0,0.06) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-color: transparent !important;
}

/* Panel de resultados */
.cs-panel {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% - 1px);
  background: #fff;
  border: 1px solid #6366f1;
  border-top: none;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  box-shadow: 0 16px 40px rgba(99,102,241,0.13), 0 4px 16px rgba(0,0,0,0.08);
  z-index: 9999;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.22s cubic-bezier(0.4,0,0.2,1), opacity 0.18s;
}

.cs-wrap.cs-open .cs-panel {
  max-height: 260px;
  opacity: 1;
  pointer-events: auto;
  overflow-y: auto;
}

.cs-list {
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(99,102,241,0.3) transparent;
}
.cs-list::-webkit-scrollbar { width: 4px; }
.cs-list::-webkit-scrollbar-track { background: transparent; }
.cs-list::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.3); border-radius: 4px; }

.cs-opt {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #1e293b;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-opt:hover { background: rgba(99,102,241,0.08); color: #6366f1; }
.cs-opt.cs-sel { background: rgba(99,102,241,0.1); color: #6366f1; font-weight: 600; }
.cs-opt.cs-ph { color: #94a3b8; font-style: italic; pointer-events: none; }
.cs-opt mark {
  background: rgba(99,102,241,0.18); color: #6366f1;
  border-radius: 3px; font-weight: 700; font-style: normal;
}

/* Dark mode */
body.dark .cs-panel {
  background: #0f1e3d;
  border-color: #6366f1;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.4);
}
body.dark .cs-opt { color: #d1d5db; }
body.dark .cs-opt:hover { background: rgba(99,102,241,0.15); color: #818cf8; }
body.dark .cs-opt.cs-sel { background: rgba(99,102,241,0.2); color: #818cf8; }
body.dark .cs-opt mark { background: rgba(99,102,241,0.3); color: #818cf8; }

/* ── Selector de categoría de fotos ─────────────────────────────── */
.foto-cat-selector {
  display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;
}
.foto-cat-btn {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
  border: 1px solid rgba(99,102,241,0.25); color: #64748b;
  background: transparent; transition: all 0.15s; user-select: none;
}
.foto-cat-btn input[type="radio"] { display: none; }
.foto-cat-btn.active, .foto-cat-btn:has(input:checked) {
  background: rgba(99,102,241,0.12); color: #6366f1;
  border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
}
body.dark .foto-cat-btn { color: #94a3b8; border-color: rgba(99,102,241,0.2); }
body.dark .foto-cat-btn.active, body.dark .foto-cat-btn:has(input:checked) {
  background: rgba(99,102,241,0.2); color: #818cf8; border-color: #818cf8;
}

/* ── Filtro fechas Dashboard ─────────────────────────────────────── */
.dash-filter-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px; padding: 10px 16px; margin-bottom: 20px;
}
.df-label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.df-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.df-btn {
  background: transparent; border: none; color: #64748b;
  font-size: 12px; font-weight: 600; padding: 5px 13px;
  border-radius: 10px; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.df-btn:hover { background: rgba(99,102,241,0.12); color: #c7d2fe; }
.df-btn.active { background: rgba(99,102,241,0.18); color: var(--primary); box-shadow: inset 0 0 0 1px rgba(99,102,241,0.35); }
.df-divider { width: 1px; height: 20px; background: rgba(255,255,255,0.08); margin: 0 4px; }
.df-custom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.df-custom input[type="date"] {
  border: 1px solid rgba(99,102,241,0.28);
  color: #cbd5e1; font-size: 11px; padding: 6px 10px; border-radius: 10px;
  width: 130px;
  /* fondo, focus y el ícono premium se heredan del estilo global de input[type=date] */
}
.df-sep { font-size: 12px; color: #475569; }
.df-aplicar {
  background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.3);
  color: var(--primary); font-size: 11px; font-weight: 700; padding: 5px 12px;
  border-radius: 10px; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.df-aplicar:hover { background: rgba(99,102,241,0.25); }
.df-aplicar.active { background: rgba(99,102,241,0.25); box-shadow: inset 0 0 0 1px rgba(99,102,241,0.5); }
.df-select {
  font-size: 12px; font-weight: 600; color: #94a3b8;
  background: rgba(15,23,42,0.85); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 4px 8px; cursor: pointer; max-width: 160px;
}
.df-select:focus { outline: none; border-color: rgba(99,102,241,0.5); }
@media (max-width: 600px) { .df-divider { display: none; } .df-custom { width: 100%; } .df-select { max-width: 130px; } }

/* ── Comentarios modal ───────────────────────────────────────────── */
.com-item { padding:10px 12px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.05); border-radius:10px; margin-bottom:6px; }
.com-mio { border-color: rgba(99,102,241,0.2); background: rgba(99,102,241,0.05); }
.com-mencionado { border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.07); }
.com-mention { color: #6366f1; font-weight: 700; background: rgba(99,102,241,0.12); border-radius: 4px; padding: 0 4px; }
/* Autocomplete @menciones */
.mencion-drop {
  position: absolute; bottom: calc(100% + 4px); left: 0; right: 0;
  background: #0f1e3d; border: 1px solid rgba(99,102,241,0.3);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 9999; overflow: hidden;
}
body:not(.dark) .mencion-drop { background: #fff; border-color: rgba(99,102,241,0.2); }
.mencion-item { padding: 8px 12px; font-size: 13px; color: var(--text); cursor: pointer; transition: background 0.1s; }
.mencion-item:hover { background: rgba(99,102,241,0.12); }
.com-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.com-user { font-size:11px; font-weight:700; color:var(--primary); }
.com-ts { font-size:10px; color:#64748b; }
.com-text { font-size:13px; color:var(--text); line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.com-empty { font-size:12px; color:#9ca3af; text-align:center; padding:16px 0; }

/* ── Banner offline ──────────────────────────────────────────────── */
#offline-banner {
  position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%);
  background: #0f1e3d; border: 1px solid rgba(239,68,68,0.4); color: #fca5a5;
  font-size: 12px; font-weight: 600; padding: 8px 16px; border-radius: 20px;
  z-index: 9999; white-space: nowrap; box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* ── Recordatorios Dashboard ─────────────────────────────────────── */
.rec-card { padding: 16px; margin-bottom: 16px; border: 1px solid rgba(245,158,11,0.2); }
.rec-item { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:10px; background:rgba(245,158,11,0.05); border:1px solid rgba(245,158,11,0.12); margin-bottom:6px; transition:background 0.15s; }
.rec-item:hover { background:rgba(245,158,11,0.1); }
.rec-item.urgente { background:rgba(239,68,68,0.05); border-color:rgba(239,68,68,0.15); }
.rec-item.urgente:hover { background:rgba(239,68,68,0.1); }
.rec-left { display:flex; align-items:center; gap:10px; }
.rec-icon { font-size:16px; }
.rec-cod { font-size:12px; font-weight:700; color:#e2e8f0; }
.rec-cli { font-size:11px; color:#94a3b8; margin-top:1px; }
.rec-dias { font-size:13px; font-weight:800; color:#f59e0b; }
.rec-dias.urgente { color:#ef4444; }
.rec-dias.warn { color:#f59e0b; }

/* ── Badge alerta CRM ────────────────────────────────────────────── */
.crm-alert-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; color: #f59e0b;
  background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25);
  border-radius: 10px; padding: 2px 8px; margin-top: 6px;
}
.crm-alert-badge.urgente {
  color: #ef4444; background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.25);
}
body.dark .crm-alert-badge { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); }
body.dark .crm-alert-badge.urgente { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3); }

/* ── Sección de fotos por categoría ─────────────────────────────── */
.fotos-cat-titulo {
  font-size: 11px; font-weight: 800; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 0.05em;
  margin: 14px 0 8px; padding-left: 2px;
}
.fotos-cat-titulo:first-child { margin-top: 0; }

@media (max-width: 490px) {
  .mobile-header {
    display: flex !important;
  }

  .kanban-board {
    padding-bottom: 16px !important;
    min-height: unset !important;
  }

  #cs-status-container,
  #s-cli .custom-select,
  #s-cli select {
    width: 100% !important;
    flex: 1 !important;
  }

  #cal-titulo {
    min-width: unset !important;
    font-size: 14px !important;
  }

  #cal-hoy {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }

  .btn-action-premium {
    min-height: 44px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ── Calendario ─────────────────────────────────────────────────── */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 12px;
}
.cal-day-hdr {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  padding: 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cal-day {
  min-height: 68px;
  border-radius: 10px;
  padding: 6px 7px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  transition: background 0.15s, border-color 0.15s;
  cursor: default;
}
.cal-day.has-jobs { cursor: pointer; }
.cal-day.has-jobs:hover {
  background: rgba(99,102,241,0.08);
  border-color: rgba(99,102,241,0.2);
}
.cal-day.today {
  border-color: var(--primary);
  background: rgba(99,102,241,0.06);
}
.cal-day.other-month { opacity: 0.28; cursor: default; }
.cal-day-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
  line-height: 1;
}
.cal-day.today .cal-day-num { color: var(--primary); }
.cal-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}
.cal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cal-dot.pend  { background: #f59e0b; }
.cal-dot.curs  { background: #3b82f6; }
.cal-dot.fin   { background: #10b981; }
.cal-dot.canc  { background: #ef4444; }
.cal-more {
  font-size: 9px;
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
  background: rgba(99,102,241,0.08);
  border-radius: 4px;
  padding: 1px 4px;
  transition: background 0.15s;
}
.cal-more:hover { background: rgba(99,102,241,0.2); }
.cal-panel {
  background: var(--card);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 14px;
  padding: 16px;
  margin-top: 14px;
}
.cal-panel-job {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  cursor: pointer;
  margin-bottom: 8px;
  transition: background 0.15s;
}
.cal-panel-job:hover { background: rgba(99,102,241,0.08); }
.cal-panel-job:last-child { margin-bottom: 0; }
body:not(.dark) .cal-day { background: rgba(0,0,0,0.01); border-color: rgba(0,0,0,0.06); }
body:not(.dark) .cal-day.has-jobs:hover { background: rgba(99,102,241,0.06); }

/* ── Cal mode toggle ─────────────────────────────────────────────────────── */
.cal-mode-btn {
  padding: 6px 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  opacity: 0.45;
  transition: opacity 0.15s, background 0.15s;
}
.cal-mode-btn.active {
  opacity: 1;
  background: rgba(99,102,241,0.18);
}
.cal-mode-btn:hover { opacity: 0.85; }

/* ── Ruta del día job card ───────────────────────────────────────────────── */
.ruta-job-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.ruta-job-card:hover { background: rgba(99,102,241,0.07); }
.ruta-job-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(99,102,241,0.2);
  color: #a5b4fc;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.ruta-job-no-coords {
  opacity: 0.55;
  font-size: 11px;
  color: #f59e0b;
  margin-top: 4px;
}
body:not(.dark) .ruta-job-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.07); }
body:not(.dark) .ruta-job-card:hover { background: rgba(99,102,241,0.06); }

/* ── Deadline badge ──────────────────────────────────────────────────────── */
.deadline-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.deadline-overdue {
  background: rgba(239,68,68,0.15);
  color: #f87171;
  border: 1px solid rgba(239,68,68,0.3);
}
.deadline-today {
  background: rgba(239,68,68,0.12);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.25);
  animation: deadline-pulse 1.4s ease-in-out infinite;
}
.deadline-soon {
  background: rgba(245,158,11,0.15);
  color: #fbbf24;
  border: 1px solid rgba(245,158,11,0.3);
}
.deadline-upcoming {
  background: rgba(99,102,241,0.12);
  color: #a5b4fc;
  border: 1px solid rgba(99,102,241,0.2);
}
@keyframes deadline-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ── FAB Mobile ─────────────────────────────────────────────────────────── */
#fab-mobile {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 8500;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 12px;
  /* Solo el botón principal es táctil cuando está cerrado */
  pointer-events: none;
}
#fab-mobile .fab-main {
  pointer-events: auto;
}
#fab-mobile.open {
  pointer-events: auto;
}
@media (max-width: 490px) {
  #fab-mobile { display: flex; }
}
.fab-main {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(99,102,241,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.2s;
  flex-shrink: 0;
}
#fab-mobile.open .fab-main { transform: rotate(45deg); box-shadow: 0 6px 24px rgba(99,102,241,0.55); }
.fab-actions { display: flex; flex-direction: column-reverse; gap: 10px; align-items: flex-end; }
.fab-action {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(10px) scale(0.93);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  cursor: pointer;
}
#fab-mobile.open .fab-action { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
#fab-mobile.open .fab-action:nth-child(1) { transition-delay: 0.04s; }
#fab-mobile.open .fab-action:nth-child(2) { transition-delay: 0.09s; }
#fab-mobile.open .fab-action:nth-child(3) { transition-delay: 0.14s; }
.fab-label {
  background: #fff;
  color: #1e293b;
  padding: 6px 13px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,0.14);
  white-space: nowrap;
  pointer-events: none;
}
body.dark .fab-label { background: #0f1e3d; color: #f1f5f9; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.fab-action-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.14);
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: none;
}
body.dark .fab-action-btn { background: #0f1e3d; box-shadow: 0 2px 10px rgba(0,0,0,0.45); }
body:not(.dark) .cal-panel { background: #fff; }

/* ── Stats por usuario ─────────────────────────────── */
.ust-card { margin-bottom: 20px; padding: 16px; }
.ust-hdr-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ust-table { width: 100%; }
.ust-thead { display: grid; grid-template-columns: 1fr 52px 52px; gap: 4px; padding: 5px 8px 8px; font-size: 10px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.07em; border-bottom: 1px solid rgba(255,255,255,0.07); }
.ust-row { display: grid; grid-template-columns: 1fr 52px 52px; gap: 4px; padding: 9px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 13px; transition: background 0.15s; border-radius: 8px; }
.ust-row:hover { background: rgba(255,255,255,0.03); }
.ust-total { display: grid; grid-template-columns: 1fr 52px 52px; gap: 4px; padding: 9px 8px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 12px; font-weight: 700; color: #64748b; }
.ust-table.with-money .ust-thead,
.ust-table.with-money .ust-row,
.ust-table.with-money .ust-total { grid-template-columns: 1fr 52px 52px 120px; }
.ust-col-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ust-col-r { text-align: right; font-weight: 600; color: #64748b; }
.ust-fin { color: #22c55e; }

/* ─── DRAG & DROP KANBAN ──────────────────────────────────────────────────── */
.k-item[draggable="true"] { cursor: grab; }
.k-item[draggable="true"]:active { cursor: grabbing; }
.k-item[draggable="true"]::before {
  content: '⠿';
  position: absolute; top: 10px; right: 10px;
  font-size: 14px; color: rgba(148,163,184,0.3);
  pointer-events: none;
}
.k-item { position: relative; }
.k-item.dragging { opacity: 0.35; transform: scale(0.96) rotate(-1deg); cursor: grabbing; box-shadow: 0 16px 32px rgba(0,0,0,0.3); }
.k-items.drag-over {
  background: rgba(99,102,241,0.08);
  border-radius: 12px;
  outline: 2px dashed rgba(99,102,241,0.45);
  outline-offset: 2px;
}
body.dark .k-items.drag-over { background: rgba(99,102,241,0.12); }

/* ─── CRM VIEW TOGGLE ─────────────────────────────────────────────────────── */
.crm-view-toggle { display:flex; gap:4px; flex-shrink:0; }
.crm-view-btn {
  background: rgba(99,102,241,0.06);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 10px;
  color: #64748b;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 6px 10px;
  transition: all 0.2s;
}
.crm-view-btn:hover { background: rgba(99,102,241,0.14); color: #6366f1; }
.crm-view-btn.active { background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.5); color: #6366f1; }
body.dark .crm-view-btn { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.2); color: #94a3b8; }
body.dark .crm-view-btn:hover { background: rgba(99,102,241,0.18); color: #c7d2fe; }
body.dark .crm-view-btn.active { background: rgba(99,102,241,0.22); border-color: rgba(99,102,241,0.5); color: #818cf8; }

/* ─── CRM LIST VIEW TABLE ─────────────────────────────────────────────────── */
.crm-list-wrap {
  background: #ffffff;
  border: 1px solid rgba(148,163,184,0.12);
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
}
body.dark .crm-list-wrap {
  background: #0f1e3d;
  border-color: rgba(99, 102, 241, 0.15);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}
.crm-list-table { width:100%; border-collapse:collapse; font-size:13px; }
.crm-list-table th {
  text-align:left; padding:10px 14px; font-weight:700; font-size:11px;
  text-transform:uppercase; letter-spacing:.05em; color:#64748b;
  border-bottom:1px solid rgba(148,163,184,0.15); cursor:pointer; user-select:none;
}
.crm-list-table th:hover { color:#6366f1; }
.crm-list-table th .sort-icon { margin-left:4px; opacity:.4; }
.crm-list-table th.sorted .sort-icon { opacity:1; color:#6366f1; }
.crm-list-table td { padding:10px 14px; border-bottom:1px solid rgba(148,163,184,0.08); vertical-align:middle; }
.crm-list-table tr:hover td { background:rgba(99,102,241,0.04); }
.crm-list-table tr:last-child td { border-bottom:none; }
.crm-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700;
}
.crm-badge.pend  { background:rgba(245,158,11,0.12); color:#f59e0b; }
.crm-badge.curso { background:rgba(99,102,241,0.12); color:#6366f1; }
.crm-badge.apr   { background:rgba(251,146,60,0.12); color:#fb923c; }
.crm-badge.fin   { background:rgba(34,197,94,0.12);  color:#22c55e; }
.crm-badge.canc  { background:rgba(239,68,68,0.12);  color:#ef4444; }
/* ── List view estado dropdown custom ──────────────── */
.les-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: filter 0.15s, transform 0.15s;
  white-space: nowrap;
}
.les-wrap:hover { filter: brightness(1.12); transform: scale(1.04); }
.les-wrap.pend  { background:rgba(245,158,11,0.12); color:#f59e0b; }
.les-wrap.curso { background:rgba(99,102,241,0.12); color:#6366f1; }
.les-wrap.apr   { background:rgba(251,146,60,0.12); color:#fb923c; }
.les-wrap.fin   { background:rgba(34,197,94,0.12);  color:#22c55e; }
.les-wrap.canc  { background:rgba(239,68,68,0.12);  color:#ef4444; }
.les-wrap.les-loading { opacity: 0.5; pointer-events: none; }

.les-arrow {
  font-size: 8px;
  opacity: 0.6;
  transition: transform 0.2s;
  margin-left: 2px;
}
.les-wrap.open .les-arrow { transform: rotate(180deg); }

/* Dropdown panel */
.les-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: #ffffff;
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 9999;
  padding: 6px;
  animation: lesDrop 0.18s cubic-bezier(0.4,0,0.2,1);
}
body.dark .les-dropdown {
  background: #0d1b3e;
  border-color: rgba(99,102,241,0.2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 4px 12px rgba(99,102,241,0.1);
}
.les-wrap.open .les-dropdown,
.les-dropdown.open { display: block; }

@keyframes lesDrop {
  from { opacity:0; transform: translateY(-6px) scale(0.97); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}

/* Opciones */
.les-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.15s, transform 0.1s;
  color: #374151;
}
body.dark .les-option { color: #cbd5e1; }

.les-option:hover { transform: translateX(2px); }
.les-option.pend:hover  { background: rgba(245,158,11,0.12); color:#f59e0b; }
.les-option.curso:hover { background: rgba(99,102,241,0.12); color:#6366f1; }
.les-option.apr:hover   { background: rgba(251,146,60,0.12); color:#fb923c; }
.les-option.fin:hover   { background: rgba(34,197,94,0.12);  color:#22c55e; }
.les-option.canc:hover  { background: rgba(239,68,68,0.12);  color:#ef4444; }

.les-option.active.pend  { background:rgba(245,158,11,0.15); color:#f59e0b; }
.les-option.active.curso { background:rgba(99,102,241,0.15); color:#6366f1; }
.les-option.active.apr   { background:rgba(251,146,60,0.15); color:#fb923c; }
.les-option.active.fin   { background:rgba(34,197,94,0.15);  color:#22c55e; }
.les-option.active.canc  { background:rgba(239,68,68,0.15);  color:#ef4444; }

.les-opt-icon { font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; }
.les-opt-label { flex: 1; white-space: nowrap; }
.les-check { margin-left: auto; font-size: 11px; opacity: 0.8; flex-shrink: 0; }

/* ── List estado custom dropdown ───────────────────── */
.les-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: filter 0.15s, transform 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 32px;
}
.les-wrap:hover { filter: brightness(1.1); transform: scale(1.03); }
.les-wrap.pend  { background:rgba(245,158,11,0.12); color:#f59e0b; }
.les-wrap.curso { background:rgba(99,102,241,0.12); color:#6366f1; }
.les-wrap.apr   { background:rgba(251,146,60,0.12); color:#fb923c; }
.les-wrap.fin   { background:rgba(34,197,94,0.12);  color:#22c55e; }
.les-wrap.canc  { background:rgba(239,68,68,0.12);  color:#ef4444; }
.les-wrap.les-loading { opacity:0.5; pointer-events:none; }
/* En tarjetas kanban: badge ocupa todo el ancho */
.k-item .les-wrap {
  width: 100%;
  border-radius: 10px;
  justify-content: space-between;
  padding: 7px 12px;
  font-size: 12px;
  border: 1px solid currentColor;
  border-color: inherit;
  opacity: 0.9;
}
.k-item .les-wrap.pend  { border-color: rgba(245,158,11,0.3); }
.k-item .les-wrap.curso { border-color: rgba(99,102,241,0.3); }
.k-item .les-wrap.apr   { border-color: rgba(251,146,60,0.3); }
.k-item .les-wrap.fin   { border-color: rgba(34,197,94,0.3); }
.k-item .les-wrap.canc  { border-color: rgba(239,68,68,0.3); }
.k-item .les-arrow { font-size: 10px; opacity: 0.7; }

.les-arrow {
  font-size: 8px;
  opacity: 0.55;
  transition: transform 0.2s;
}
.les-wrap.open .les-arrow { transform: rotate(180deg); }

/* Panel dropdown — fixed para evitar clipping de la tabla */
.les-dropdown {
  display: none;
  position: fixed;
  min-width: 170px;
  max-height: 60vh;
  overflow-y: auto;
  background: #0f1e3d;
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.2);
  z-index: 99999;
  padding: 5px;
  animation: lesDrop 0.16s cubic-bezier(0.4,0,0.2,1);
  touch-action: manipulation;
}
body:not(.dark) .les-dropdown {
  background: #ffffff;
  border-color: rgba(148,163,184,0.2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
}
.les-wrap.open .les-dropdown { display: block; }

@keyframes lesDrop {
  from { opacity:0; transform:translateY(-5px) scale(0.97); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}

/* Opciones */
.les-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  transition: background 0.12s, color 0.12s, transform 0.1s;
}
body:not(.dark) .les-option { color: #475569; }
.les-option:hover { transform: translateX(3px); }
.les-option.pend:hover, .les-option.pend.active  { background:rgba(245,158,11,0.15); color:#f59e0b; }
.les-option.curso:hover,.les-option.curso.active { background:rgba(99,102,241,0.15); color:#818cf8; }
.les-option.apr:hover,  .les-option.apr.active   { background:rgba(251,146,60,0.15); color:#fb923c; }
.les-option.fin:hover,  .les-option.fin.active   { background:rgba(34,197,94,0.15);  color:#22c55e; }
.les-option.canc:hover, .les-option.canc.active  { background:rgba(239,68,68,0.15);  color:#ef4444; }

.les-opt-icon { font-size: 14px; width: 18px; text-align:center; flex-shrink:0; }
.les-opt-label { flex: 1; }
.les-check { font-size: 11px; opacity: 0.7; margin-left: auto; }

.crm-td-muted { color:#64748b; }
body.dark .crm-td-muted { color:#94a3b8; }
body.dark .crm-list-table thead tr { background: rgba(99,102,241,0.12); }
body.dark .crm-list-table th { color:#94a3b8; border-bottom-color:rgba(99,102,241,0.2); }
body.dark .crm-list-table td { background: #0f1e3d !important; border-color:rgba(99,102,241,0.08); }
body.dark .crm-list-table tbody tr:hover td { background: rgba(30,50,100,0.9) !important; }

/* ── CRM header mobile ─────────────────────────────── */
@media (max-width: 490px) {
  /* Search card más compacta */
  .search-card-premium {
    padding: 14px !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    border-radius: 14px !important;
  }

  /* Título más pequeño */
  #s-crm .search-card-premium h2 {
    font-size: 15px !important;
  }

  /* Input y botón buscar */
  #crm-search {
    font-size: 13px !important;
    padding: 10px 12px !important;
  }

  /* Botón BUSCAR */
  #s-crm .search-card-premium button[onclick*="Buscar"],
  #s-crm .search-card-premium .btn-primary {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  /* Barra de promedios más compacta */
  #crm-promedio-bar {
    font-size: 11px !important;
  }
  #crm-promedio-bar > div {
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  /* Chip de filtro activo */
  #crm-filtro-chip span {
    font-size: 12px !important;
    padding: 5px 10px !important;
  }

  /* Stats chips del CRM */
  .crm-stat, [id^="crm-k-"] {
    font-size: 11px !important;
  }
}

/* ── CRM Lista — tabla mobile ──────────────────────── */
@media (max-width: 490px) {
  .crm-list-wrap {
    overflow: hidden;
    border-radius: 12px;
  }
  .crm-list-table {
    font-size: 12px;
    width: 100%;
    table-layout: fixed;
  }

  /* Anchos fijos para que quepan en pantalla */
  /* col1=checkbox, col2=Código, col3=Cliente, col4=Estado, col5=Técnico(hidden), col6=Descripción(hidden), col7=Fecha, col8=Actions */
  .crm-list-table th:nth-child(1),
  .crm-list-table td:nth-child(1) { width: 32px; padding: 10px 4px; text-align: center; }
  .crm-list-table th:nth-child(2),
  .crm-list-table td:nth-child(2) { width: 90px; }
  .crm-list-table th:nth-child(3),
  .crm-list-table td:nth-child(3) { width: auto; }
  .crm-list-table th:nth-child(4),
  .crm-list-table td:nth-child(4) { width: 120px; }
  .crm-list-table th:nth-child(7),
  .crm-list-table td:nth-child(7) { width: 44px; }

  /* Ocultar Técnico y Descripción en móvil */
  .crm-list-table th:nth-child(5),
  .crm-list-table td:nth-child(5) { display: none !important; }
  .crm-list-table th:nth-child(6),
  .crm-list-table td:nth-child(6) { display: none !important; }

  .crm-list-table th,
  .crm-list-table td { padding: 10px 6px; overflow: hidden; }

  /* Código truncado */
  .crm-list-table td:nth-child(2) { word-break: break-all; font-size: 10px; }

  /* Cliente truncado */
  .crm-list-table td:nth-child(3) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;
  }

  /* Estado badge compacto */
  .les-wrap { font-size: 10px !important; padding: 3px 7px !important; gap: 3px !important; white-space: nowrap; }
  .les-arrow { font-size: 7px; }

  /* Solo mostrar ícono en botón acción */
  .crm-list-table .btn-icon { padding: 4px; font-size: 14px; }
}

/* ── CRM Lista — mobile cards ──────────────────────── */
.crm-mobile-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}
.crm-mobile-card {
  background: #ffffff;
  border: 1px solid rgba(148,163,184,0.15);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: box-shadow 0.18s, transform 0.18s;
  touch-action: manipulation;
}
.crm-mobile-card:active { transform: scale(0.99); }
body.dark .crm-mobile-card {
  background: #0f1e3d;
  border-color: rgba(99,102,241,0.15);
}
.cmc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cmc-cod {
  font-family: monospace;
  font-weight: 700;
  font-size: 13px;
  color: #6366f1;
}
.cmc-cliente {
  font-weight: 600;
  font-size: 14px;
  color: #1e293b;
}
body.dark .cmc-cliente { color: #f1f5f9; }
.cmc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}
.cmc-fecha {
  font-size: 12px;
  color: #94a3b8;
}
.cmc-actions {
  display: flex;
  gap: 8px;
}

.ust-money { color: var(--primary); font-weight: 700; }

/* ─── OPTIMIZACIÓN MÓVIL — deshabilita backdrop-filter en ≤650px ─────────
   backdrop-filter: blur() es muy costoso en GPU móvil.
   En mobile se reemplazan todos por fondos sólidos.             ─────────── */
@media (max-width: 490px) {

  /* Scroll suave touch en contenedores principales */
  .main-content, .kanban-board, .k-items, .tabs, .mdl-body {
    -webkit-overflow-scrolling: touch;
  }

  /* Apagar TODO backdrop-filter del layout */
  .sidebar,
  .mobile-header,
  body.dark .sidebar,
  body.dark .card,
  .card,
  .search-card-premium,
  body.dark .search-card-premium {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Kanban: backdrop-filter más caro (::before en cada tarjeta) */
  body.dark .k-item::before {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: none !important;
  }
  body.dark .k-col {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(8,18,48,0.95) !important;
  }
  body.dark .k-item {
    background: #0f1e3d !important;
  }

  /* KPI cards */
  body.dark .k-stat-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #0f1e3d !important;
  }

  /* Modales */
  .mdl-card, body.dark .mdl-card,
  .mdl-hdr,  body.dark .mdl-hdr {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Login (siempre es oscuro, no afecta) */
  #login-screen, .login-box {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Desactivar animación de entrada kanban (evita repaint en cada render) */
  .k-col { animation: none !important; }

  /* Reducir sombras pesadas */
  body.dark .k-stat-card { box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; }
  body.dark .k-item       { box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important; }

  /* Habilitar GPU compositing en el board */
  .kanban-board { will-change: scroll-position; transform: translateZ(0); }
}

/* ─── SKELETON LOADERS ──────────────────────────────────────────────────── */
@keyframes skelShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skel {
  background: linear-gradient(90deg, rgba(99,102,241,0.07) 25%, rgba(99,102,241,0.16) 50%, rgba(99,102,241,0.07) 75%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s infinite linear;
  border-radius: 8px;
}
body:not(.dark) .skel {
  background: linear-gradient(90deg, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.05) 75%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s infinite linear;
}
.skel-card { height: 110px; width: 100%; border-radius: 16px; display: block; }
.skel-hdr  { height: 13px; width: 80px; border-radius: 6px; display: inline-block; }

/* ─── KANBAN COLUMN ANIMATION ─────────────────────────────────────────── */
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.k-col { animation: fadeSlideUp 0.32s ease both; }
.k-col:nth-child(2) { animation-delay: 0.06s; }
.k-col:nth-child(3) { animation-delay: 0.12s; }
.k-col:nth-child(4) { animation-delay: 0.18s; }
.k-col:nth-child(5) { animation-delay: 0.24s; }

/* ─── BADGE "POR APROBAR" ────────────────────────────────────────────── */
.apr-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #ef4444; color: #fff; font-size: 10px; font-weight: 800;
  min-width: 18px; height: 18px; border-radius: 50px; padding: 0 5px;
  margin-left: 6px; line-height: 1; flex-shrink: 0;
  animation: badgePop 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes badgePop { from { transform: scale(0); } to { transform: scale(1); } }

/* ─── NOTIFICACIONES PANEL ───────────────────────────────────────────── */
.bell-trigger {
  position: relative !important;
}
/* ── Barra de saludo FIJA (sticky) ─────────────────────────────────── */
#app-greeting-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
  background: #020617;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body:not(.dark) #app-greeting-bar {
  background: #f8fafc;
  border-bottom-color: rgba(0,0,0,0.06);
}
/* Móvil: el saludo sticky justo debajo del header fijo */
@media (max-width: 490px) {
  #app-greeting-bar {
    position: fixed !important;  /* fixed garantiza que siempre quede debajo del header */
    top: 60px !important;        /* exactamente debajo del mobile-header */
    left: 0 !important;
    right: 0 !important;
    z-index: 1100 !important;   /* entre mobile-header (1200) y contenido */
  }
}
.greeting-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 10px;
  gap: 12px;
}
.greeting-bar-left { flex: 1; min-width: 0; }
.greeting-bar-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--text, #e2e8f0);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.greeting-bar-date {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}
.greeting-bar-btns {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
/* Ocultar en msg y crm */
.main-content.msg-active #app-greeting-bar,
.main-content.crm-active #app-greeting-bar {
  display: none !important;
}
/* Móvil: un poco más compacto + compensar el espacio del greeting bar fixed */
@media (max-width: 490px) {
  .greeting-bar { padding: 12px 16px 10px; }
  .greeting-bar-name { font-size: 16px; }
  /* padding-top solo cuando el saludo está visible (no admin) */
  .main-content.has-greeting:not(.msg-active):not(.crm-active) {
    padding-top: 62px !important; /* altura aproximada del greeting bar fixed */
  }
}

/* Opción C — bell en barra de filtros */
.bell-dash-btn {
  background: rgba(99,102,241,0.12) !important;
  border: 1px solid rgba(99,102,241,0.25) !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
  font-size: 16px !important;
  cursor: pointer !important;
  color: #818cf8 !important;
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: background 0.2s !important;
}
.bell-dash-btn:hover { background: rgba(99,102,241,0.22) !important; }
.bell-badge-clone {
  position: absolute; top: -4px; right: -4px;
  background: #ef4444; color: #fff; font-size: 9px; font-weight: 800;
  min-width: 17px; height: 17px; border-radius: 50px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; pointer-events: none;
  animation: badgePop 0.3s cubic-bezier(0.34,1.56,0.64,1);
  border: 2px solid var(--sidebar-bg, #0a1628);
  box-shadow: 0 0 0 0 rgba(239,68,68,0.5);
}
.bell-badge-clone[data-pulsing="1"] {
  animation: badgePop 0.3s cubic-bezier(0.34,1.56,0.64,1), bellPulse 2s ease-in-out 0.3s infinite;
}
@keyframes bellPulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
  60%  { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
#notif-panel {
  position: fixed;
  width: 300px;
  background: #0f1e3d;
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.45);
  z-index: 9500;
  max-height: 420px;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: fadeInUp 0.2s ease;
}
body:not(.dark) #notif-panel {
  background: #fff;
  border-color: rgba(99,102,241,0.18);
  box-shadow: 0 12px 32px rgba(0,0,0,0.14);
}
#notif-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 10px;
  font-size: 13px; font-weight: 700; color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
body:not(.dark) #notif-panel-header { border-color: rgba(0,0,0,0.06); }
#notif-mark-read {
  background: none; border: 1px solid rgba(99,102,241,0.3);
  border-radius: 20px; padding: 3px 10px; font-size: 11px;
  color: #6366f1; cursor: pointer; transition: all 0.2s;
}
#notif-mark-read:hover { background: rgba(99,102,241,0.1); }
#notif-panel-list { overflow-y: auto; flex: 1; padding: 6px 0; }
.notif-empty {
  text-align: center; color: #64748b; font-size: 13px;
  padding: 28px 16px;
}
.notif-item {
  padding: 10px 16px; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
}
body:not(.dark) .notif-item { border-color: rgba(0,0,0,0.04); }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(99,102,241,0.07); }
.notif-unseen { background: rgba(99,102,241,0.08); }
.notif-unseen::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: #6366f1; margin-right: 6px;
  vertical-align: middle; flex-shrink: 0;
}
.notif-item-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 3px;
}
.notif-cod { font-size: 12px; font-weight: 700; color: #6366f1; }
.notif-time { font-size: 10px; color: #64748b; }
.notif-item-body { font-size: 12px; color: var(--text); }
.notif-est-old { color: #94a3b8; }
.notif-est-new { font-weight: 600; color: var(--text); }
.notif-item-who { font-size: 11px; color: #64748b; margin-top: 2px; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── QUICK SEARCH Ctrl+K ────────────────────────────────────────────── */
.qs-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(2,6,23,0.78); backdrop-filter: blur(8px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 80px 16px 0; animation: fadeIn 0.15s ease;
}
.qs-box {
  background: #0f1e3d; border: 1px solid rgba(99,102,241,0.3);
  border-radius: 20px; width: 100%; max-width: 580px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.5); overflow: hidden;
}
body:not(.dark) .qs-box { background: #fff; border-color: rgba(99,102,241,0.22); }
.qs-input-wrap {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  border-bottom: 1px solid rgba(99,102,241,0.12);
}
.qs-icon { font-size: 16px; flex-shrink: 0; }
.qs-input-wrap input {
  flex: 1; background: none; border: none; outline: none;
  font-size: 16px; font-weight: 500; color: #f8fafc;
}
body:not(.dark) .qs-input-wrap input { color: #0f172a; }
.qs-input-wrap input::placeholder { color: #475569; }
.qs-esc {
  font-size: 11px; color: #475569; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px; padding: 2px 7px; font-family: monospace; flex-shrink: 0;
}
.qs-chip {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  color: #94a3b8;
  font-size: 11px;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.qs-chip:hover { background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.4); color: #818cf8; }
.qs-chip.active { background: rgba(99,102,241,0.2); border-color: rgba(99,102,241,0.5); color: #a5b4fc; font-weight: 600; }
html.light .qs-chip { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); color: #475569; }
html.light .qs-chip.active { background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.4); color: #6366f1; }
html.light #qs-filter-bar { border-color: rgba(0,0,0,0.08); }
.qs-results { max-height: 340px; overflow-y: auto; padding: 8px; }
.qs-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px; cursor: pointer; transition: background 0.15s;
}
.qs-item:hover, .qs-item.selected { background: rgba(99,102,241,0.12); }
.qs-item-cod { font-family: monospace; color: #818cf8; font-weight: 700; font-size: 13px; flex-shrink: 0; min-width: 110px; }
.qs-item-cli { font-weight: 600; font-size: 14px; color: #f8fafc; flex: 1; }
body:not(.dark) .qs-item-cli { color: #0f172a; }
.qs-item-badge { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 20px; flex-shrink: 0; }

/* ─── QUICK COMMENT ─────────────────────────────────────────────────── */
.k-quick-comment { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(99,102,241,0.12); animation: fadeIn 0.2s ease; }
.k-quick-comment.open { display: block; }
.kqc-input {
  width: 100%; background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.18);
  border-radius: 10px; padding: 8px 12px; font-size: 12px; color: #f8fafc;
  resize: none; outline: none; transition: border-color 0.2s; font-family: inherit;
}
.kqc-input:focus { border-color: rgba(99,102,241,0.4); }
body:not(.dark) .kqc-input { color: #0f172a; background: rgba(99,102,241,0.04); }
.kqc-send {
  flex: 1; background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.3);
  color: #818cf8; border-radius: 8px; padding: 5px 12px; font-size: 11px;
  font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.kqc-send:hover { background: rgba(99,102,241,0.25); }
.kqc-cancel { background: none; border: 1px solid rgba(255,255,255,0.08); color: #64748b; border-radius: 8px; padding: 5px 10px; font-size: 11px; cursor: pointer; }
body:not(.dark) .kqc-cancel { border-color: rgba(0,0,0,0.1); }

/* ── Pull-to-refresh ───────────────────────────────────────────────────── */
#ptr-indicator {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; font-size: 13px; font-weight: 600; color: #6366f1;
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
  /* position: absolute saca el indicador del flujo flex para que no empuje el header */
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  height: 42px;
}
.ptr-icon { font-size: 18px; }

/* ── Filtro técnico ────────────────────────────────────────────────────── */
/* ── Panel filtros avanzados CRM (light/dark) ─────────────────────── */
#crm-filtros-avanzados {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}
body.dark #crm-filtros-avanzados {
  background: rgba(15, 30, 61, 0.8);
  border-color: rgba(99, 102, 241, 0.15);
}
#crm-filtros-avanzados select,
#crm-filtros-avanzados input[type="date"] {
  background: #fff;
  border: 1px solid #cbd5e1;
  color: #1e293b;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  outline: none;
  width: 100%;
}
#crm-filtros-avanzados label {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
body.dark #crm-filtros-avanzados select,
body.dark #crm-filtros-avanzados input[type="date"] {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

.crm-filter-row {
  display: flex; gap: 8px; align-items: center;
  padding-top: 4px;
}
.crm-select-filter {
  background: rgba(99,102,241,0.07); border: 1px solid rgba(99,102,241,0.2);
  border-radius: 10px; padding: 7px 12px; font-size: 12px; font-weight: 600;
  color: var(--text); cursor: pointer; outline: none; min-width: 180px;
  transition: border-color 0.2s;
}
.crm-select-filter:focus { border-color: rgba(99,102,241,0.5); }
body.dark .crm-select-filter { color: #e2e8f0; }

/* ── Filtro técnico premium ─────────────────────────────────────────────── */
.crm-tec-filter-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 8px;
  background: rgba(99,102,241,0.07);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 10px; font-size: 12px; font-weight: 600;
  color: var(--text); cursor: pointer; outline: none;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
  white-space: nowrap; min-width: 170px; touch-action: manipulation;
}
.crm-tec-filter-btn:hover {
  background: rgba(99,102,241,0.14);
  border-color: rgba(99,102,241,0.4);
  box-shadow: 0 2px 12px rgba(99,102,241,0.15);
}
.crm-tec-filter-btn.active {
  background: rgba(99,102,241,0.16);
  border-color: rgba(99,102,241,0.45);
  color: #818cf8;
  box-shadow: 0 2px 12px rgba(99,102,241,0.2);
}
.crm-tec-filter-btn #crm-filtro-tecnico-label { flex: 1; text-align: left; }
.crm-tec-filter-arrow {
  font-size: 10px; color: #64748b; transition: transform 0.15s;
  margin-left: 2px;
}

/* ── Gráfico de tiempos por estado (Dashboard) ─────────────────────────── */
.de-row {
  display: grid; grid-template-columns: 130px 1fr 110px;
  align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid rgba(148,163,184,0.08);
}
.de-row:last-child { border-bottom: none; }
.de-label { display: flex; align-items: center; gap: 6px; }
.de-icon  { font-size: 16px; width: 22px; text-align: center; }
.de-name  { font-size: 12px; font-weight: 700; color: var(--text); }
.de-bar-wrap { background: rgba(148,163,184,0.1); border-radius: 6px; height: 10px; overflow: hidden; }
.de-bar { height: 100%; border-radius: 6px; transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }
.de-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.de-days  { font-size: 12px; font-weight: 700; color: var(--text); }
.de-count { font-size: 10px; opacity: 0.5; }
#dash-estados-pills [data-estado-filter]:hover { opacity: 0.8; transform: translateY(-1px); transition: all 0.15s; }

@media (max-width: 490px) {
  .de-row { grid-template-columns: 100px 1fr 90px; gap: 6px; }
  .de-name { font-size: 11px; }
  .crm-filter-row { flex-wrap: wrap; }
  .crm-select-filter { min-width: 0; flex: 1; }
  .crm-tec-filter-btn { min-width: 0; flex: 1; }
}

/* ── Technician quick-assign dropdown ─────────────────────────────── */
.tec-assign-dropdown {
  position: fixed;
  z-index: 100000;
  background: rgba(13, 17, 35, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(99,102,241,0.35);
  border-radius: 16px;
  padding: 6px;
  min-width: 210px;
  box-shadow:
    0 0 0 1px rgba(99,102,241,0.08),
    0 4px 6px -2px rgba(0,0,0,0.3),
    0 24px 64px -8px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.05);
  animation: dropdownIn 0.15s cubic-bezier(0.16,1,0.3,1);
  transform-origin: top center;
}
/* Modo claro */
body:not(.dark) .tec-assign-dropdown {
  background: #ffffff;
  border: 1px solid rgba(99,102,241,0.25);
  box-shadow:
    0 0 0 1px rgba(99,102,241,0.06),
    0 4px 6px -2px rgba(0,0,0,0.08),
    0 16px 40px -4px rgba(0,0,0,0.14);
  color: #1e293b;
}
body:not(.dark) .tec-assign-option {
  color: #1e293b !important;
}
body:not(.dark) .tec-assign-option:hover {
  background: rgba(99,102,241,0.08) !important;
}
body:not(.dark) .tec-assign-option.active {
  background: rgba(99,102,241,0.12) !important;
}
/* Search input en modo claro */
body:not(.dark) .tec-filter-dropdown input[type="text"] {
  background: rgba(99,102,241,0.05) !important;
  color: #1e293b !important;
  border-color: rgba(99,102,241,0.2) !important;
}
body:not(.dark) .tec-filter-dropdown input[type="text"]::placeholder {
  color: #94a3b8 !important;
}
@keyframes dropdownIn {
  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.tec-assign-option {
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.12s, color 0.12s;
  font-weight: 500;
  position: relative;
}
/* En opciones del filtro, el check va antes del botón historial */
.tec-filter-opt.active::after { display: none; }
.tec-assign-option:hover {
  background: rgba(99,102,241,0.18);
  color: #e2e8f0;
}
.tec-assign-option.active {
  background: rgba(99,102,241,0.22);
  color: #a5b4fc;
  font-weight: 700;
}
.tec-assign-option.active::after {
  content: '✓';
  margin-left: auto;
  font-size: 12px;
  color: #818cf8;
}

/* Botón + Agregar técnico adicional */
.tec-add-extra-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  background: rgba(99,102,241,0.1);
  border: 1px dashed rgba(99,102,241,0.35);
  border-radius: 20px;
  color: #818cf8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.tec-add-extra-btn:hover {
  background: rgba(99,102,241,0.2);
  border-color: rgba(99,102,241,0.55);
  color: #a5b4fc;
}

/* ── Technician quick chip (list view cell) ────────────────────────── */
.tec-quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
  border: 1px solid transparent;
}
.tec-quick-chip.assigned {
  background: rgba(14,165,233,0.1);
  border-color: rgba(14,165,233,0.25);
  color: #38bdf8;
}
.tec-quick-chip.unassigned {
  background: rgba(99,102,241,0.08);
  border-color: rgba(99,102,241,0.2);
  color: #818cf8;
}
.tec-quick-chip:hover {
  background: rgba(99,102,241,0.18) !important;
  border-color: rgba(99,102,241,0.4) !important;
}
.tec-chip-edit {
  font-size: 11px;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.tec-quick-chip:hover .tec-chip-edit { opacity: 1; }
.tec-readonly-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
}
.tec-readonly-chip.assigned {
  background: rgba(14,165,233,0.1);
  border-color: rgba(14,165,233,0.25);
  color: #38bdf8;
}
.tec-readonly-chip.unassigned {
  background: rgba(99,102,241,0.08);
  border-color: rgba(99,102,241,0.2);
  color: #818cf8;
}

.tec-task-app {
  max-width: 760px;
  margin: 0 auto;
  padding: 4px 0 96px;
}
.tec-task-hero,
.tec-task-section,
.tec-task-grid button,
.tec-task-empty {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: 16px;
}
.tec-task-hero {
  padding: 18px;
  margin-bottom: 12px;
}
.tec-task-hero--en_progreso {
  border-color: rgba(99,102,241,0.55) !important;
  background: rgba(99,102,241,0.08) !important;
  box-shadow: 0 0 0 1px rgba(99,102,241,0.2);
}
.tec-task-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.tec-estado-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}
.tec-estado-pendiente   { background: rgba(100,116,139,0.2); color: #94a3b8; border: 1px solid rgba(100,116,139,0.3); }
.tec-estado-en-progreso { background: rgba(99,102,241,0.2);  color: #a5b4fc; border: 1px solid rgba(99,102,241,0.45); }
.tec-estado-completada  { background: rgba(34,197,94,0.15);  color: #86efac; border: 1px solid rgba(34,197,94,0.3); }
.tec-task-kicker,
.tec-task-section-title {
  color: #38bdf8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tec-task-hero h3 {
  margin: 8px 0 12px;
  color: #f8fafc;
  font-size: 22px;
  line-height: 1.2;
}
.tec-task-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.tec-task-warning {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: #fbbf24;
  font-size: 13px;
  font-weight: 800;
}
.tec-task-section {
  padding: 16px;
  margin-bottom: 12px;
}
.tec-task-description p {
  margin: 10px 0 0;
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.5;
}
.tec-task-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.tec-task-grid button {
  padding: 14px;
  text-align: left;
  color: #e2e8f0;
  cursor: pointer;
}
.tec-task-grid button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tec-task-grid b {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}
.tec-task-grid span,
.tec-task-close-note,
.tec-task-done,
.tec-task-empty p {
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.45;
}
.tec-task-done {
  padding: 10px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.tec-task-empty {
  text-align: center;
  padding: 42px 22px;
}
.tec-task-empty-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(34, 197, 94, 0.14);
  color: #4ade80;
  font-size: 28px;
  font-weight: 900;
}
.tec-task-empty h3 {
  color: #f8fafc;
  margin: 0 0 6px;
}
.tec-task-empty button {
  margin-top: 14px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.14);
  color: #a5b4fc;
  font-weight: 800;
}
.tec-task-bottom {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 0.8fr 0.8fr 1.3fr;
  gap: 8px;
  max-width: 760px;
  margin: 0 auto;
  padding: 10px 0 0;
  background: linear-gradient(180deg, rgba(2,6,23,0), #020617 28%);
}
.tec-bottom-secondary,
.tec-bottom-primary {
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  font-weight: 900;
  cursor: pointer;
}
.tec-bottom-secondary {
  background: rgba(15, 23, 42, 0.92);
  color: #cbd5e1;
}
.tec-bottom-primary {
  background: #3b82f6;
  border-color: rgba(96, 165, 250, 0.55);
  color: white;
}
.tec-bottom-primary:disabled,
.tec-bottom-secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tec-bottom-en-progreso {
  background: rgba(99,102,241,0.85) !important;
  border-color: rgba(99,102,241,0.6) !important;
  box-shadow: 0 0 0 1px rgba(99,102,241,0.3);
}
@media (max-width: 560px) {
  .tec-task-app { padding-bottom: 108px; }
  .tec-task-grid { grid-template-columns: 1fr; }
  .tec-task-bottom {
    left: 0;
    right: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }
}

/* ── Modal historial técnico ──────────────────────────────────────────────── */
.htec-card {
  background: rgba(10, 18, 38, 0.97);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 20px;
  width: 90%; max-width: 560px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  transform: scale(0.93) translateY(16px);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(.34,1.56,.64,1), opacity 0.18s ease;
}
/* Modo claro */
body:not(.dark) .htec-card {
  background: #ffffff;
  border: 1px solid rgba(99,102,241,0.2);
  box-shadow: 0 8px 40px rgba(0,0,0,0.15);
  color: #1e293b;
}
body:not(.dark) .htec-hdr {
  border-bottom-color: rgba(0,0,0,0.07);
}
body:not(.dark) .htec-avatar {
  background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.2));
  color: #6366f1;
}
body:not(.dark) .htec-row td {
  background: transparent !important;
  color: #334155 !important;
  border-bottom-color: rgba(0,0,0,0.06);
}
body:not(.dark) .htec-row td:first-child { color: #6366f1 !important; }
body:not(.dark) .htec-row:hover td { background: rgba(99,102,241,0.05) !important; }
body:not(.dark) #mdl-historial-tec th { background: transparent !important; color: #64748b !important; border-bottom-color: rgba(0,0,0,0.08) !important; }
body.dark #mdl-historial-tec th { background: transparent !important; }
.htec-card.open { transform: scale(1) translateY(0); opacity: 1; }
.htec-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.htec-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(99,102,241,0.5), rgba(139,92,246,0.5));
  border: 2px solid rgba(99,102,241,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: #a5b4fc;
  flex-shrink: 0;
}
.htec-row { background: transparent !important; }
.htec-row:hover { background: rgba(99,102,241,0.07) !important; }
body.dark .htec-row td { border-bottom: 1px solid rgba(255,255,255,0.05); background: transparent !important; color: #cbd5e1; }
body.dark .htec-row td:first-child { color: #818cf8; font-weight: 600; }
body.dark .htec-row:hover td { background: rgba(99,102,241,0.07) !important; }

/* ── Barra flotante de asignación masiva CRM ─────────────────────────────── */
#crm-bulk-bar {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #0f1e3d; border: 1px solid rgba(99,102,241,0.4);
  border-radius: 16px; padding: 12px 20px; display: flex; align-items: center;
  gap: 12px; z-index: 9000; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: slideUp 0.2s ease backwards;
  white-space: nowrap; flex-wrap: wrap;
}
@keyframes slideUp {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}
#crm-bulk-bar .bulk-label { font-size: 13px; font-weight: 700; color: #e2e8f0; }
#crm-bulk-bar select {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(99,102,241,0.3);
  border-radius: 10px; color: #e2e8f0; padding: 6px 10px; font-size: 13px; outline: none;
}
#crm-bulk-bar .btn-bulk-assign {
  background: #6366f1; color: #fff; border: none; border-radius: 10px;
  padding: 7px 16px; font-size: 13px; font-weight: 700; cursor: pointer;
}
#crm-bulk-bar .btn-bulk-assign:hover { background: #4f46e5; }
#crm-bulk-bar .btn-bulk-delete {
  background: rgba(239,68,68,0.16);
  border: 1px solid rgba(239,68,68,0.4);
  color: #f87171;
  border-radius: 10px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
#crm-bulk-bar .btn-bulk-delete:hover { background: rgba(239,68,68,0.26); }
#crm-bulk-bar .btn-bulk-cancel {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  color: #94a3b8; border-radius: 10px; padding: 7px 14px; font-size: 13px; cursor: pointer;
}
#crm-bulk-bar .btn-bulk-cancel:hover { background: rgba(255,255,255,0.1); }
#crm-bulk-bar .bulk-group { display: flex; align-items: center; gap: 6px; }
#crm-bulk-bar .btn-bulk-assign { border: 1px solid rgba(99,102,241,0.5); }
.crm-cb { width: 16px; height: 16px; cursor: pointer; accent-color: #6366f1; flex-shrink: 0; }
@media (max-width: 490px) {
  #crm-bulk-bar { bottom: 72px; left: 12px; right: 12px; transform: none; justify-content: center; }
  @keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
}


/* ── Reporte Mensual ──────────────────────────────────────────────────────── */
/* ─── REPORTE TÉCNICO INDIVIDUAL ─────────────────────────────────────────── */
.rep-tec-link {
  color: #6366f1; cursor: pointer; font-weight: 600;
  text-decoration: underline dotted; transition: opacity 0.15s;
}
.rep-tec-link:hover { opacity: 0.75; }
.mdl-tec-card {
  background: #0f1e3d; border: 1px solid rgba(99,102,241,0.2);
  border-radius: 24px; width: 100%; max-width: 520px;
  max-height: 88vh; overflow-y: auto;
  box-shadow: 0 32px 64px rgba(0,0,0,0.5);
  animation: fadeInUp 0.2s ease;
}
body:not(.dark) .mdl-tec-card { background: #fff; border-color: rgba(99,102,241,0.15); }
.mdl-tec-header {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
body:not(.dark) .mdl-tec-header { border-color: rgba(0,0,0,0.06); }
.mdl-tec-avatar {
  width: 48px; height: 48px; border-radius: 16px;
  background: linear-gradient(135deg,#6366f1,#3b82f6);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.mdl-tec-nombre { font-size: 16px; font-weight: 700; color: var(--text); }
.mdl-tec-sub    { font-size: 12px; color: #64748b; margin-top: 2px; }
.mdl-tec-kpis {
  display: flex; gap: 0; padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
body:not(.dark) .mdl-tec-kpis { border-color: rgba(0,0,0,0.06); }
.tec-kpi { flex: 1; text-align: center; }
.tec-kpi-val { font-size: 20px; font-weight: 800; color: var(--text); }
.tec-kpi-lbl { font-size: 10px; color: #64748b; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.05em; }
.mdl-tec-section-title {
  font-size: 11px; font-weight: 700; color: #6366f1;
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 12px 20px 4px;
}
.tec-job-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 20px; cursor: pointer; transition: background 0.12s;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
body:not(.dark) .tec-job-row { border-color: rgba(0,0,0,0.04); }
.tec-job-row:hover { background: rgba(99,102,241,0.07); }
.tec-job-cod { font-size: 11px; font-weight: 700; color: #6366f1; min-width: 72px; flex-shrink: 0; }
.tec-job-cli { font-size: 12px; color: var(--text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tec-empty   { font-size: 12px; color: #64748b; padding: 10px 20px 6px; font-style: italic; }

/* ─── METAS MENSUALES ────────────────────────────────────────────────────── */
.metas-grid { display: flex; flex-direction: column; gap: 16px; padding: 4px 0 8px; }
.meta-item {}
.meta-label { font-size: 12px; font-weight: 600; color: #94a3b8; margin-bottom: 8px; }
.meta-bar-wrap { display: flex; flex-direction: column; gap: 6px; }
.meta-bar-track {
  width: 100%; height: 10px; border-radius: 99px;
  background: rgba(148,163,184,0.12); overflow: hidden;
}
.meta-bar-fill {
  height: 100%; border-radius: 99px;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}
.meta-bar-labels { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.meta-actual { color: var(--text); font-weight: 600; }
.meta-pct    { font-weight: 800; font-size: 13px; }
.meta-goal   { color: #64748b; font-size: 11px; }
.meta-sin-definir { font-size: 11px; color: #64748b; font-style: italic; padding: 4px 0; }
.metas-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.metas-field { display: flex; flex-direction: column; gap: 6px; }
.metas-field label { font-size: 11px; color: #94a3b8; font-weight: 600; }
.metas-field input {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(148,163,184,0.2);
  border-radius: 8px; padding: 8px 10px; color: var(--text); font-size: 13px;
  outline: none; transition: border 0.2s;
}
.metas-field input:focus { border-color: #6366f1; }
@media (max-width: 490px) {
  .metas-editor-grid { grid-template-columns: 1fr; }
}

/* ─── RECORDATORIOS ──────────────────────────────────────────────────────── */
.rec-list { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 4px; }
.rec-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid transparent; transition: all 0.15s;
  gap: 8px;
}
.rec-item:hover { transform: translateX(2px); }
.rec-item-red    { background: rgba(239,68,68,0.07);  border-color: rgba(239,68,68,0.18); }
.rec-item-yellow { background: rgba(245,158,11,0.07); border-color: rgba(245,158,11,0.18); }
.rec-item-base   { background: rgba(148,163,184,0.05); border-color: rgba(148,163,184,0.12); }
.rec-item-red:hover    { background: rgba(239,68,68,0.12); }
.rec-item-yellow:hover { background: rgba(245,158,11,0.12); }
.rec-item-base:hover   { background: rgba(148,163,184,0.09); }
.rec-item-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rec-cod    { font-size: 11px; font-weight: 700; color: #6366f1; }
.rec-cliente{ font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.rec-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.rec-estado { font-size: 11px; color: #94a3b8; }
.rec-tec    { font-size: 10px; color: #64748b; }
.rec-dias   { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 7px; }
.rec-dias-red    { color: #ef4444; background: rgba(239,68,68,0.1); }
.rec-dias-yellow { color: #f59e0b; background: rgba(245,158,11,0.1); }
.rec-dias-base   { color: #94a3b8; background: rgba(148,163,184,0.1); }

.reporte-table { width:100%; border-collapse:collapse; font-size:13px; margin-top:12px; }
.reporte-table th { font-size:11px; color:#94a3b8; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,0.08); text-align:left; background: transparent; }
.reporte-table td { padding:11px 14px; border-bottom:1px solid rgba(255,255,255,0.04); color:var(--text); background: transparent; }
.reporte-table tr:last-child td { border-bottom:none; }
.reporte-table tbody tr { transition: background 0.15s; }
body.dark .reporte-table td { background: transparent !important; }
body.dark .reporte-table tbody tr:hover td { background: rgba(99,102,241,0.07) !important; }
.rep-tasa-ok  { color:#22c55e; font-weight:700; }
.rep-tasa-med { color:#f59e0b; font-weight:700; }
.rep-tasa-low { color:#ef4444; font-weight:700; }
.rep-nav { display:flex; align-items:center; gap:8px; }
.rep-nav button { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:var(--text); border-radius:8px; padding:4px 10px; cursor:pointer; font-size:14px; }
.rep-nav button:hover { background:rgba(255,255,255,0.12); }


/* ═══════════════════════════════════════════════════════════════
   ✦  OVERHAUL ESTÉTICO v3  —  solo visual, sin romper funciones
   ═══════════════════════════════════════════════════════════════ */

/* 1. Fondo con gradiente sutil */
body.dark .app-layout {
  background: radial-gradient(ellipse 80% 50% at 20% 0%, rgba(99,102,241,0.08) 0%, transparent 60%),
              radial-gradient(ellipse 60% 40% at 80% 100%, rgba(139,92,246,0.06) 0%, transparent 55%),
              #020617 !important;
}

/* 2. Logo con gradiente */
body.dark .sidebar-logo-text {
  background: linear-gradient(135deg, #a5b4fc 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}

/* 3. KPI cards — borde izquierdo de color por tipo */
body.dark .ks-card:has(.ks-icon-clientes)  { border-left: 3px solid #6366f1; }
body.dark .ks-card:has(.ks-icon-ingresos)  { border-left: 3px solid #10b981; }
body.dark .ks-card:has(.ks-icon-gastos)    { border-left: 3px solid #ef4444; }
body.dark .ks-card:has(.ks-icon-ganancias) { border-left: 3px solid #f59e0b; }
body.dark .ks-card:has(.ks-icon-iva)       { border-left: 3px solid #8b5cf6; }
body.dark .ks-card:has(.ks-icon-pendiente) { border-left: 3px solid #f59e0b; }
body.dark .ks-card:has(.ks-icon-curso)     { border-left: 3px solid #3b82f6; }
body.dark .ks-card:has(.ks-icon-cancel)    { border-left: 3px solid #ef4444; }
body.dark .ks-card:has(.ks-icon-fin)       { border-left: 3px solid #10b981; }
body.dark .ks-card:has(.ks-icon-aprobar)   { border-left: 3px solid #f59e0b; }

/* 4. Números KPI más grandes y bold */
body.dark .ks-val {
  font-size: clamp(18px, 1.8vw, 28px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em;
}

/* 5. Barra de filtros del dashboard — glass */
body.dark .dash-filter-bar,
body.dark .period-bar {
  background: rgba(15, 23, 42, 0.7) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 14px;
}

/* 6. Tarjeta de búsqueda CRM — glass */
body.dark .crm-search-card,
body.dark .crm-top-card {
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(99,102,241,0.15) !important;
  border-radius: 16px;
}

/* 7. Kanban cards — más profundidad */
body.dark .crm-card {
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.04) inset !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
body.dark .crm-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(99,102,241,0.2) !important;
}

/* 8. Modal — más profundidad */
body.dark .mdl-card {
  background: rgba(10, 18, 38, 0.95) !important;
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 25px 80px rgba(0,0,0,0.6) !important;
}

/* 9. Scrollbars premium */
body.dark ::-webkit-scrollbar { width: 4px; height: 4px; }
body.dark ::-webkit-scrollbar-track { background: transparent; }
body.dark ::-webkit-scrollbar-thumb {
  background: rgba(99,102,241,0.4);
  border-radius: 999px;
}
body.dark ::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.7); }

/* 10. Pill "Conectado" con glow */
body.dark .status-pill.online,
body.dark #status-pill.online {
  box-shadow: 0 0 10px rgba(16,185,129,0.4);
}

/* 11. Botón primario con gradiente */
body.dark .btn-primary,
body.dark button.primary,
body.dark #btn-buscar-crm {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(99,102,241,0.35) !important;
}
body.dark .btn-primary:hover,
body.dark button.primary:hover,
body.dark #btn-buscar-crm:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  box-shadow: 0 6px 20px rgba(99,102,241,0.5) !important;
}

/* 12. Nav item activo — highlight más vivo */
body.dark .nav-item.active,
body.dark .sidebar-nav .active {
  background: linear-gradient(90deg, rgba(99,102,241,0.2), rgba(99,102,241,0.05)) !important;
  border-left: 3px solid #6366f1 !important;
}

/* ═══════════════════════════════════════════════════════════════ */

/* ── AESTHETIC MÓVIL ≤500px ──────────────────────────────────── */
@media (max-width: 490px) {

  /* Fondo gradiente también en móvil */
  body.dark .app-layout {
    background:
      radial-gradient(ellipse 120% 40% at 50% 0%, rgba(99,102,241,0.1) 0%, transparent 60%),
      #020617 !important;
  }

  /* KPI cards móvil — borde izquierdo de color */
  body.dark .ks-card:has(.ks-icon-clientes)  { border-left: 3px solid #6366f1 !important; }
  body.dark .ks-card:has(.ks-icon-ingresos)  { border-left: 3px solid #10b981 !important; }
  body.dark .ks-card:has(.ks-icon-gastos)    { border-left: 3px solid #ef4444 !important; }
  body.dark .ks-card:has(.ks-icon-ganancias) { border-left: 3px solid #f59e0b !important; }
  body.dark .ks-card:has(.ks-icon-iva)       { border-left: 3px solid #8b5cf6 !important; }
  body.dark .ks-card:has(.ks-icon-pendiente) { border-left: 3px solid #f59e0b !important; }
  body.dark .ks-card:has(.ks-icon-curso)     { border-left: 3px solid #3b82f6 !important; }
  body.dark .ks-card:has(.ks-icon-cancel)    { border-left: 3px solid #ef4444 !important; }
  body.dark .ks-card:has(.ks-icon-fin)       { border-left: 3px solid #10b981 !important; }
  body.dark .ks-card:has(.ks-icon-aprobar)   { border-left: 3px solid #f59e0b !important; }

  /* Números KPI más grandes en móvil */
  body.dark .ks-val {
    font-size: 22px !important;
    font-weight: 900 !important;
  }

  /* Cards CRM móvil — profundidad */
  body.dark .crm-card {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
  }

  /* Modal móvil */
  body.dark .mdl-card {
    background: rgba(10, 18, 38, 0.98) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
  }

  /* Scrollbars en móvil — más delgados */
  body.dark ::-webkit-scrollbar { width: 2px; height: 2px; }

  /* Botón primario gradiente en móvil */
  body.dark #btn-buscar-crm,
  body.dark .btn-primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    box-shadow: 0 3px 12px rgba(99,102,241,0.3) !important;
  }

  /* Logo gradiente en móvil */
  body.dark .sidebar-logo-text {
    background: linear-gradient(135deg, #a5b4fc 0%, #c4b5fd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Tarjeta búsqueda CRM glass en móvil */
  body.dark .crm-search-card,
  body.dark .crm-top-card {
    background: rgba(15, 23, 42, 0.7) !important;
    border: 1px solid rgba(99,102,241,0.12) !important;
  }
}

/* ── MEJORA 2: Borde activo cards estado y SIN TÉCNICO ───────────────────── */
#crm-k-sintec-card.sintec-active {
  border-color: #06b6d4 !important;
  box-shadow: 0 0 0 2px rgba(6,182,212,0.3), 0 15px 45px rgba(6,182,212,0.3) !important;
}
#crm-k-pnd-card.estado-active  { border-color: #f59e0b !important; box-shadow: 0 0 0 2px rgba(245,158,11,0.3), 0 10px 30px rgba(245,158,11,0.25) !important; }
#crm-k-curs-card.estado-active { border-color: #6366f1 !important; box-shadow: 0 0 0 2px rgba(99,102,241,0.3), 0 10px 30px rgba(99,102,241,0.25) !important; }
#crm-k-apr-card.estado-active  { border-color: #fb923c !important; box-shadow: 0 0 0 2px rgba(251,146,60,0.3), 0 10px 30px rgba(251,146,60,0.25) !important; }
#crm-k-canc-card.estado-active { border-color: #ef4444 !important; box-shadow: 0 0 0 2px rgba(239,68,68,0.3), 0 10px 30px rgba(239,68,68,0.25) !important; }
#crm-k-fin-card.estado-active  { border-color: #22c55e !important; box-shadow: 0 0 0 2px rgba(34,197,94,0.3), 0 10px 30px rgba(34,197,94,0.25) !important; }

/* ── MEJORA 3: Badge punto en botón técnico ──────────────────────────────── */
.crm-tec-filter-btn.has-filter::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #06b6d4;
  box-shadow: 0 0 0 2px rgba(6,182,212,0.25);
  pointer-events: none;
}
.crm-tec-filter-btn {
  position: relative;
}

/* ── MEJORA 5: Drag & drop kanban (CSS adicional) ───────────────────────── */
.crm-card[draggable="true"] { cursor: grab; }
.crm-card.dragging { opacity: 0.4; }
.kanban-col.drag-over {
  background: rgba(99,102,241,0.08) !important;
  border: 2px dashed rgba(99,102,241,0.4) !important;
}

/* ── MEJORA 6: Tooltips KPI cards ───────────────────────────────────────── */
.k-stat-card[title] {
  position: relative;
  cursor: help;
}
.k-stat-card[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15,23,42,0.95);
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  border: 1px solid rgba(99,102,241,0.25);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  max-width: 220px;
  white-space: normal;
  text-align: center;
  line-height: 1.4;
}
.k-stat-card[title]:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(15,23,42,0.95);
  pointer-events: none;
  z-index: 9999;
}

/* ── MEJORA 7: Print / Exportar PDF ────────────────────────────────────── */
@media print {
  .sidebar,
  .topbar,
  .mobile-toggle,
  .mobile-logo,
  #toast-container,
  #global-loader,
  .crm-sticky-header,
  .kanban-board-wrap > :not(#kanban-board),
  .crm-view-toggle,
  .crm-filter-row,
  .search-card-premium,
  #ptr-indicator,
  #offline-banner {
    display: none !important;
  }
  .main-content {
    overflow: visible !important;
    padding: 12px !important;
    position: static !important;
  }
  #s-crm.on,
  .sec.on {
    display: block !important;
  }
  #kanban-board {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    overflow: visible !important;
  }
  .k-col {
    break-inside: avoid;
    width: 180px;
  }
  body {
    background: white !important;
    color: #111 !important;
  }
}

.rep-nav-label { font-size:13px; font-weight:700; color:var(--text); min-width:100px; text-align:center; }

/* ── Dashboard Técnico ──────────────────────────────────────────────────────── */
#tec-dash {
  padding-bottom: 32px;
}
#tec-dash-body .k-stat-card {
  user-select: none;
}
.tec-job-row {
  transition: background 0.15s, box-shadow 0.15s;
}
.tec-job-row:hover {
  background: rgba(99,102,241,0.06) !important;
  box-shadow: 0 2px 12px rgba(99,102,241,0.08);
}

/* ── Mejoras Mobile (≤ 500px) ───────────────────────────────────────────────── */
@media (max-width: 490px) {

  /* KPIs del dashboard: 2 columnas en móvil */
  .k-stats-grid.k-grid-dash-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Filtro de fechas: apilar en columna */
  .dash-filter-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .df-pills {
    flex-wrap: wrap;
    gap: 4px;
  }
  .df-custom {
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .df-custom input[type="date"] {
    flex: 1;
    min-width: 110px;
  }
  .df-aplicar {
    width: 100%;
  }

  /* CRM móvil: scroll vertical completo en lugar de header fijo */
  #s-crm.sec.on {
    overflow-y: auto !important;
    flex-direction: column !important;
  }
  .crm-sticky-header {
    flex-shrink: unset !important;
    position: static !important;
  }
  .kanban-board-wrap {
    flex: unset !important;
    overflow: visible !important;
    min-height: 0 !important;
  }
  .kanban-board {
    overflow-x: auto !important;
  }

  /* View toggle: scroll horizontal sin saltar de línea */
  .crm-view-toggle {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
  }
  .crm-view-toggle::-webkit-scrollbar { display: none; }

  /* Cards del CRM — chips de estado más compactos */
  .k-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .k-stat-card {
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  .ks-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    flex-shrink: 0;
  }
  .ks-val {
    font-size: 20px !important;
  }
  .ks-lbl {
    font-size: 9px !important;
  }

  /* Botones de acción en tabla de clientes */
  .btn-action-premium {
    font-size: 11px !important;
    padding: 5px 9px !important;
  }

  /* Modal: ancho completo */
  #mdl-box {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }
  #mdl {
    align-items: flex-end !important;
  }

  /* Glosario: cards en columna */
  .gls-grid {
    grid-template-columns: 1fr !important;
  }

  /* CRM sticky header: reducir padding */
  .crm-sticky-header {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .crm-filter-row {
    flex-wrap: wrap;
    gap: 6px !important;
  }

  /* Dashboard técnico: KPIs 2 col */
  #tec-dash-body .k-stats-grid,
  #tec-dash-body > div > [style*="grid-template-columns"] {
    grid-template-columns: repeat(2,1fr) !important;
  }

  /* Modal técnico: KPIs en 2 filas de 3+2 */
  .mdl-tec-kpis {
    flex-wrap: wrap !important;
    gap: 0 !important;
  }
  .tec-kpi {
    min-width: 30% !important;
    padding: 8px 4px !important;
  }

  /* Modal técnico: card full-width desde abajo */
  .mdl-tec-card {
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 92vh !important;
  }
  #mdl-tecnico {
    align-items: flex-end !important;
  }

  /* KPI bar top: 2 columnas en móvil */
  #kpi-bar > div {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Modal detalles: botones footer más pequeños */
  .mdl-ftr button {
    font-size: 12px !important;
    padding: 8px 10px !important;
  }

  /* Cotizador mobile */
  .fgrid { grid-template-columns: 1fr !important; }
  .row-cot { flex-direction: column !important; }
  .col-mob-contents { width: 100% !important; min-width: unset !important; }
  .stepper-premium { flex-direction: row !important; }
  #s-cot .card { margin-bottom: 12px !important; }
  /* QS filter bar scroll */
  #qs-filter-bar { overflow-x: auto; flex-wrap: nowrap !important; }
}

/* ── Pills filtro técnico ───────────────────────────────────────────────────── */
.tec-mes-pill {
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid var(--border, rgba(148,163,184,0.2));
  background: transparent;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.tec-mes-pill:hover {
  border-color: rgba(99,102,241,0.4);
  color: #818cf8;
  background: rgba(99,102,241,0.06);
}
.tec-mes-pill.active {
  background: rgba(99,102,241,0.15);
  border-color: rgba(99,102,241,0.5);
  color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
body.dark .tec-mes-pill {
  border-color: rgba(255,255,255,0.08);
  color: #64748b;
}
body.dark .tec-mes-pill.active {
  color: #a5b4fc;
  background: rgba(99,102,241,0.2);
  border-color: rgba(99,102,241,0.5);
}

/* ── Fix dropdown clientes: la .card tiene overflow:hidden que corta el dropdown ── */
#s-cli .card:has(#cs-status-container) {
  overflow: visible;
}
/* Fallback para navegadores sin :has() */
#s-cli .card:first-of-type {
  overflow: visible;
}

/* ── Fix dropdown documentos: el picker de usuario debe flotar sobre las tarjetas ── */
#s-doc #doc-admin-panel {
  overflow: visible !important;
  position: relative;
  z-index: 2500;
}

#s-doc #doc-target-combo {
  position: relative;
  z-index: 2501;
}

#s-doc #doc-target-menu {
  z-index: 2502 !important;
}

#s-doc .doc-type-tab {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(255,255,255,0.04);
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#s-doc .doc-type-tab:hover {
  background: rgba(59,130,246,0.12);
  border-color: rgba(59,130,246,0.35);
  color: #bfdbfe;
}

#s-doc .doc-type-tab.active {
  background: rgba(59,130,246,0.2);
  border-color: rgba(59,130,246,0.55);
  color: #60a5fa;
}

/* Filtro propietario en documentos — evita que select{width:100%} global lo expanda */
#doc-owner-filter {
  width: auto !important;
  min-width: 160px !important;
  max-width: 260px !important;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   TAREAS MODULE
   ══════════════════════════════════════════════════════════════ */

/* ── Toolbar ── */
.tar-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.tar-controls {
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.tar-controls > div {
  min-width: 180px;
}

.tar-controls #tar-tecnico-wrap {
  flex: 1 1 280px;
}

.tar-controls #tar-fecha-wrap {
  flex: 0 1 180px;
}

.tar-controls label {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}

.tar-controls .inp {
  width: 100%;
  height: 42px;
  padding: 8px 12px;
}

.tar-date-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.tar-date-row .inp {
  min-width: 0;
}

.tar-all-dates-btn {
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(99,102,241,.24);
  background: rgba(99,102,241,.08);
  color: #4f46e5;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.tar-all-dates-btn.active {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

body.dark .tar-all-dates-btn {
  background: rgba(99,102,241,.14);
  border-color: rgba(129,140,248,.22);
  color: #a5b4fc;
}

body.dark .tar-all-dates-btn.active {
  background: #6366f1;
  border-color: #818cf8;
  color: #fff;
}

.tar-mini-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(99,102,241,.18);
  background: rgba(15,23,42,.04);
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}
.tar-mini-stat b {
  color: #334155;
  font-size: 18px;
}
.tar-mini-stat.warn {
  border-color: rgba(245,158,11,.28);
  color: #b45309;
}
body.dark .tar-mini-stat {
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.08);
  color: #94a3b8;
}
body.dark .tar-mini-stat b { color: #e2e8f0; }
body.dark .tar-mini-stat.warn {
  border-color: rgba(245,158,11,.22);
  color: #fbbf24;
}

.tar-bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid rgba(239,68,68,.16);
  border-radius: 10px;
  background: rgba(239,68,68,.05);
}

.tar-select-all,
.tar-select-task {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
}

.tar-select-task {
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  border-radius: 8px;
  background: rgba(148,163,184,.10);
}

.tar-select-all input,
.tar-select-task input {
  width: 16px;
  height: 16px;
  accent-color: #ef4444;
}

.tar-bulk-delete,
.tar-bulk-clear {
  height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.tar-bulk-delete {
  border: 1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.16);
  color: #f87171;
}

.tar-bulk-delete:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.tar-bulk-clear {
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(148,163,184,.08);
  color: #94a3b8;
}

.tar-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}

.tar-filter-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.tar-filter-btn:hover {
  border-color: #6366f1;
  color: #6366f1;
}
.tar-filter-btn.active {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

body.dark .tar-filter-btn {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: #94a3b8;
}
body.dark .tar-filter-btn:hover {
  border-color: #818cf8;
  color: #818cf8;
}
body.dark .tar-filter-btn.active {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

.tar-view-btns {
  display: flex;
  gap: 4px;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 3px;
}
body.dark .tar-view-btns {
  background: rgba(255,255,255,0.06);
}

.tar-view-btn {
  padding: 5px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.tar-view-btn:hover { color: #334155; }
.tar-view-btn.active {
  background: #fff;
  color: #6366f1;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
body.dark .tar-view-btn:hover { color: #cbd5e1; }
body.dark .tar-view-btn.active {
  background: rgba(255,255,255,0.10);
  color: #a5b4fc;
}

/* ── Kanban ── */
.tar-kanban {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}

.tar-col {
  background: #f8fafc;
  border-radius: 14px;
  border: 1.5px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  min-height: 120px;
  overflow: hidden;
}
body.dark .tar-col {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}

.tar-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  border-bottom: 1.5px solid #e2e8f0;
}
body.dark .tar-col-header {
  border-color: rgba(255,255,255,0.08);
}

.col-pendiente .tar-col-header  { color: #f59e0b; }
.col-progreso  .tar-col-header  { color: #6366f1; }
.col-completada .tar-col-header { color: #10b981; }

.tar-col-count {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(0,0,0,0.06);
  color: inherit;
}
body.dark .tar-col-count {
  background: rgba(255,255,255,0.08);
}

.tar-col-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tar-empty {
  text-align: center;
  padding: 20px 10px;
  color: #94a3b8;
  font-size: 13px;
}
body.dark .tar-empty { color: #475569; }

/* ── Task Card ── */
.tar-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: default;
  transition: box-shadow .15s, border-color .15s;
}
.tar-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  border-color: #c7d2e0;
}
body.dark .tar-card {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
}
body.dark .tar-card:hover {
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}

.tar-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 5px;
}

.tar-card-actions {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .15s;
}
.tar-card:hover .tar-card-actions { opacity: 1; }

.tar-card-btn {
  border: none;
  background: none;
  padding: 3px 5px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  color: #94a3b8;
  transition: color .15s, background .15s;
}
.tar-card-btn:hover {
  background: #f1f5f9;
  color: #475569;
}
body.dark .tar-card-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #cbd5e1;
}

.tar-card-title {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.3;
  word-break: break-word;
}
body.dark .tar-card-title { color: #f1f5f9; }

.tar-card-desc {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.dark .tar-card-desc { color: #94a3b8; }

.tar-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-top: 6px;
}

/* ── Meta chips ── */
.tar-asignado, .tar-ot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
  font-weight: 500;
}
body.dark .tar-asignado, body.dark .tar-ot {
  background: rgba(255,255,255,0.07);
  color: #94a3b8;
}

.tar-fecha {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 500;
  background: #f1f5f9;
  color: #64748b;
}
.tar-fecha.vencida {
  background: rgba(239,68,68,.1);
  color: #ef4444;
}
.tar-fecha.hoy {
  background: rgba(245,158,11,.1);
  color: #f59e0b;
}
.tar-fecha.pronto {
  background: rgba(99,102,241,.08);
  color: #6366f1;
}
body.dark .tar-fecha {
  background: rgba(255,255,255,0.07);
  color: #94a3b8;
}
body.dark .tar-fecha.vencida { background: rgba(239,68,68,.15); color: #f87171; }
body.dark .tar-fecha.hoy     { background: rgba(245,158,11,.15); color: #fbbf24; }
body.dark .tar-fecha.pronto  { background: rgba(99,102,241,.15); color: #a5b4fc; }

/* ── Priority badge ── */
.tar-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tar-prio-alta  { background: rgba(239,68,68,.12);  color: #ef4444; }
.tar-prio-media { background: rgba(245,158,11,.12); color: #f59e0b; }
.tar-prio-baja  { background: rgba(16,185,129,.10); color: #10b981; }
body.dark .tar-prio-alta  { background: rgba(239,68,68,.2);  color: #f87171; }
body.dark .tar-prio-media { background: rgba(245,158,11,.2); color: #fbbf24; }
body.dark .tar-prio-baja  { background: rgba(16,185,129,.18); color: #34d399; }

/* ── List view ── */
.tar-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tar-table thead tr {
  border-bottom: 2px solid #e2e8f0;
}
body.dark .tar-table thead tr { border-color: rgba(255,255,255,0.10); }
.tar-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #94a3b8;
}
body.dark .tar-table th { background: rgba(99,102,241,0.07); }
.tar-table td {
  padding: 10px 12px;
  vertical-align: middle;
  color: #334155;
}
body.dark .tar-table td { color: #cbd5e1; }
.tar-row {
  border-bottom: 1px solid #f1f5f9;
  transition: background .12s;
}
.tar-row:hover { background: #f8fafc; }
body.dark .tar-row { border-color: rgba(255,255,255,0.05); }
body.dark .tar-row:hover { background: transparent; }
body.dark .tar-row:hover td { background: rgba(99,102,241,0.14) !important; }
body.dark .tar-table tbody tr:nth-child(odd)  td { background: rgba(255,255,255,0.025); }
body.dark .tar-table tbody tr:nth-child(even) td { background: rgba(99,102,241,0.06); }

.tar-estado-pendiente  { color: #f59e0b; font-weight: 600; }
.tar-estado-en_progreso{ color: #6366f1; font-weight: 600; }
.tar-estado-completada { color: #10b981; font-weight: 600; }
.tar-estado-cancelada  { color: #94a3b8; font-weight: 600; text-decoration: line-through; }
.tar-visto { font-size: 11px; color: #94a3b8; white-space: nowrap; }

/* ── Status / feedback ── */
.tar-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 0;
  color: #6366f1;
  font-size: 14px;
}
.tar-loading::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid rgba(99,102,241,.3);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.tar-error {
  text-align: center;
  padding: 40px 0;
  color: #ef4444;
  font-size: 14px;
}
body.dark .tar-error { color: #f87171; }

.tar-empty-full {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 56px 0;
  color: #94a3b8;
  font-size: 14px;
  text-align: center;
}
.tar-empty-full .icon { font-size: 36px; opacity: .4; }
body.dark .tar-empty-full { color: #475569; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .tar-kanban {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  /* Apiladas en móvil: las columnas vacías no deben dejar un hueco alto */
  .tar-col {
    min-height: auto;
  }
}

@media (max-width: 600px) {
  .tar-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .tar-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .tar-controls > div {
    min-width: 0;
    flex: 0 0 auto;
  }
  .tar-controls #tar-tecnico-wrap,
  .tar-controls #tar-fecha-wrap {
    flex: 0 0 auto;
  }
  .tar-filters {
    justify-content: center;
  }
  .tar-view-btns {
    justify-content: center;
    align-self: center;
  }
  .tar-table th:nth-child(4),
  .tar-table td:nth-child(4),
  .tar-table th:nth-child(5),
  .tar-table td:nth-child(5) {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   SUBTAREAS DE OT
   ══════════════════════════════════════════════════════════════ */

.sub-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1.5px solid #e2e8f0;
}
body.dark .sub-section { border-color: rgba(255,255,255,0.10); }

.sub-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.sub-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
}
body.dark .sub-section-title { color: #f1f5f9; }

.sub-progress-wrap {
  flex: 1;
  height: 6px;
  background: #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}
body.dark .sub-progress-wrap { background: rgba(255,255,255,0.12); }

.sub-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 10px;
  transition: width .35s ease;
  width: 0%;
}

.sub-progress-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}
body.dark .sub-progress-label { color: #94a3b8; }

.sub-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.sub-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1.5px solid #f1f5f9;
  background: #fafafa;
  transition: background .12s, border-color .12s;
}
.sub-item:hover { border-color: #e2e8f0; background: #f8fafc; }
.sub-item.done { opacity: .6; }
body.dark .sub-item { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }
body.dark .sub-item:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); }

/* Custom checkbox */
.sub-checkbox-wrap {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
}
.sub-checkbox-native {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.sub-checkbox-custom {
  width: 16px; height: 16px;
  border: 2px solid #cbd5e1;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  background: #fff;
  flex-shrink: 0;
}
.sub-checkbox-native:checked ~ .sub-checkbox-custom {
  background: #10b981;
  border-color: #10b981;
}
.sub-checkbox-native:checked ~ .sub-checkbox-custom::after {
  content: '✓';
  font-size: 10px;
  color: #fff;
  font-weight: 700;
}
body.dark .sub-checkbox-custom { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); }

.sub-item-body {
  flex: 1;
  min-width: 0;
}

.sub-item-title {
  font-size: 13px;
  color: #1e293b;
  display: block;
  word-break: break-word;
}
.sub-item.done .sub-item-title {
  text-decoration: line-through;
  color: #94a3b8;
}
body.dark .sub-item-title { color: #cbd5e1; }
body.dark .sub-item.done .sub-item-title { color: #475569; }

.sub-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 3px;
}

.sub-prio-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sub-fecha, .sub-asig {
  font-size: 11px;
  color: #64748b;
}
body.dark .sub-fecha, body.dark .sub-asig { color: #94a3b8; }

.sub-del-btn {
  border: none;
  background: none;
  color: #cbd5e1;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .15s;
}
.sub-item:hover .sub-del-btn { opacity: 1; }
.sub-del-btn:hover { color: #ef4444; background: rgba(239,68,68,.08); }

/* Add row */
.sub-add-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.sub-input {
  flex: 1;
  padding: 7px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  color: #1e293b;
  background: #fff;
  outline: none;
  transition: border-color .15s;
}
.sub-input:focus { border-color: #6366f1; }
body.dark .sub-input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #f1f5f9; }
body.dark .sub-input:focus { border-color: #818cf8; }

.sub-add-btn {
  padding: 7px 14px;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.sub-add-btn:hover { background: #4f46e5; }

/* Status */
.sub-loading, .sub-error, .sub-empty {
  font-size: 13px;
  padding: 10px 0;
  color: #94a3b8;
  text-align: center;
}
.sub-error { color: #ef4444; }
body.dark .sub-error { color: #f87171; }

/* ══════════════════════════════════════════════════════════════
   CALENDARIO MODULE — Phase 1
   ══════════════════════════════════════════════════════════════ */

.cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cal-nav-btn {
  width: 32px; height: 32px;
  border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.cal-nav-btn:hover { border-color: #818cf8; color: #818cf8; }

.cal-mes-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #f1f5f9);
  min-width: 160px;
  text-align: center;
}

.cal-view-btns {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 3px;
}

.cal-view-btn {
  padding: 5px 14px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.cal-view-btn:hover { color: #cbd5e1; }
.cal-view-btn.active { background: rgba(255,255,255,0.10); color: #a5b4fc; box-shadow: 0 1px 4px rgba(0,0,0,.2); }

/* Month grid — new Phase 1 classes (override old .cal-grid if needed) */
.cal-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 2px;
}

.cal-day-header {
  text-align: center;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #94a3b8;
}

.cal-cell {
  min-height: 90px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 4px 6px;
  background: rgba(255,255,255,0.03);
  overflow: hidden;
  transition: background .12s;
}
.cal-cell:hover { background: rgba(255,255,255,0.06); }
.cal-cell.otro-mes { background: transparent; border-color: transparent; }
.cal-cell.hoy { border-color: #6366f1; background: rgba(99,102,241,.10); }

.cal-day-num {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 3px;
}
.cal-cell.hoy .cal-day-num { color: #a5b4fc; font-weight: 800; }

.cal-ot-chip {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 5px;
  border-radius: 4px;
  margin-bottom: 2px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  transition: opacity .12s;
}
.cal-ot-chip:hover { opacity: .8; }
.chip-pendiente    { background: rgba(245,158,11,.15); color: #d97706; }
.chip-en_progreso  { background: rgba(99,102,241,.15); color: #6366f1; }
.chip-completada   { background: rgba(16,185,129,.12); color: #059669; }
.chip-cancelada    { background: rgba(148,163,184,.12); color: #94a3b8; }
body.dark .chip-pendiente   { background: rgba(245,158,11,.2);  color: #fbbf24; }
body.dark .chip-en_progreso { background: rgba(99,102,241,.2);  color: #a5b4fc; }
body.dark .chip-completada  { background: rgba(16,185,129,.18); color: #34d399; }
body.dark .chip-cancelada   { background: rgba(148,163,184,.1); color: #64748b; }

.cal-more {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
  padding: 1px 4px;
}

/* Agenda view */
.cal-agenda {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cal-agenda-date {
  font-size: 13px;
  font-weight: 700;
  color: #6366f1;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 8px 0 10px;
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 10px;
}
body.dark .cal-agenda-date { color: #a5b4fc; border-color: rgba(255,255,255,0.10); }

.cal-agenda-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}
.cal-agenda-card:hover { border-color: rgba(255,255,255,0.18); box-shadow: 0 4px 12px rgba(0,0,0,.2); }

.cal-agenda-title {
  font-size: 14px;
  font-weight: 600;
  color: #f1f5f9;
}

.cal-agenda-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.cal-agenda-codigo {
  font-size: 11px;
  background: #f1f5f9;
  color: #475569;
  padding: 2px 7px;
  border-radius: 5px;
  font-weight: 600;
  font-family: monospace;
}
body.dark .cal-agenda-codigo { background: rgba(255,255,255,0.08); color: #94a3b8; }

.cal-agenda-estado {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 5px;
  text-transform: capitalize;
}

.cal-agenda-tec,
.cal-agenda-fecha {
  font-size: 11px;
  color: #64748b;
}
body.dark .cal-agenda-tec,
body.dark .cal-agenda-fecha { color: #94a3b8; }

@media (max-width: 600px) {
  .cal-toolbar { flex-direction: column; align-items: stretch; }
  .cal-view-btns { align-self: center; }
  .cal-cell { min-height: 60px; }
  .cal-ot-chip { display: none; }
  .cal-cell.hoy .cal-ot-chip { display: block; }
  .cal-mes-label { min-width: auto; }
}

/* ── Timeline / Gantt ───────────────────────────────────────────────────────── */
.cal-timeline {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}

/* Header row */
.cal-tl-header-row {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(15,23,42,0.98);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.cal-tl-label-hdr {
  width: 148px;
  min-width: 148px;
  flex-shrink: 0;
  position: sticky;
  left: 0;
  z-index: 4;
  background: rgba(15,23,42,0.98);
}

.cal-tl-day-hdr {
  flex: 1;
  min-width: 42px;
  text-align: center;
  padding: 6px 2px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border-right: 1px solid rgba(255,255,255,0.06);
  user-select: none;
}
.cal-tl-day-hdr.tl-hdr-wkend { background: rgba(100,116,139,0.10); }
.cal-tl-day-hdr.tl-hdr-hoy   { background: rgba(99,102,241,0.18); }

.tl-dow  { font-size: 9px;  color: #64748b;  text-transform: uppercase; letter-spacing: .5px; }
.tl-dnum { font-size: 13px; font-weight: 600; color: #cbd5e1; line-height: 1; }
.tl-mon  { font-size: 9px;  color: #6366f1;  font-weight: 700; letter-spacing: .4px; }
.cal-tl-day-hdr.tl-hdr-hoy .tl-dnum { color: #a5b4fc; }

/* OT rows */
.cal-tl-row {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  min-height: 44px;
}
.cal-tl-row:hover { background: rgba(99,102,241,0.04); }

.cal-tl-label-col {
  width: 148px;
  min-width: 148px;
  flex-shrink: 0;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #1e293b;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.tl-lbl-cliente {
  font-size: 12px;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.tl-lbl-codigo {
  font-size: 10px;
  color: #64748b;
  letter-spacing: .3px;
  margin-top: 2px;
}

/* Track — grid of cells + positioned bar */
.cal-tl-track {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(14, minmax(42px, 1fr));
  position: relative;
  align-items: stretch;
}

.cal-tl-cell {
  border-right: 1px solid rgba(255,255,255,0.05);
  min-height: 44px;
}
.cal-tl-cell.tl-cell-wkend { background: rgba(100,116,139,0.07); }
.cal-tl-cell.tl-cell-hoy   { background: rgba(99,102,241,0.10); }

/* Bar */
.cal-tl-bar {
  position: absolute;
  top: 7px;
  height: calc(100% - 14px);
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 8px;
  overflow: hidden;
  white-space: nowrap;
  z-index: 1;
  transition: filter .15s, transform .1s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.cal-tl-bar:hover {
  filter: brightness(1.18);
  transform: scaleY(1.08);
}

.tl-bar-txt {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

/* Bar colours reuse chip-* classes */
/* Chip colours for trabajos estados (normalized lowercase-dash) */
.chip-pendiente    { background: rgba(245,158,11,.22); color: #fbbf24; }
.chip-en-curso     { background: rgba(99,102,241,.22); color: #a5b4fc; }
.chip-finalizado   { background: rgba(16,185,129,.18); color: #34d399; }
.chip-cancelado    { background: rgba(148,163,184,.12); color: #94a3b8; }
.chip-por-aprobar  { background: rgba(139,92,246,.22); color: #c4b5fd; }

/* Timeline bars — solid gradient fill */
.cal-tl-bar.chip-pendiente   { background: linear-gradient(90deg,#f59e0b,#d97706); }
.cal-tl-bar.chip-en-curso    { background: linear-gradient(90deg,#6366f1,#4f46e5); }
.cal-tl-bar.chip-finalizado  { background: linear-gradient(90deg,#10b981,#059669); }
.cal-tl-bar.chip-cancelado   { background: linear-gradient(90deg,#ef4444,#dc2626); }
.cal-tl-bar.chip-por-aprobar { background: linear-gradient(90deg,#8b5cf6,#7c3aed); }

@media (max-width: 600px) {
  .cal-tl-label-col,
  .cal-tl-label-hdr { width: 90px; min-width: 90px; }
  .tl-lbl-cliente   { font-size: 10px; }
  .cal-tl-day-hdr   { min-width: 32px; }
  .cal-tl-track     { grid-template-columns: repeat(14, minmax(32px, 1fr)); }
}

/* ─── iOS ZOOM FIX ─────────────────────────────────────────────────────────
   iOS Safari auto-zooms when an input with font-size < 16px gains focus.
   Force 16px on all touch devices to prevent the viewport zoom on tab switch.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Disable transform in .sec fade-in on mobile — translateY triggers layout
     recalculation that can appear as a zoom on iOS Safari */
  @keyframes secFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .sec {
    transform: none !important;
  }
}

/* ── Nuevos gráficos del dashboard ─────────────────────────────────────────── */
.dash-card {
  background: #0e1729;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 20px 24px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  position: relative;
  overflow: hidden;
}
.dash-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, rgba(99,102,241,0.1), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.dash-card > * { position: relative; z-index: 1; }
.dash-card-title { font-size:12px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; }

/* ── Premium Custom Select ─────────────────────────────────────────────────── */
.psel-wrap { position: relative; width: 100%; }

.psel-trigger {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: #94a3b8; font-size: 14px; font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  outline: none;
}
.psel-trigger:hover {
  border-color: rgba(99,102,241,0.5);
  background: rgba(99,102,241,0.05);
}
.psel-trigger.open {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
  background: rgba(99,102,241,0.07);
}
.psel-trigger.psel-has-value { color: #e2e8f0; }
.psel-trigger:disabled, .psel-trigger.psel-disabled {
  cursor: not-allowed; opacity: 0.72; pointer-events: none;
}
.psel-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.psel-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psel-arrow { flex-shrink: 0; color: #6366f1; transition: transform 0.2s ease; display: flex; align-items: center; }

.psel-dropdown {
  position: fixed; z-index: 99999;
  background: #0f1e3d;
  border: 1px solid rgba(99,102,241,0.3);
  border-radius: 14px;
  overflow-y: auto; overflow-x: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(99,102,241,0.1);
  opacity: 0; pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.16,1,0.3,1);
  padding: 6px;
}
.psel-dropdown.open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }

.psel-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 9px; cursor: pointer;
  font-size: 14px; color: #cbd5e1;
  transition: background 0.12s, color 0.12s;
  position: relative;
}
.psel-item:hover { background: rgba(99,102,241,0.12); color: #e2e8f0; }
.psel-item.active { background: rgba(99,102,241,0.18); color: #a5b4fc; font-weight: 600; }
.psel-item.psel-placeholder { color: #475569; font-style: italic; }
.psel-item-icon { font-size: 18px; line-height: 1; flex-shrink: 0; width: 24px; text-align: center; }
.psel-item-label { flex: 1; }
.psel-item-check { color: #6366f1; font-weight: 700; font-size: 13px; margin-left: auto; }

body:not(.dark) .psel-trigger {
  background: #fff; border-color: #e2e8f0; color: #64748b;
}
body:not(.dark) .psel-trigger.psel-has-value { color: #1e293b; }
body:not(.dark) .psel-trigger:hover { border-color: #6366f1; background: rgba(99,102,241,0.03); }
body:not(.dark) .psel-dropdown { background: #fff; border-color: rgba(99,102,241,0.2); box-shadow: 0 12px 36px rgba(0,0,0,0.15); }
body:not(.dark) .psel-item { color: #374151; }
body:not(.dark) .psel-item:hover { background: rgba(99,102,241,0.07); color: #1e293b; }
body:not(.dark) .psel-item.active { background: rgba(99,102,241,0.1); color: #4f46e5; }

@keyframes slideUpSheet {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ══════════════════════════════════════════
   WHATSAPP-STYLE CHAT (wa-)
══════════════════════════════════════════ */

/* Chat feed background */
.wa-feed {
  flex: 1; overflow-y: auto;
  padding: 10px 4% 6px;
  background: #020617;
  display: flex; flex-direction: column;
  min-height: 0;
}
.wa-feed::-webkit-scrollbar { width: 5px; }
.wa-feed::-webkit-scrollbar-track { background: transparent; }
.wa-feed::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

/* Header */
.wa-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: #0f1117; flex-shrink: 0; min-height: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wa-header-info { display: flex; align-items: center; gap: 12px; }
.wa-avatar-grp {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.wa-header-name { font-size: 15px; font-weight: 600; color: #e2e8f0; line-height: 1.2; }
.wa-header-sub  { font-size: 12px; color: #64748b; }
.wa-hdr-btn {
  background: none; border: none; color: #94a3b8; cursor: pointer;
  padding: 8px; border-radius: 50%; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.wa-hdr-btn:hover { background: rgba(255,255,255,0.07); }

/* Date separator */
.wa-date-sep { display: flex; justify-content: center; margin: 14px 0 6px; }
.wa-date-pill {
  background: #1a1d27; color: #64748b;
  font-size: 11px; font-weight: 500;
  padding: 4px 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
}

/* Message rows */
.wa-row-mine  { display: flex; justify-content: flex-end; margin: 1px 0; }
.wa-row-other { display: flex; align-items: flex-end; gap: 6px; margin: 1px 0; }
.wa-row-mine.wa-grp-first,
.wa-row-other.wa-grp-first { margin-top: 6px; }

/* Avatar */
.wa-avatar {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; align-self: flex-end;
}
.wa-avatar-ph { width: 32px; flex-shrink: 0; }

/* Bubble base */
.wa-bubble {
  position: relative; max-width: min(68%,520px);
  word-break: break-word; line-height: 1.5;
  font-size: 14px; padding: 7px 11px 5px;
}

/* Own bubble — acento indigo de la app */
.wa-bubble-mine { background: #4f46e5; color: #e2e8f0; border-radius: 14px; }
.wa-bubble-mine.wa-tail { border-top-right-radius: 3px; }
.wa-bubble-mine.wa-tail::after {
  content: ''; position: absolute; top: 0; right: -7px;
  width: 0; height: 0;
  border-left: 8px solid #4f46e5;
  border-top: 8px solid transparent;
  border-bottom: 3px solid transparent;
}

/* Others bubble */
.wa-bubble-other { background: #1a1d27; color: #e2e8f0; border-radius: 14px; border: 1px solid rgba(255,255,255,0.06); }
.wa-bubble-other.wa-tail { border-top-left-radius: 3px; }
.wa-bubble-other.wa-tail::after {
  content: ''; position: absolute; top: 0; left: -7px;
  width: 0; height: 0;
  border-right: 8px solid #1a1d27;
  border-top: 8px solid transparent;
  border-bottom: 3px solid transparent;
}

/* Sender name */
.wa-sender { font-size: 12px; font-weight: 600; color: #818cf8; margin-bottom: 2px; }
.wa-text   { color: #e2e8f0; }

/* Meta row */
.wa-meta {
  display: flex; align-items: center; gap: 3px;
  float: right; margin-left: 8px; margin-top: 2px; margin-bottom: -1px;
}
.wa-time   { font-size: 11px; color: #64748b; flex-shrink: 0; }
.wa-checks { color: #818cf8; font-size: 13px; line-height: 1; }

/* Input area */
.wa-input-area {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 12px calc(10px + var(--safe-bottom)); background: #0f1117; flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.wa-input-box {
  flex: 1; display: flex; align-items: flex-end;
  background: #1a1d27; border-radius: 24px; padding: 5px 12px; gap: 8px;
  border: 1px solid rgba(255,255,255,0.07);
}
.wa-emoji-btn, .wa-attach-btn {
  background: none; border: none; color: #64748b;
  cursor: pointer; font-size: 22px; padding: 4px 0;
  flex-shrink: 0; line-height: 1;
}
.wa-attach-btn { transform: rotate(45deg); }
.wa-textarea {
  flex: 1; background: none; border: none; color: #e2e8f0;
  font-size: 15px; resize: none; outline: none; font-family: inherit;
  max-height: 130px; line-height: 1.5; padding: 4px 0; scrollbar-width: none;
}
.wa-textarea::placeholder { color: #475569; }
.wa-textarea::-webkit-scrollbar { display: none; }
.wa-send-btn {
  width: 46px; height: 46px; border-radius: 50%;
  background: #6366f1; border: none; color: #fff; cursor: pointer;
  font-size: 20px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 0.15s, transform 0.1s;
}
.wa-send-btn:hover  { background: #818cf8; }
.wa-send-btn:active { transform: scale(0.92); }

/* Empty / loading state */
.wa-state-center {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; color: #8696A0; padding: 40px;
}
.wa-state-center .wa-ico { font-size: 48px; opacity: 0.5; }
.wa-state-center .wa-lbl { font-size: 14px; }

/* ── Inbox (lista de conversaciones) ───────────────────────── */

/* Canal General pinneado — siempre visible, no scrollea */
.wa-canal-pin {
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wa-canal-pin-item {
  background: rgba(37,211,102,0.05);
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(37,211,102,0.15);
}

#wa-inbox-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.wa-inbox-hdr {
  background: #0f1117; padding: 16px 20px 12px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wa-inbox-hdr-top {
  display: flex; align-items: center; justify-content: space-between;
}
.wa-inbox-title { font-size: 21px; font-weight: 700; color: #e2e8f0; }

.wa-search-wrap { background: #0f1117; padding: 8px 12px; flex-shrink: 0; }
.wa-search-inner {
  display: flex; align-items: center; gap: 10px;
  background: #1a1d27; border-radius: 10px; padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.07);
}
.wa-search-ico { color: #64748b; font-size: 17px; }
.wa-search-input {
  flex: 1; background: none; border: none; color: #e2e8f0;
  font-size: 15px; outline: none;
}
.wa-search-input::placeholder { color: #64748b; }

.wa-conv-list {
  flex: 1; min-height: 0; overflow-y: auto;
  background: #020617;
  padding-bottom: calc(var(--safe-bottom) + 24px);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.wa-conv-list::-webkit-scrollbar { width: 5px; }
.wa-conv-list::-webkit-scrollbar-track { background: transparent; }
.wa-conv-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

.wa-conv-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.12s;
  touch-action: manipulation; /* permite tap en Android WebView sin delay */
  -webkit-tap-highlight-color: rgba(99,102,241,0.15);
}
.wa-conv-item:hover  { background: rgba(99,102,241,0.06); }
.wa-conv-item:active { background: rgba(99,102,241,0.12); }

.wa-conv-ava {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0; font-weight: 700; color: #fff;
}
.wa-conv-body { flex: 1; min-width: 0; }
.wa-conv-name {
  font-size: 15px; font-weight: 600; color: #e2e8f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-conv-preview {
  font-size: 13px; color: #64748b; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-conv-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.wa-conv-ts { font-size: 11px; color: #475569; }
.wa-conv-divider {
  padding: 8px 20px 4px; font-size: 11px; font-weight: 700;
  color: #475569; background: #020617; letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Back button in chat header */
.wa-back-btn {
  background: none; border: none; color: #AEBAC1; cursor: pointer;
  padding: 8px; border-radius: 50%; font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.wa-back-btn:hover { background: rgba(255,255,255,0.1); }

/* ── Theme tokens: light mode overrides ─────────────────────────────────── */
[data-theme="light"] {
  --bg: #f1f5f9;
  --card: #ffffff;
  --text: #1e293b;
  --border: rgba(0,0,0,0.08);
  --accent: #6366f1;
}

/* Light mode base overrides */
html[data-theme="light"],
body[data-theme="light"],
[data-theme="light"] body {
  background: #f1f5f9;
  color: #1e293b;
}
[data-theme="light"] .app-layout,
[data-theme="light"] .main-content {
  background: #f1f5f9;
}
[data-theme="light"] .sidebar {
  background: rgba(255,255,255,0.95);
  border-right-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .sidebar .logo span,
[data-theme="light"] .sidebar .nav-item,
[data-theme="light"] .sidebar .nav-label {
  color: #1e293b !important;
}
[data-theme="light"] .nav-item:hover,
[data-theme="light"] .nav-item.active {
  background: rgba(99,102,241,0.12);
}
[data-theme="light"] .sidebar-footer {
  border-top-color: rgba(0,0,0,0.08);
  background: rgba(241,245,249,0.95);
}
[data-theme="light"] .k-stat-card,
[data-theme="light"] .mdl-card,
[data-theme="light"] .card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  color: #1e293b;
}
[data-theme="light"] .sec {
  color: #1e293b;
}
[data-theme="light"] .search-bar {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .search-bar input {
  color: #1e293b;
}
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: #ffffff;
  color: #1e293b;
  border-color: rgba(0,0,0,0.15);
}
[data-theme="light"] .kanban-col {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .kanban-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  color: #1e293b;
}
[data-theme="light"] .mobile-header {
  background: rgba(255,255,255,0.95);
  border-bottom-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .footer-btn,
[data-theme="light"] .theme-btn {
  color: #1e293b;
}
[data-theme="light"] .version-tag,
[data-theme="light"] .conn-lbl {
  color: #64748b;
}

/* ── Tour de descubrimiento ──────────────────────────────────────────────── */

/* Chip compacto en el dashboard */
#tour-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  margin-bottom: 16px;
  background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 99px;
  cursor: pointer;
  width: fit-content;
  transition: background 0.15s, transform 0.1s;
  user-select: none;
}
#tour-chip:hover  { background: rgba(99,102,241,0.14); }
#tour-chip:active { transform: scale(0.97); }
.tour-chip-ring { position: relative; width: 24px; height: 24px; flex-shrink: 0; }
.tour-chip-label { font-size: 13px; font-weight: 600; color: var(--text, #e2e8f0); }
.tour-chip-count { font-size: 12px; color: #818cf8; font-weight: 700; }
.tour-chip-arr   { font-size: 16px; color: #6366f1; font-weight: 700; margin-left: 2px; }

/* Bottom sheet */
#tour-sheet-wrap {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
#tour-sheet-wrap.open { pointer-events: auto; }
#tour-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.35s;
}
#tour-sheet-wrap.open #tour-sheet-backdrop { background: rgba(0,0,0,0.5); }
#tour-sheet {
  position: relative;
  width: 100%;
  max-height: 80vh;
  background: #0f1117;
  border-radius: 24px 24px 0 0;
  padding: 12px 20px 32px;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.4);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body:not(.dark) #tour-sheet { background: #ffffff; box-shadow: 0 -8px 40px rgba(0,0,0,0.15); }
#tour-sheet-wrap.open #tour-sheet { transform: translateY(0); }

.tour-sheet-handle {
  width: 36px; height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 99px;
  margin: 0 auto 16px;
}
body:not(.dark) .tour-sheet-handle { background: rgba(0,0,0,0.12); }

.tour-sheet-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.tour-sheet-ring-wrap { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.tour-sheet-pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #818cf8;
}
.tour-sheet-hdr-text { flex: 1; min-width: 0; }
.tour-sheet-title { font-size: 16px; font-weight: 700; color: var(--text, #e2e8f0); }
.tour-sheet-count { font-size: 12px; color: #818cf8; margin-top: 3px; }
.tour-sheet-close {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: #64748b;
  border-radius: 50%;
  width: 30px; height: 30px;
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.tour-sheet-close:hover { background: rgba(255,255,255,0.14); }

/* Lista de items */
.tour-list { display: flex; flex-direction: column; gap: 4px; }
.tour-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  font-size: 14px;
  color: var(--text, #e2e8f0);
  transition: background 0.15s;
}
.tour-item.clickable { cursor: pointer; }
.tour-item.clickable:hover  { background: rgba(99,102,241,0.1); }
.tour-item.clickable:active { background: rgba(99,102,241,0.18); }
.tour-item.done { opacity: 0.45; }
.tour-check {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(99,102,241,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #6366f1;
  flex-shrink: 0;
  background: transparent;
}
.tour-item.done .tour-check {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}
.tour-item-label { flex: 1; }
.tour-item-arrow { font-size: 18px; color: #6366f1; font-weight: 700; }
@media (max-width: 640px) {
  #inv2-overlay {
    padding: 0 !important;
    align-items: stretch !important;
  }

  #inv2-overlay > div {
    width: 100% !important;
    height: 100dvh !important;
    max-height: none !important;
    border-radius: 0 !important;
  }

  #inv2-overlay header {
    flex-wrap: wrap !important;
    padding-top: max(14px, env(safe-area-inset-top)) !important;
  }

  #inv2-bodega {
    order: 5;
    width: 100% !important;
    max-width: none !important;
  }

  #inv2-stock-list > div {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  #inv2-stock-list [data-move] {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* ── RG Modal v2 animations ────────────────────────────────── */
@keyframes rgFadeIn   { from { opacity: 0 } to { opacity: 1 } }
@keyframes rgSlideUp  { from { transform: translateY(60px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes rgShimmer  { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

#rg-drop-zone.rg2-over {
  border-color: rgba(99,102,241,0.8) !important;
  background: rgba(99,102,241,0.12) !important;
  transform: scale(1.01);
}

@media (min-width: 600px) {
  #rg-mdl-overlay {
    align-items: center !important;
    padding: 20px !important;
  }
  #rg-mdl-overlay > div {
    border-radius: 20px !important;
    animation: rgScaleIn .2s cubic-bezier(.16,1,.3,1) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.7) !important;
  }
}
@keyframes rgScaleIn { from { transform: scale(.95); opacity: 0 } to { transform: scale(1); opacity: 1 } }

/* ══ App del técnico — "Uplink Connect" (tema claro). Solo APK, rol técnico, celular ══ */
#tv2-nav, #tv2-more, #tv2-hdr-r, #tv2-hdr-sub, #tvc-sync { display: none; }
.tvc, .tv2-ph, #tv2-ot, #tv2-cierre, .tv2-pant, #tv2-more { --navy:#082b49; --navy2:#0d3b63; --blue:#078cff; --cyan:#13c5ee; --ink:#10253b; --muted:#64788c; --line:#dce8f1; --bg:#edf5fa; --green:#079b65; --amber:#d88900; --shadow:0 12px 34px rgba(8,43,73,.10); }
.tvc-eb { display: block; font-size: 10px; letter-spacing: .12em; font-weight: 900; color: #1686c5; margin-bottom: 4px; }
@media (max-width: 900px) {
  body.tv2-shell { --bg:#edf5fa; --card:#fff; --text:#10253b; --border:#dce8f1; --primary-hsl: 206, 100%, 51%; --primary:#078cff; --primary-hover:#0674d3; --accent:#078cff; background: #edf5fa; color: #10253b; }
  body.tv2-shell .app-layout, body.tv2-shell .main-content, body.tv2-shell .main-content.has-greeting:not(.msg-active):not(.crm-active) { background: #edf5fa !important; }
  body.tv2-shell .main-content, body.tv2-shell .main-content.has-greeting:not(.msg-active):not(.crm-active) { padding: 12px 16px 96px !important; margin-left: 0 !important; }
  body.tv2-shell .sidebar, body.tv2-shell .menu-overlay, body.tv2-shell #app-greeting-bar, body.tv2-shell #riel-app-assistant, body.tv2-shell #riel-app-toggle, body.tv2-shell #btn-theme-toggle, body.tv2-shell .mobile-toggle { display: none !important; }

  /* barra superior: marino con borde cian */
  body.tv2-shell .mobile-header { background: #052749 url('banner-cabecera.png') center bottom / cover no-repeat !important; color: #fff !important; border-bottom: 0 !important; box-shadow: 0 7px 24px rgba(5,35,61,.18) !important; }
  body.tv2-shell .mobile-logo { order: 1 !important; flex: 1; min-width: 0; margin: 0 !important; }
  body.tv2-shell .mobile-logo span, body.tv2-shell #wl-brand-name-mobile { color: #fff !important; font-weight: 800; font-style: normal; text-transform: none; letter-spacing: 0; }
  body.tv2-shell .mobile-logo img { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
  body.tv2-shell #tv2-hdr-r { display: flex; align-items: center; gap: 8px; margin-left: auto !important; order: 5 !important; flex: none; }
  body.tv2-shell #tvc-sync { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: #fff; background: rgba(255,255,255,.1); padding: 6px 9px; border-radius: 99px; }
  #tvc-sync i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.18); }
  #tvc-sync.off i { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.2); }
#tvc-sync.off i{background:linear-gradient(145deg,#feecbd 0%,#e4ae21 100%)}/*dg*/
  .tv2-ib { color: #082b49 !important; background: #fff !important; position: relative; width: 38px; height: 38px; min-width: 38px; border-radius: 12px; border: 1px solid #dce8f1; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.tv2-ib{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
  .tv2-ib .bell-badge-clone { position: absolute; top: -4px; right: -4px; background: #db3b54; color: #fff; font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 10px; }
.tv2-ib .bell-badge-clone{background:linear-gradient(145deg,#e46a7d 0%,#af2f43 100%)}/*dg*/
  .tv2-av { width: 36px; height: 36px; border-radius: 12px; background: #078cff; color: #fff; font-size: 12px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; }
.tv2-av{background:linear-gradient(145deg,#43a8ff 0%,#0670cc 100%)}/*dg*/
  .tv2-ib svg, #tv2-nav svg, .tv2-more-grid svg, .tvc svg, #tv2-cierre svg, #tv2-hdr-sub svg { stroke: currentColor !important; fill: none !important; }

  /* barra inferior */
  body.tv2-shell #tv2-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: rgba(255,255,255,.97); border-top: 1px solid #dce8f1; box-shadow: 0 -8px 28px rgba(8,43,73,.09); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); }
body.tv2-shell #tv2-nav{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)}/*dg*/
  body.tv2-shell #tv2-nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 48px; font-size: 10px; font-weight: 800; color: #6c8395; cursor: pointer; text-decoration: none; }
  body.tv2-shell #tv2-nav a.on { color: #078cff; }

  /* Más */
  body.tv2-shell #tv2-more { display: none; position: fixed; top: calc(60px + var(--safe-top)); left: 0; right: 0; bottom: 0; z-index: 800; background: #edf5fa; overflow-y: auto; padding-bottom: calc(80px + env(safe-area-inset-bottom)); box-sizing: border-box; }
  body.tv2-shell #tv2-more.open { display: block; }
  .tv2-more-box { padding: 18px 16px 20px; color: #10253b; }
  .tv2-more-box .tv2-ph h1, .tv2-more-box h1 { margin: 0 0 16px; font-size: 26px; font-weight: 900; color: #082b49; }
  .tv2-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .tv2-more-grid a, .tv2-more-grid a:visited { display: block; padding: 16px 14px; border-radius: 16px; background: #fff; border: 1px solid #dce8f1; box-shadow: 0 7px 20px rgba(8,43,73,.06); cursor: pointer; color: #082b49 !important; text-decoration: none !important; }
.tv2-more-grid a, .tv2-more-grid a:visited{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)}/*dg*/
  .tv2-more-grid a .tv2-ico { width: 40px; height: 40px; border-radius: 12px; background: #e9f5ff; color: #078cff; display: inline-flex; align-items: center; justify-content: center; }
.tv2-more-grid a .tv2-ico{background:linear-gradient(145deg,#f8fcff 0%,#d4dfe8 100%)}/*dg*/
  .tv2-more-grid a b { display: block; margin-top: 10px; font-size: 14px; color: #082b49 !important; }
  .tv2-more-grid a > span:last-child { font-size: 11px; color: #64788c; }
  .tv2-out, .tv2-out:visited { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 14px 6px; color: #db3b54 !important; font-weight: 800; cursor: pointer; text-decoration: none !important; }

  /* cabeceras de pantalla */
  body.tv2-shell .tv2-ph { padding: 4px 0 14px; }
  body.tv2-shell .tv2-ph h1 { margin: 0; font-size: 26px; line-height: 1.08; font-weight: 900; color: #082b49; }
  body.tv2-shell .tv2-ph + div:not(.tv2-rg-wrap) > div:first-child > h2, body.tv2-shell .tv2-ph + div:not(.tv2-rg-wrap) > div:first-child > p:not([id]) { display: none !important; }
  body.tv2-shell .tv2-ph + div { margin-bottom: 12px !important; }
  body.tv2-shell #s-msg > .tv2-ph { padding: 14px 16px 8px; }
  body.tv2-shell #s-msg:has(#wa-inbox-view[style*="none"]) > .tv2-ph { display: none; }
  body.tv2-shell .wa-inbox-title { display: none !important; }
  body.tv2-shell #s-msg.sec:not(.on) { display: none !important; }
  body.tv2-shell #s-assistant > .tv2-ph, body.tv2-shell .assistant-hero { display: none !important; }

  /* botones y tarjetas del resto de pantallas (tema claro) */
  body.tv2-shell .bprim, body.tv2-shell .btn-primary, body.tv2-shell .tec-bottom-primary { background: linear-gradient(135deg, #087cf3, #12bfea) !important; color: #fff !important; border: 0 !important; border-radius: 12px !important; font-weight: 800 !important; box-shadow: 0 8px 18px rgba(8,140,255,.22) !important; min-height: 44px; }
  body.tv2-shell .bsec, body.tv2-shell .btn-outline, body.tv2-shell .tec-bottom-secondary { background: #fff !important; color: #078cff !important; border: 1px solid #8dc9ff !important; border-radius: 12px !important; font-weight: 800 !important; min-height: 44px; }
body.tv2-shell .bsec, body.tv2-shell .btn-outline, body.tv2-shell .tec-bottom-secondary{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
  body.tv2-shell .card:not(.tvx *), body.tv2-shell .tec-task-section, body.tv2-shell .tec-task-grid button { background: #fff !important; border: 1px solid #dce8f1 !important; border-radius: 20px !important; box-shadow: 0 12px 34px rgba(8,43,73,.10) !important; color: #10253b; }
body.tv2-shell .card:not(.tvx *), body.tv2-shell .tec-task-section, body.tv2-shell .tec-task-grid button{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
  body.tv2-shell .tec-task-hero { background: #fff !important; border: .5px solid #dce8f1 !important; border-left: 4px solid #13c5ee !important; border-radius: 20px !important; box-shadow: 0 12px 34px rgba(8,43,73,.10) !important; }
body.tv2-shell .tec-task-hero{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
  body.tv2-shell .tec-task-hero h3 { font-size: 20px; font-weight: 900; color: #082b49; }
  body.tv2-shell .tec-task-kicker, body.tv2-shell .tec-task-section-title, body.tv2-shell .sh span { color: #1686c5 !important; letter-spacing: .12em; font-weight: 900; text-transform: uppercase; font-size: 10px; }
  body.tv2-shell .tec-task-grid button b { color: #082b49; font-size: 15px; }
  body.tv2-shell .tec-task-grid button span { color: #64788c !important; }
  body.tv2-shell .tec-task-bottom { bottom: calc(66px + env(safe-area-inset-bottom)) !important; background: linear-gradient(180deg, rgba(237,245,250,0), #edf5fa 40%) !important; }
  body.tv2-shell .inp, body.tv2-shell input:not(.tvx *), body.tv2-shell select:not(.tvx *), body.tv2-shell textarea:not(.tvx *) { background: #fff !important; border: 1px solid #dce8f1 !important; color: #10253b !important; border-radius: 12px !important; }
body.tv2-shell .inp, body.tv2-shell input:not(.tvx *), body.tv2-shell select:not(.tvx *), body.tv2-shell textarea:not(.tvx *){background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
  body.tv2-shell .data-table th, body.tv2-shell .data-table td { border-color: #dce8f1 !important; }
  body.tv2-shell .wa-inbox-hdr, body.tv2-shell .wa-search-wrap { background: transparent !important; border: 0 !important; }
  body.tv2-shell .wa-conv-item { border-bottom: 1px solid #dce8f1 !important; }
  body.tv2-shell .assistant-quick-btn { background: #fff !important; border: 1px solid #9fccec !important; color: #082b49 !important; border-radius: 13px !important; font-weight: 800 !important; }
body.tv2-shell .assistant-quick-btn{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
  body.tv2-shell .assistant-card { border-radius: 18px !important; }

  /* pantallas de "Más": flecha para volver, sin barra inferior */
  body.tv2-shell.tv2-sub #tv2-hdr-sub { display: flex; align-items: center; gap: 12px; order: 0; flex: 1; }
  body.tv2-shell.tv2-sub #tv2-hdr-sub b { display: block; font-size: 17px; font-weight: 900; color: #fff; }
  body.tv2-shell.tv2-sub #tv2-hdr-sub small { font-size: 12px; color: #9fe8ff; font-weight: 700; }
  body.tv2-shell.tv2-sub .mobile-logo, body.tv2-shell.tv2-sub #tvc-sync, body.tv2-shell.tv2-sub #tv2-nav { display: none !important; }
  body.tv2-shell.tv2-sub .main-content { padding-bottom: 24px !important; }
}

/* ── Inicio y Órdenes ── */
.tvc { max-width: 720px; margin: 0 auto; color: #10253b; font-family: Inter, ui-sans-serif, -apple-system, "Segoe UI", sans-serif; }
.tvc h1, .tvc h2, .tvc h3, .tvc p { margin: 0; }
.tvc-hello { margin: 4px 0 16px; }
.tvc-hello span { color: #64788c; font-size: 14px; }
.tvc-hello h1 { margin: 3px 0; font-size: 26px; line-height: 1.08; font-weight: 900; color: #082b49; }
.tvc-hello p { color: #64788c; font-size: 13px; }
.tvc-title { margin: 4px 0 14px; } .tvc-title h1 { font-size: 26px; font-weight: 900; color: #082b49; }
.tvc-btn { border: 0; border-radius: 12px; padding: 11px 14px; min-height: 44px; font: inherit; font-weight: 800; color: #fff; background: linear-gradient(135deg, #087cf3, #12bfea); box-shadow: 0 8px 18px rgba(8,140,255,.22); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.tvc-att { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px; margin-bottom: 14px; background: #fff; border: 1px solid #dce8f1; border-left: 4px solid #d88900; border-radius: 20px; box-shadow: 0 12px 34px rgba(8,43,73,.10); }
.tvc-att{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)}/*dg*/
.tvc-att strong { display: block; font-size: 14px; } .tvc-att small { display: block; font-size: 11px; color: #64788c; margin-top: 3px; }
.tvc-next { position: relative; overflow: hidden; padding: 18px; margin-bottom: 4px; color: #fff; background: linear-gradient(145deg, #082b49, #0b527f); border-radius: 20px; box-shadow: 0 12px 34px rgba(8,43,73,.10); }
.tvc-next::after { content: ""; position: absolute; width: 190px; height: 190px; border: 1px solid rgba(19,197,238,.24); border-radius: 50%; right: -80px; top: -110px; }
.tvc-next .tvc-eb { color: #8ce9ff; }
.tvc-next-top { display: flex; justify-content: space-between; align-items: center; } .tvc-next-f { font-size: 15px; font-weight: 900; }
.tvc-next h2 { margin: 10px 0 5px; font-size: 20px; font-weight: 900; } .tvc-next p { font-size: 13px; color: #c2ddec; }
.tvc-next-m { display: flex; gap: 10px; align-items: center; margin: 14px 0; font-size: 12px; }
.tvc-next-a { display: flex; gap: 8px; position: relative; z-index: 1; }
.tvc-ghost, .tvc-white { flex: 1; min-height: 44px; border-radius: 12px; padding: 11px 14px; font: inherit; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tvc-ghost { background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.14); } .tvc-white { background: #fff; color: #07568c; border: 0; }
.tvc-white{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)}/*dg*/
.tvc-st { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 5px 9px; font-size: 10px; font-weight: 900; text-transform: uppercase; white-space: nowrap; }
.tvc-st.st-prog { background: #dcecff; color: #1765b0; }
.tvc-st.st-prog{background:linear-gradient(145deg,#f4f9ff 0%,#c8d7e8 100%)}/*dg*/ .tvc-st.st-pend { background: #fff1cd; color: #9a6400; }
.tvc-st.st-pend{background:linear-gradient(145deg,#fffbf0 0%,#e8dbbb 100%)}/*dg*/ .tvc-st.st-done { background: #dcf9ee; color: #087a54; }
.tvc-st.st-done{background:linear-gradient(145deg,#f4fdfa 0%,#c8e3d9 100%)}/*dg*/
.tvc-next .tvc-st.st-prog { background: rgba(255,255,255,.14); color: #c1eeff; }
.tvc-sec { display: flex; justify-content: space-between; align-items: center; margin: 20px 0 10px; } .tvc-sec h2 { font-size: 18px; font-weight: 900; color: #082b49; }
.tvc-sec button { background: transparent; border: 0; color: #078cff; font: inherit; font-weight: 800; padding: 8px 4px; cursor: pointer; }
.tvc-job { padding: 16px; margin-bottom: 12px; background: #fff; border: 1px solid #dce8f1; border-radius: 20px; box-shadow: 0 12px 34px rgba(8,43,73,.10); cursor: pointer; }
.tvc-job{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)}/*dg*/
.tvc-job.feat { border-top: 4px solid #078cff; }
.tvc-job-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .tvc-job-h b { font-size: 14px; }
.tvc-job h3 { margin: 12px 0 4px; font-size: 15px; font-weight: 800; } .tvc-job p { font-size: 12px; color: #64788c; }
.tvc-job .tvc-btn { width: 100%; margin-top: 12px; }
.tvc-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 14px; }
.tvc-quick button { background: #fff; border: 1px solid #dce8f1; border-radius: 15px; padding: 12px; min-height: 56px; color: #10253b; cursor: pointer; font: inherit; }
.tvc-quick button{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)}/*dg*/
.tvc-quick b { display: block; font-size: 20px; color: #078cff; } .tvc-quick span { display: block; font-size: 11px; color: #64788c; }
.tvc-filters { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 12px; scrollbar-width: none; }
body.tv2-shell .tvc-filters button, .tvc-filters button { white-space: nowrap; border: 1px solid #dce8f1; background: #fff; color: #64788c; padding: 10px 14px; min-height: 40px; border-radius: 99px; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
body.tv2-shell .tvc-filters button, .tvc-filters button{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)}/*dg*/
.tvc-filters button.on { background: #082b49; border-color: #082b49; color: #fff; }
.tvc-filters button.on{background:linear-gradient(145deg,#435e75 0%,#06223a 100%)}/*dg*/
.tvc-empty { color: #64788c; font-size: 13px; padding: 14px; text-align: center; border: 1px dashed #b9cedc; border-radius: 14px; margin-bottom: 12px; }
.tvc-vac { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px; background: #fff; border: 1px solid #dce8f1; border-radius: 16px; cursor: pointer; color: #078cff; }
.tvc-vac{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)}/*dg*/
.tvc-vac > div { flex: 1; min-width: 0; color: #10253b; } .tvc-vac-i { width: 38px; height: 38px; border-radius: 12px; background: #e9f5ff; display: inline-flex; align-items: center; justify-content: center; }
.tvc-vac-i{background:linear-gradient(145deg,#f8fcff 0%,#d4dfe8 100%)}/*dg*/
.tvc-vac-s, .tvc-vac-s b, .tvc-vac-s span { font-size: 12px; color: #64788c !important; } .tvc-vac-s b { color: #082b49 !important; }

/* ── Asistencia, Tareas y demás pantallas internas ── */
@media (max-width: 900px) {
  .tv2-clock { text-align: center; padding: 18px 12px; background: #fff; border: 1px solid #dce8f1; border-radius: 20px; box-shadow: 0 12px 34px rgba(8,43,73,.10); margin-top: 8px; }
.tv2-clock{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)}/*dg*/
  .tv2-clock b { display: block; font-size: 48px; font-weight: 900; color: #082b49; line-height: 1.1; } .tv2-clock span { font-size: 12px; color: #64788c; }
  body.tv2-shell #s-asi .tv2-ph + div > div:last-child { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 8px; width: 100%; padding-bottom: 4px; }
  body.tv2-shell #s-asi .tv2-ph + div > div:last-child button { flex: none; white-space: nowrap; padding: 8px 12px !important; font-size: 12px !important; width: auto !important; }
  body.tv2-shell #asi-body .card .bprim { width: 100% !important; padding: 15px !important; font-size: 15px !important; }
  body.tv2-shell #asi-body .card .sh { border: 0 !important; }
  .tv2-chipsf { display: flex; gap: 8px; overflow-x: auto; margin: 2px 0 14px; scrollbar-width: none; }
  .tv2-chipf { padding: 10px 14px !important; min-height: 40px; border-radius: 999px !important; font-size: 11px; font-weight: 800; cursor: pointer; color: #64788c !important; background: #fff !important; border: 1px solid #dce8f1 !important; white-space: nowrap; }
.tv2-chipf{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
  .tv2-chipf.on { color: #fff !important; background: #082b49 !important; border-color: #082b49 !important; }
.tv2-chipf.on{background:linear-gradient(145deg,#435e75 0%,#06223a 100%)!important}/*dg*/
  .tv2-tk { display: flex; align-items: center; gap: 11px; padding: 14px; margin-top: 9px; border-radius: 16px; background: #fff; border: 1px solid #dce8f1; cursor: pointer; }
.tv2-tk{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)}/*dg*/
  .tv2-tk > div { flex: 1; min-width: 0; } .tv2-tk b { display: block; font-size: 14px; color: #082b49; }
  .tv2-tk span:last-child, .tv2-tk div span { font-size: 11.5px; color: #64788c; }
  .tv2-ck { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #9db2c3; flex: none; }
  .tv2-ck.d { background: #079b65; border-color: #079b65; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.tv2-ck.d{background:linear-gradient(145deg,#43b38a 0%,#067c51 100%)}/*dg*/
  .tv2-tag { font-size: 9.5px; font-weight: 900; padding: 4px 9px; border-radius: 999px; background: #fff1cd; color: #9a6400; white-space: nowrap; }
.tv2-tag{background:linear-gradient(145deg,#fffbf0 0%,#e8dbbb 100%)}/*dg*/ .tv2-tag-c { background: #dcf9ee; color: #087a54; }
.tv2-tag-c{background:linear-gradient(145deg,#f4fdfa 0%,#c8e3d9 100%)}/*dg*/
  .tv2-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 9px 12px; min-height: 40px; border-radius: 12px; border: 1px solid #dce8f1; background: #fff; color: #082b49; font-weight: 800; font-size: 13px; cursor: pointer; }
.tv2-back{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)}/*dg*/
  .tv2-muted { color: #64788c; font-size: 14px; }
  .tv2-rg-tot { font-size: 34px; font-weight: 900; color: #082b49; margin-top: 6px; }
  .tv2-rg-scan { width: 100%; justify-content: center; margin: 4px 0 6px; }
}
.tv2-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 18px; min-height: 48px; border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 800; color: #fff !important; background: linear-gradient(135deg, #087cf3, #12bfea); box-shadow: 0 8px 18px rgba(8,140,255,.22); text-decoration: none; }
.tv2-ico { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #078cff; background: #e9f5ff; flex: none; }
.tv2-ico{background:linear-gradient(145deg,#f8fcff 0%,#d4dfe8 100%)}/*dg*/

/* ── Detalle de OT, inventario y cierre por pasos (pantalla completa) ── */
#tv2-ot, .tv2-pant, #tv2-cierre { position: fixed; inset: 0; z-index: 1300; display: flex; flex-direction: column; color: #10253b; background: #edf5fa; font-family: Inter, ui-sans-serif, -apple-system, "Segoe UI", sans-serif; }
.tv2-ot-hd { display: flex; align-items: center; gap: 12px; padding: calc(10px + var(--safe-top)) 14px 10px; background: linear-gradient(135deg, #082b49, #063c69); color: #fff; border-bottom: 3px solid #13c5ee; }
.tv2-ot-hd b { display: block; font-size: 17px; font-weight: 900; } .tv2-ot-hd small { font-size: 11px; color: #9fe8ff; font-weight: 700; }
.tv2-ot-body { flex: 1; overflow-y: auto; padding: 16px 16px 20px; }
.tv2-ot-tit { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .tv2-ot-tit b { display: block; font-size: 19px; font-weight: 900; color: #082b49; } .tv2-ot-tit span:not(.tv2-ico) { font-size: 12.5px; color: #64788c; }
.tv2-ot-card { padding: 14px; border-radius: 18px; background: #fff; border: 1px solid #dce8f1; box-shadow: 0 12px 34px rgba(8,43,73,.10); margin-bottom: 10px; }
.tv2-ot-card{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)}/*dg*/
.tv2-ot-card b { display: block; font-size: 14px; margin-top: 6px; } .tv2-ot-card p { margin: 4px 0 0; font-size: 12.5px; color: #64788c; } .tv2-ot-card a { color: #078cff; font-weight: 800; text-decoration: none; }
.tv2-ot-row { display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: .12em; font-weight: 900; color: #1686c5; } .tv2-ot-row em { font-style: normal; color: #082b49; letter-spacing: 0; font-weight: 800; font-size: 12px; } .tv2-ot-row a { letter-spacing: 0; font-size: 12px; }
.tv2-ot-prog { height: 6px; border-radius: 99px; background: #e6eef4; overflow: hidden; margin: 10px 0 6px; } .tv2-ot-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #078cff, #13c5ee); transition: width .4s ease; }
.tv2-ot-sec { margin: 16px 0 8px; font-size: 10px; font-weight: 900; letter-spacing: .12em; color: #1686c5; }
.tv2-ot-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tv2-ot-fotos a, .tv2-ot-add { aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #dce8f1; display: flex; align-items: center; justify-content: center; }
.tv2-ot-fotos a, .tv2-ot-add{background:linear-gradient(145deg,#f4f8fb 0%,#c8d3db 100%)}/*dg*/ .tv2-ot-fotos img { width: 100%; height: 100%; object-fit: cover; }
.tv2-ot-add { background: #fff; border: 1.5px dashed #078cff; color: #078cff; cursor: pointer; }
.tv2-ot-add{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)}/*dg*/ .tv2-ot-mat { margin: 0; font-size: 14px; line-height: 1.5; color: #10253b; }
.tv2-ot-full { margin-top: 18px; width: 100%; padding: 13px; min-height: 48px; border-radius: 12px; background: #fff; border: 1px solid #8dc9ff; color: #078cff; font-weight: 800; font-size: 13px; cursor: pointer; }
.tv2-ot-full{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)}/*dg*/
.tv2-ot-bar { display: flex; gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid #dce8f1; }
.tv2-ot-bar{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)}/*dg*/
.tv2-ot-bar .tv2-btn { flex: 1; justify-content: center; } .tv2-ot-sec-btn { padding: 13px 18px; min-height: 48px; border-radius: 12px; border: 1px solid #8dc9ff; background: #fff; color: #078cff; font-weight: 800; font-size: 14px; cursor: pointer; }
.tv2-ot-sec-btn{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)}/*dg*/
#tv2-ot svg, .tv2-pant svg { stroke: currentColor !important; fill: none !important; }
.tv2-search { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 14px; background: #fff; border: 1px solid #dce8f1; color: #64788c; margin-bottom: 12px; }
.tv2-search{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)}/*dg*/
.tv2-search input { flex: 1; background: transparent !important; border: 0 !important; color: #10253b !important; padding: 14px 0 !important; font-size: 14px; outline: none; }
.tv2-it { display: flex; align-items: center; gap: 12px; padding: 13px; border-radius: 16px; background: #fff; border: 1px solid #dce8f1; margin-bottom: 8px; }
.tv2-it{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)}/*dg*/ .tv2-it > div { flex: 1; min-width: 0; }
.tv2-it b { display: block; font-size: 14px; color: #082b49; } .tv2-it span:not(.tv2-ico) { font-size: 11.5px; color: #64788c; } .tv2-it em { font-style: normal; font-weight: 900; font-size: 18px; color: #082b49; } .tv2-it em.bajo { color: #d88900; }
.tv2-pant .tv2-ib { color: #082b49 !important; background: #fff !important; }
.tv2-pant .tv2-ib{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/

/* cierre por pasos */
.tvc-save { background: #e0f8ee; color: #087a54; padding: 9px; border-radius: 10px; text-align: center; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 12px; }
.tvc-save{background:linear-gradient(145deg,#f6fdfa 0%,#cce2d9 100%)}/*dg*/
.tvc-prog { height: 6px; border-radius: 99px; background: #e6eef4; overflow: hidden; } .tvc-prog i { display: block; height: 100%; background: linear-gradient(90deg, #078cff, #13c5ee); transition: width .3s; }
.tvc-prog-t { text-align: center; color: #64788c; font-size: 13px; margin: 6px 0 12px; }
.tvc-step { background: #fff; border: 1px solid #dce8f1; border-radius: 16px; margin-bottom: 9px; overflow: hidden; }
.tvc-step{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)}/*dg*/
.tvc-step-h { display: flex; align-items: center; gap: 11px; padding: 13px; min-height: 56px; cursor: pointer; } .tvc-step-h > div { flex: 1; min-width: 0; } .tvc-step-h b { display: block; font-size: 14px; color: #082b49; } .tvc-step-h small { display: block; font-size: 11px; color: #64788c; margin-top: 3px; }
.tvc-step-h em { font-style: normal; font-size: 11px; font-weight: 800; color: #0877d0; background: #eaf5ff; padding: 8px 10px; border-radius: 9px; }
.tvc-step-h em{background:linear-gradient(145deg,#f9fcff 0%,#d5dfe8 100%)}/*dg*/
.tvc-step-i { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #eff4f7; font-weight: 900; color: #64788c; flex: none; }
.tvc-step-i{background:linear-gradient(145deg,#fafcfd 0%,#d9dee1 100%)}/*dg*/
.tvc-step.done .tvc-step-i { background: #ddf8ed; color: #079b65; }
.tvc-step.done .tvc-step-i{background:linear-gradient(145deg,#f5fdfa 0%,#c9e2d8 100%)}/*dg*/ .tvc-step.warn .tvc-step-i { background: #fff0d0; color: #d88900; }
.tvc-step.warn .tvc-step-i{background:linear-gradient(145deg,#fffaf1 0%,#e8dabd 100%)}/*dg*/
.tvc-step-b { padding: 4px 13px 14px; border-top: 1px solid #edf3f7; }
.tvc-ck { display: flex; align-items: center; gap: 12px; padding: 12px 0; min-height: 48px; border-bottom: 1px solid #edf3f7; font-size: 13px; } .tvc-ck input { width: 22px; height: 22px; accent-color: #078cff; flex: none; }
.tvc-mat { display: grid; grid-template-columns: 1fr 64px 36px; gap: 6px; margin-top: 8px; } .tvc-mat input { min-height: 44px; padding: 8px 10px; box-sizing: border-box; width: 100%; } .tvc-mat .cm-s { grid-column: 1 / -1; } .tvc-mat .cm-d { border: 0; background: none; color: #db3b54; font-size: 18px; }
.tvc-add, .tvc-ok { width: 100%; min-height: 48px; margin-top: 10px; border-radius: 12px; font: inherit; font-weight: 800; cursor: pointer; background: #fff; color: #078cff; border: 1px dashed #8dc9ff; }
.tvc-add, .tvc-ok{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)}/*dg*/ .tvc-ok { border: 0; background: #eaf5ff; }
.tvc-ok{background:linear-gradient(145deg,#f9fcff 0%,#d5dfe8 100%)}/*dg*/
.tvc-hint { font-size: 13px; color: #64788c; margin: 10px 0 0; }
#tvc-obs { width: 100%; margin-top: 10px; padding: 10px; box-sizing: border-box; font: inherit; }
.tvc-note { margin-top: 12px; padding: 14px; background: #fff; border: 1px solid #dce8f1; border-left: 4px solid #13c5ee; border-radius: 16px; }
.tvc-note{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)}/*dg*/ .tvc-note h3 { margin: 0; font-size: 14px; } .tvc-note p { font-size: 12px; color: #64788c; line-height: 1.45; margin: 5px 0 0; }
.tvc-cta { width: 100%; min-height: 52px; border: 0; border-radius: 14px; color: #fff; font: inherit; font-weight: 900; background: linear-gradient(135deg, #0d3b63, #078cff); box-shadow: 0 10px 30px rgba(8,91,162,.28); cursor: pointer; } .tvc-cta.off { background: #a7b7c4; box-shadow: none; }
.tvc-cta.off{background:linear-gradient(145deg,#e5e9ed 0%,#98a7b2 100%)}/*dg*/

body.tv2-shell .tvc-filters button { background: #fff !important; color: #64788c !important; border: 1px solid #dce8f1 !important; box-shadow: none !important; }
body.tv2-shell .tvc-filters button{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
body.tv2-shell .tvc-filters button.on { background: #082b49 !important; border-color: #082b49 !important; color: #fff !important; }
body.tv2-shell .tvc-filters button.on{background:linear-gradient(145deg,#435e75 0%,#06223a 100%)!important}/*dg*/
body.tv2-shell .tvc-cta { background: linear-gradient(135deg, #0d3b63, #078cff) !important; color: #fff !important; }
body.tv2-shell .tvc-cta.off { background: #a7b7c4 !important; box-shadow: none !important; }
body.tv2-shell .tvc-cta.off{background:linear-gradient(145deg,#e5e9ed 0%,#98a7b2 100%)!important}/*dg*/
body.tv2-shell .tvc-quick button, body.tv2-shell .tvc-add { background: #fff !important; }
body.tv2-shell .tvc-quick button, body.tv2-shell .tvc-add{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
body.tv2-shell .tvc-ok { background: #eaf5ff !important; color: #078cff !important; }
body.tv2-shell .tvc-ok{background:linear-gradient(145deg,#f9fcff 0%,#d5dfe8 100%)!important}/*dg*/
body.tv2-shell .tvc-sec button { background: transparent !important; color: #078cff !important; box-shadow: none !important; }
body.tv2-shell .tvc-btn, body.tv2-shell .tv2-btn { background: linear-gradient(135deg, #087cf3, #12bfea) !important; color: #fff !important; border: 0 !important; box-shadow: 0 8px 18px rgba(8,140,255,.22) !important; }
body.tv2-shell .tvc-white { background: #fff !important; color: #07568c !important; border: 0 !important; }
body.tv2-shell .tvc-white{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
body.tv2-shell .tvc-ghost { background: rgba(255,255,255,.10) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.14) !important; }
body.tv2-shell .tv2-ot-sec-btn, body.tv2-shell .tv2-ot-full { background: #fff !important; color: #078cff !important; border: 1px solid #8dc9ff !important; }
body.tv2-shell .tv2-ot-sec-btn, body.tv2-shell .tv2-ot-full{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/

/* ── Pantallas antiguas dentro del diseño claro ── */
body.tv2-shell .assistant-card { background: #fff !important; }
body.tv2-shell .assistant-card{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
body.tv2-shell .assistant-bubble-assistant { background: #fff !important; border: 1px solid #dce8f1 !important; }
body.tv2-shell .assistant-bubble-assistant{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
body.tv2-shell .assistant-bubble-user { background: #e1f5ff !important; color: #075b90 !important; }
body.tv2-shell .assistant-bubble-user{background:linear-gradient(145deg,#f6fcff 0%,#cddfe8 100%)!important}/*dg*/
body.tv2-shell #inv2-overlay { padding: 0 !important; background: #edf5fa !important; align-items: stretch !important; }
body.tv2-shell #inv2-overlay > div { width: 100% !important; height: 100% !important; max-width: none !important; border-radius: 0 !important; background: #edf5fa !important; border: 0 !important; box-shadow: none !important; }
.tvc-rows { display: grid; gap: 8px; }
.tvc-rows button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px; min-height: 56px; text-align: left; background: #fff !important; border: 1px solid #dce8f1 !important; border-radius: 16px; color: #10253b; cursor: pointer; }
.tvc-rows button{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
.tvc-rows button > div { flex: 1; min-width: 0; } .tvc-rows b { display: block; font-size: 14px; color: #082b49; } .tvc-rows small { display: block; font-size: 11px; color: #64788c; margin-top: 3px; }
.tvc-rows svg { color: #8ba0b2; }
@media (max-width: 900px) {
  body.tv2-shell #notif-panel { position: fixed !important; inset: 0 !important; left: 0 !important; top: 0 !important; width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; border-radius: 0 !important; background: #edf5fa !important; z-index: 1400 !important; flex-direction: column; padding-top: var(--safe-top); }
  body.tv2-shell #notif-panel-header { background: linear-gradient(135deg, #082b49, #063c69) !important; color: #fff !important; border-bottom: 3px solid #13c5ee !important; padding: 14px 16px !important; }
  body.tv2-shell #notif-panel-header * { color: #fff !important; }
  body.tv2-shell #notif-panel-list { flex: 1; overflow-y: auto; padding: 12px 16px; }
}
@media (max-width: 900px) {
  .tv2-tk { position: relative; overflow: hidden; }
  .tv2-prio { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #13c5ee; }
  .tv2-tk.p-alta .tv2-prio { background: #db3b54; }
.tv2-tk.p-alta .tv2-prio{background:linear-gradient(145deg,#e46a7d 0%,#af2f43 100%)}/*dg*/ .tv2-tk.p-media .tv2-prio { background: #d88900; }
.tv2-tk.p-media .tv2-prio{background:linear-gradient(145deg,#e1a53d 0%,#ad6e00 100%)}/*dg*/
}
#tvc-notif-x { display: none; }
@media (max-width: 900px) { body.tv2-shell #tvc-notif-x { display: inline-flex; margin-right: 10px; } body.tv2-shell #notif-panel-header { display: flex; align-items: center; } body.tv2-shell #notif-panel-header #tvc-notif-x svg { stroke: #082b49 !important; } }

/* Tour de bienvenida, chip "Descubre Uplink" y barra de carga con los colores del diseño nuevo */
body.tv2-shell #tour-chip { background: #e9f5ff; border-color: #8dc9ff; }
body.tv2-shell #tour-chip{background:linear-gradient(145deg,#f8fcff 0%,#d4dfe8 100%)}/*dg*/
body.tv2-shell .tour-chip-count, body.tv2-shell .tour-sheet-count, body.tv2-shell .tour-sheet-pct { color: #078cff !important; }
body.tv2-shell .tour-chip-arr { color: #078cff; }
body.tv2-shell .tour-chip-label, body.tv2-shell .tour-sheet-title { color: #082b49 !important; }
body.tv2-shell #onboarding-tooltip { background: #fff !important; border: 1px solid #dce8f1 !important; box-shadow: 0 20px 60px rgba(8,43,73,.25) !important; }
body.tv2-shell #onboarding-tooltip{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
body.tv2-shell #ob-title { color: #082b49 !important; } body.tv2-shell #ob-step, body.tv2-shell #ob-body, body.tv2-shell #ob-skip { color: #64788c !important; }
body.tv2-shell #ob-prev { background: #fff !important; color: #078cff !important; border: 1px solid #8dc9ff !important; }
body.tv2-shell #ob-prev{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
body.tv2-shell #ob-next { background: linear-gradient(135deg, #087cf3, #12bfea) !important; color: #fff !important; }
body.tv2-shell #global-loader { background: linear-gradient(90deg, #078cff, #13c5ee) !important; }
html.tv2-pre, html.tv2-pre body { background-color: #edf5fa; }

/* Ícono de la app instalada en el inicio de sesión de la APK (sin cuadro blanco detrás) */
.login-logo-icon img.logo-apk { background: transparent !important; border-radius: 0; box-shadow: none !important; filter: drop-shadow(0 6px 12px rgba(7, 70, 190, .35)); }
.login-logo-icon img.logo-apk:hover { transform: none; }

/* Revisión: el chip del tour antiguo apunta al menú lateral, que no existe en el diseño nuevo */
body.tv2-shell #tour-chip { display: none !important; }
@media (max-width: 900px) { body.tv2-shell #notif-panel { border: 0 !important; box-shadow: none !important; } }
/* RindeGastos: el encabezado antiguo del módulo repite el título de la pantalla */
body.tv2-shell #s-rg .tv2-rg-wrap ~ div h2:first-child { display: none; }
@media (max-width: 900px) {
  /* Nombre de la empresa completo en la barra superior (antes se cortaba "Uplink Net…") */
  body.tv2-shell .mobile-logo span, body.tv2-shell #wl-brand-name-mobile { font-size: 18px !important; font-weight: 800 !important; letter-spacing: -.01em; white-space: nowrap; }
  body.tv2-shell #tvc-lema { white-space: nowrap; }
}
/* Estado de conexión de la cabecera: siempre con texto (Online / Offline) */
body.tv2-shell #tvc-sync span { display: inline !important; }
body.tv2-shell #tvc-sync { padding: 6px 10px; }
body.tv2-shell #tvc-sync.off { background: rgba(251,191,36,.16); }
body.tv2-shell #tvc-sync.off span { color: #ffe7a3; }

/* Pantallas del técnico rehechas igual al prototipo (estilos en tecnico-connect.css, bajo .tvx) */
.tvx-host { max-width: 720px; margin: 0 auto; padding: 4px 0 8px; }
.tvx .status.rejected { background: #ffe1e6; color: #b4233c; }
.tvx .status.rejected{background:linear-gradient(145deg,#fff6f8 0%,#e8cdd1 100%)}/*dg*/
.tvx .empty-note { margin-top: 0; }
body.tv2-shell #s-rg { padding-top: 0 !important; }
body.tv2-shell #s-tar.tvx-on > *:not(#tar-content) { display: none !important; }
body.tv2-shell #s-tar.tvx-on { padding-top: 0 !important; }
.tvx .task-list article[data-tarea] { cursor: pointer; }
.tvx .task-list article[data-tarea] > button { border: 0; background: #e8f5fd; color: #0876c6; width: 32px; height: 32px; border-radius: 10px; font-size: 20px; }
.tvx .task-list article[data-tarea] > button{background:linear-gradient(145deg,#f8fcfe 0%,#d3dfe6 100%)}/*dg*/
.tvx .contact-actions .primary { background: linear-gradient(135deg, #087cf3, #12bfea); }
.tvx-host:has(.bottom-action) { padding-bottom: 84px; }
@media (max-width: 900px) {
  /* Barra superior igual al prototipo: logo + nombre y lema + "Sincronizado" */
  body.tv2-shell .mobile-logo { display: grid !important; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center; }
  body.tv2-shell .mobile-logo img { grid-row: 1 / span 2; width: 40px !important; height: 40px !important; }
  body.tv2-shell .mobile-logo #wl-brand-name-mobile { align-self: end; line-height: 1.1; }
  body.tv2-shell #tvc-lema { display: block; font-size: 10px; font-weight: 600; color: #fff; letter-spacing: .02em; line-height: 1.1; align-self: start; margin-top: -3px; }
  body.tv2-shell #tvc-lema b { color: #4fc3f7; font-weight: 700; }
  body.tv2-shell .mobile-logo { row-gap: 0 !important; }
  body.tv2-shell .mobile-logo #wl-brand-name-mobile { margin-bottom: 0 !important; padding-bottom: 0 !important; }
  /* Al actualizar (deslizar): solo una barra de carga arriba, sin el texto "Actualizando…" sobre la cabecera */
  body.tv2-shell #gptr-ind { height: 3px !important; padding: 0 !important; background: rgba(79,195,247,.25) !important; backdrop-filter: none !important; overflow: hidden; z-index: 9999 !important; }
  body.tv2-shell #gptr-ind > * { display: none !important; }
  body.tv2-shell #gptr-ind::after { content: ''; display: block; height: 3px; width: 40%; background: #4fc3f7; border-radius: 3px; animation: tvc-barra 1s ease-in-out infinite; }
  body.tv2-shell #tvc-sync span { display: inline; }
  body.tv2-shell #tvc-sync { padding: 6px 9px; }
  .tvc-hello { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .tvc-bell { position: relative; flex: none; width: 44px; height: 44px; border-radius: 14px; border: 1px solid #dce8f1; background: #fff; box-shadow: 0 7px 20px rgba(8,43,73,.06); font-size: 18px; cursor: pointer; }
.tvc-bell{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)}/*dg*/
  .tvc-bell .bell-badge-clone { position: absolute; top: -4px; right: -4px; background: #db3b54; color: #fff; font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 10px; }
.tvc-bell .bell-badge-clone{background:linear-gradient(145deg,#e46a7d 0%,#af2f43 100%)}/*dg*/
}
#tvc-lema { display: none; }
body.tv2-perfil-abierto #tvc-av { display: none !important; }
@keyframes tvc-barra { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

/* Detalle de OT del técnico (diseño Uplink Connect, APK): capa bajo la cabecera y sobre la barra inferior */
#tv2-ot.tvx-capa, #tv2-inv.tvx-capa, #tv2-perfil.tvx-capa, #tv2-rrhh.tvx-capa, #tv2-cotz.tvx-capa { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 850; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px 96px; background: #edf5fa; color: #10253b; font-family: Inter, ui-sans-serif, -apple-system, "Segoe UI", sans-serif; }
#tv2-ot.tvx-capa .tvx-host, #tv2-inv.tvx-capa .tvx-host, #tv2-perfil.tvx-capa .tvx-host, #tv2-rrhh.tvx-capa .tvx-host, #tv2-cotz.tvx-capa .tvx-host { padding-bottom: 0; }
.tvx .tvx-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.tvx .tvx-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.tvx .photo { cursor: pointer; }
.tvx .tabs { flex-direction: row; gap: 0; flex: none; overflow: visible; }
body.tv2-shell #s-asi.tvx-on > *:not(#asi-body) { display: none !important; }
body.tv2-shell #s-asi.tvx-on { padding-top: 0 !important; }
.tvx .search input { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; color: inherit; font-size: 14px; }
body.tv2-shell #tvc-av { border: 0; padding: 0; cursor: pointer; flex: none; box-shadow: 0 4px 12px rgba(7,140,255,.28); }

/* Mensajes del técnico (diseño Uplink Connect, APK): lista con markup del prototipo; chat con su estilo */
body.tv2-shell #s-msg.tvx-on { background: #edf5fa !important; }
body.tv2-shell #s-msg.tvx-on > .tv2-ph,
body.tv2-shell #s-msg.tvx-on .wa-inbox-hdr,
body.tv2-shell #s-msg.tvx-on .wa-search-wrap,
body.tv2-shell #s-msg.tvx-on #wa-canal-pin,
body.tv2-shell #s-msg.tvx-on #wa-conv-list { display: none !important; }
body.tv2-shell #s-msg.tvx-on #wa-inbox-view { overflow-y: auto !important; padding: 14px 16px 90px; }
body.tv2-shell #s-msg.tvx-on #tvx-msg { width: 100%; }
.tvx .message-list article, .tvx .contact-list > button { cursor: pointer; }
.tvx .message-list article .avatar, .tvx .contact-list .avatar { flex: 0 0 auto; }
/* Chat abierto */
body.tv2-shell #s-msg.tvx-on #wa-chat-view { background: #edf5fa !important; padding-bottom: 72px; }
body.tv2-shell #s-msg.tvx-on .wa-header { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 14px 16px 10px !important; }
body.tv2-shell #s-msg.tvx-on .wa-back-btn, body.tv2-shell #s-msg.tvx-on .wa-header .wa-hdr-btn { width: 40px !important; height: 40px !important; border-radius: 12px !important; background: #fff !important; border: 1px solid #dce8f1 !important; color: #082b49 !important; box-shadow: 0 7px 20px rgba(8,43,73,.06); font-size: 18px !important; }
body.tv2-shell #s-msg.tvx-on #wa-chat-ava { width: 44px !important; height: 44px !important; border-radius: 14px !important; background: #167ad1 !important; color: #fff !important; font-weight: 900 !important; font-size: 15px !important; }
body.tv2-shell #s-msg.tvx-on #wa-chat-ava{background:linear-gradient(145deg,#4e9adc 0%,#1262a7 100%)!important}/*dg*/
body.tv2-shell #s-msg.tvx-on .wa-header-name { color: #10253b !important; font-weight: 800 !important; font-size: 15px !important; }
body.tv2-shell #s-msg.tvx-on .wa-header-sub { color: #64788c !important; font-size: 11px !important; }
body.tv2-shell #s-msg.tvx-on .wa-feed { background: transparent !important; padding: 6px 16px 14px !important; }
body.tv2-shell #s-msg.tvx-on .wa-date-pill { background: #e2edf4 !important; color: #5b7183 !important; box-shadow: none !important; font-size: 10px !important; font-weight: 800 !important; }
body.tv2-shell #s-msg.tvx-on .wa-date-pill{background:linear-gradient(145deg,#f6fafc 0%,#ced8de 100%)!important}/*dg*/
body.tv2-shell #s-msg.tvx-on .wa-avatar, body.tv2-shell #s-msg.tvx-on .wa-avatar-ph { display: none !important; }
body.tv2-shell #s-msg.tvx-on .wa-bubble { display: flex !important; flex-direction: column; max-width: 84% !important; padding: 12px 14px !important; border-radius: 16px !important; font-size: 13px !important; line-height: 1.45 !important; box-shadow: none !important; }
body.tv2-shell #s-msg.tvx-on .wa-bubble::after { display: none !important; }
body.tv2-shell #s-msg.tvx-on .wa-bubble-other { background: #fff !important; border: 1px solid #dce8f1 !important; color: #10253b !important; }
body.tv2-shell #s-msg.tvx-on .wa-bubble-other{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
body.tv2-shell #s-msg.tvx-on .wa-bubble-mine { background: #dff3ff !important; border: 0 !important; color: #075b8e !important; }
body.tv2-shell #s-msg.tvx-on .wa-bubble-mine{background:linear-gradient(145deg,#f5fbff 0%,#cbdde8 100%)!important}/*dg*/
body.tv2-shell #s-msg.tvx-on .wa-meta { order: 2; margin: 5px 0 0 !important; justify-content: flex-start !important; gap: 4px; }
body.tv2-shell #s-msg.tvx-on .wa-bubble-mine .wa-meta { justify-content: flex-end !important; }
body.tv2-shell #s-msg.tvx-on .wa-time { font-size: 9px !important; color: #698092 !important; }
body.tv2-shell #s-msg.tvx-on .wa-checks { font-size: 10px !important; color: #698092; }
body.tv2-shell #s-msg.tvx-on .wa-sender { color: #1686c5 !important; font-weight: 800 !important; font-size: 11px !important; }
body.tv2-shell #s-msg.tvx-on .wa-text { color: inherit !important; }
body.tv2-shell #s-msg.tvx-on .wa-input-area { position: fixed !important; left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 5; display: flex !important; align-items: center; gap: 7px; background: #fff !important; border: 1px solid #dce8f1 !important; border-radius: 16px !important; padding: 7px !important; box-shadow: 0 12px 34px rgba(8,43,73,.10) !important; }
body.tv2-shell #s-msg.tvx-on .wa-input-area{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
body.tv2-shell #s-msg.tvx-on .wa-input-box { flex: 1; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; display: flex; align-items: center; gap: 4px; }
body.tv2-shell #s-msg.tvx-on .wa-textarea { background: transparent !important; color: #10253b !important; border: 0 !important; font-size: 14px !important; }
body.tv2-shell #s-msg.tvx-on .wa-textarea::placeholder { color: #8aa0af !important; }
body.tv2-shell #s-msg.tvx-on .wa-emoji-btn, body.tv2-shell #s-msg.tvx-on .wa-attach-btn { width: 38px; height: 38px; border-radius: 11px !important; background: #edf3f7 !important; color: #082b49 !important; transform: none !important; }
body.tv2-shell #s-msg.tvx-on .wa-emoji-btn, body.tv2-shell #s-msg.tvx-on .wa-attach-btn{background:linear-gradient(145deg,#fafbfd 0%,#d8dde1 100%)!important}/*dg*/
body.tv2-shell #s-msg.tvx-on .wa-send-btn { width: 38px !important; height: 38px !important; border-radius: 11px !important; background: #078cff !important; color: #fff !important; box-shadow: none !important; }
body.tv2-shell #s-msg.tvx-on .wa-send-btn{background:linear-gradient(145deg,#43a8ff 0%,#0670cc 100%)!important}/*dg*/
body.tv2-shell #s-msg.tvx-on #wa-emoji-panel { background: #fff !important; border-color: #dce8f1 !important; bottom: 58px !important; }
body.tv2-shell #s-msg.tvx-on #wa-emoji-panel{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
body.tv2-shell #s-msg.tvx-on .wa-send-btn svg { fill: #fff !important; stroke: none !important; }
body.tv2-shell #s-msg.tvx-on.tvx-dm .wa-sender { display: none !important; }
body.tv2-shell #s-msg.tvx-on .wa-send-btn { flex: 0 0 38px !important; padding: 0 !important; display: grid !important; place-items: center; }
body.tv2-shell #s-msg.tvx-on .wa-send-btn svg { width: 20px !important; min-width: 20px; height: 20px !important; }
body.tv2-shell #s-doc.tvx-on > *:not(#tvx-doc) { display: none !important; }
body.tv2-shell #s-doc.tvx-on { padding-top: 0 !important; }
.tvx .featured-doc, .tvx .file-list article { cursor: pointer; }

/* Asistente del técnico (diseño Uplink Connect, APK) */
body.tv2-shell #s-assistant.tvx-on { background: #edf5fa !important; padding: 14px 16px 150px !important; }
body.tv2-shell #s-assistant.tvx-on > .tv2-ph, body.tv2-shell #s-assistant.tvx-on .assistant-hero { display: none !important; }
body.tv2-shell #s-assistant.tvx-on .assistant-shell, body.tv2-shell #s-assistant.tvx-on .assistant-card { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; max-width: 720px; }
body.tv2-shell #s-assistant.tvx-on .tvx .botmark { width: 48px; height: 48px; object-fit: contain; border-radius: 12px; background: #fff; }
body.tv2-shell #s-assistant.tvx-on .tvx .botmark{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)}/*dg*/
body.tv2-shell #s-assistant.tvx-on .assistant-quick { display: flex !important; flex-wrap: nowrap !important; gap: 7px; overflow-x: auto; padding-bottom: 10px; margin: 0 0 12px !important; scrollbar-width: none; }
body.tv2-shell #s-assistant.tvx-on .assistant-quick::-webkit-scrollbar { display: none; }
body.tv2-shell #s-assistant.tvx-on .assistant-quick-btn { flex: 0 0 auto; min-width: 152px; text-align: left; border: 1px solid #9fccec !important; background: #fff !important; color: #082b49 !important; padding: 12px !important; border-radius: 13px !important; font-weight: 800 !important; font-size: 12px !important; white-space: normal; box-shadow: none !important; }
body.tv2-shell #s-assistant.tvx-on .assistant-quick-btn{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
body.tv2-shell #s-assistant.tvx-on #tvx-ai-hola { margin-bottom: 12px; }
body.tv2-shell #s-assistant.tvx-on #tvx-ai-hola .ai-scope { margin-top: 12px; }
body.tv2-shell #s-assistant.tvx-on .assistant-card:has(#assistant-messages .assistant-row-user) #tvx-ai-hola { display: none; }
body.tv2-shell #s-assistant.tvx-on .assistant-messages { background: transparent !important; border: 0 !important; padding: 0 !important; max-height: none !important; min-height: 0 !important; height: auto !important; overflow: visible !important; display: flex; flex-direction: column; gap: 10px; }
body.tv2-shell #s-assistant.tvx-on .assistant-bubble { border-radius: 18px !important; padding: 14px 16px !important; font-size: 13px !important; line-height: 1.55 !important; box-shadow: none !important; max-width: 88%; }
body.tv2-shell #s-assistant.tvx-on .assistant-bubble-assistant { background: #fff !important; border: 1px solid #dce8f1 !important; color: #10253b !important; border-bottom-left-radius: 5px !important; }
body.tv2-shell #s-assistant.tvx-on .assistant-bubble-assistant{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
body.tv2-shell #s-assistant.tvx-on .assistant-bubble-user { background: #dff3ff !important; border: 0 !important; color: #075b8e !important; border-bottom-right-radius: 5px !important; }
body.tv2-shell #s-assistant.tvx-on .assistant-bubble-user{background:linear-gradient(145deg,#f5fbff 0%,#cbdde8 100%)!important}/*dg*/
body.tv2-shell #s-assistant.tvx-on .assistant-form { position: fixed !important; left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 5; display: flex !important; gap: 7px; align-items: center; background: #fff !important; border: 1px solid #dce8f1 !important; border-radius: 16px !important; padding: 7px !important; box-shadow: 0 12px 34px rgba(8,43,73,.10) !important; margin: 0 !important; }
body.tv2-shell #s-assistant.tvx-on .assistant-form{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
body.tv2-shell #s-assistant.tvx-on .assistant-input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #10253b !important; font-size: 14px !important; padding: 8px 6px !important; }
body.tv2-shell #s-assistant.tvx-on #ia-mic-btn { background: #edf3f7 !important; border: 0 !important; color: #082b49 !important; border-radius: 11px !important; }
body.tv2-shell #s-assistant.tvx-on #ia-mic-btn{background:linear-gradient(145deg,#fafbfd 0%,#d8dde1 100%)!important}/*dg*/
body.tv2-shell #s-assistant.tvx-on .assistant-send { width: 38px !important; min-width: 38px; height: 38px !important; padding: 0 !important; border-radius: 11px !important; background: #078cff !important; color: #fff !important; border: 0 !important; box-shadow: none !important; font-size: 16px !important; }
body.tv2-shell #s-assistant.tvx-on .assistant-send{background:linear-gradient(145deg,#43a8ff 0%,#0670cc 100%)!important}/*dg*/
body.tv2-shell #s-assistant.tvx-on #ia-web-toggle { background: #fff !important; border: 1px solid #dce8f1 !important; color: #40566b !important; border-radius: 99px !important; }
body.tv2-shell #s-assistant.tvx-on #ia-web-toggle{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
body.tv2-shell #s-assistant.tvx-on { padding-left: 0 !important; padding-right: 0 !important; }
body.tv2-shell #s-assistant.tvx-on .assistant-shell { width: 100% !important; }
body.tv2-shell #s-assistant.tvx-on .assistant-quick-btn { flex: 0 0 152px !important; width: 152px; min-height: 86px; font-size: 15px !important; line-height: 1.3; }
body.tv2-shell #s-assistant.tvx-on .assistant-form { flex-direction: row !important; flex-wrap: nowrap !important; }
body.tv2-shell #s-assistant.tvx-on .assistant-input { width: auto !important; }
body.tv2-shell #s-assistant.tvx-on #ia-mic-btn { width: 38px !important; height: 38px !important; }
/* Notificaciones del técnico (diseño Uplink Connect, APK) */
body.tv2-shell #notif-panel.tvx-on #notif-panel-header { display: none !important; }
body.tv2-shell #notif-panel.tvx-on #notif-panel-list { padding: 14px 16px !important; background: #edf5fa !important; }
body.tv2-shell #notif-panel.tvx-on .notification-list article { cursor: pointer; }
body.tv2-shell #notif-panel.tvx-on #btn-notif { background: #fff !important; border: 1px solid #8dc9ff !important; color: #078cff !important; border-radius: 12px !important; padding: 11px !important; font-weight: 800 !important; }
body.tv2-shell #notif-panel.tvx-on #btn-notif{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
body.tv2-shell #notif-panel.tvx-on { z-index: 850 !important; padding-top: 0 !important; padding-bottom: calc(66px + env(safe-area-inset-bottom)) !important; }
body.tv2-shell #notif-panel.tvx-on .text-button { white-space: nowrap; }
.tvx .sync-hero p { font-size: 12px !important; margin-top: 3px; opacity: .85; }

/* Cierre de OT (diseño Uplink Connect, APK): bajo la cabecera de marca y sobre la barra inferior */
body.tv2-shell #tv2-cierre.tvx-cierre { z-index: 850 !important; bottom: calc(66px + env(safe-area-inset-bottom)) !important; }
body.tv2-shell #tv2-cierre.tvx-cierre .tvx .back-row { margin: 0 0 12px; }

/* Firma del cliente (diseño Uplink Connect, APK): página clara */
body.tv2-shell #mdl-firma.tvx-firma { background: #edf5fa !important; align-items: flex-start !important; padding: 14px 16px 24px !important; overflow-y: auto; bottom: 0; }
body.tv2-shell #mdl-firma.tvx-firma > div { background: #fff !important; border: 1px solid #dce8f1 !important; box-shadow: 0 12px 34px rgba(8,43,73,.10) !important; border-radius: 20px !important; max-width: 640px !important; padding: 18px !important; margin: 0 auto; }
body.tv2-shell #mdl-firma.tvx-firma > div{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
body.tv2-shell #mdl-firma.tvx-firma h3 { color: #10253b !important; font-size: 24px !important; font-weight: 900 !important; line-height: 1.1; }
body.tv2-shell #mdl-firma.tvx-firma h3 .tvx-eb { display: block; font-size: 10px; letter-spacing: .12em; font-weight: 900; color: #1686c5; margin-bottom: 4px; }
body.tv2-shell #mdl-firma.tvx-firma p { color: #64788c !important; }
body.tv2-shell #mdl-firma.tvx-firma #btn-firma-cerrar { background: #fff !important; border: 1px solid #dce8f1 !important; color: #082b49 !important; border-radius: 14px !important; width: 44px !important; height: 44px !important; }
body.tv2-shell #mdl-firma.tvx-firma #btn-firma-cerrar{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
body.tv2-shell #mdl-firma.tvx-firma div[style*="font-size:11px"] { color: #40566b !important; font-weight: 800 !important; }
body.tv2-shell #mdl-firma.tvx-firma input { background: #f7fbfd !important; border: 1px solid #c9dbe7 !important; color: #10253b !important; border-radius: 12px !important; padding: 12px !important; font-size: 14px !important; }
body.tv2-shell #mdl-firma.tvx-firma input{background:linear-gradient(145deg,#fdfefe 0%,#e1e4e6 100%)!important}/*dg*/
body.tv2-shell #mdl-firma.tvx-firma #firma-canvas { background: #f9fcfe !important; border: 2px dashed #aac8da !important; border-radius: 16px !important; height: 220px !important; }
body.tv2-shell #mdl-firma.tvx-firma #firma-canvas{background:linear-gradient(145deg,#fdfeff 0%,#e3e5e7 100%)!important}/*dg*/
body.tv2-shell #mdl-firma.tvx-firma #btn-firma-limpiar { background: transparent !important; border: 0 !important; color: #078cff !important; font-weight: 900 !important; flex: 0 0 auto !important; }
body.tv2-shell #mdl-firma.tvx-firma #btn-firma-kiosko { background: #fff !important; border: 1px solid #8dc9ff !important; color: #078cff !important; }
body.tv2-shell #mdl-firma.tvx-firma #btn-firma-kiosko{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
body.tv2-shell #mdl-firma.tvx-firma #btn-firma-guardar { background: linear-gradient(135deg, #0d3b63, #078cff) !important; box-shadow: 0 10px 30px rgba(8,91,162,.28) !important; border-radius: 14px !important; font-weight: 900 !important; }

/* Auditoría de posiciones (APK técnico): el botón fijo inferior nunca tapa contenido.
   - Espacio reservado al final del contenido: al llegar abajo, el botón queda en su lugar, sin montarse.
   - Franja del color de fondo alrededor del botón: mientras se hace scroll, el texto pasa por detrás. */
.tvx .bottom-action { bottom: calc(74px + env(safe-area-inset-bottom)); box-shadow: 0 0 0 10px #edf5fa, 0 14px 0 10px #edf5fa, 0 -8px 18px 6px rgba(237,245,250,.95) !important; }
.tvx .bottom-action.disabled { box-shadow: 0 0 0 10px #edf5fa, 0 14px 0 10px #edf5fa, 0 -8px 18px 6px rgba(237,245,250,.95) !important; }
.tvx-host:has(.bottom-action)::after { content: ''; display: block; height: 96px; }
.tvx-host:has(.bottom-action) { padding-bottom: 0 !important; }
body.tv2-shell #notif-panel.tvx-on { bottom: calc(66px + env(safe-area-inset-bottom)) !important; height: auto !important; padding-bottom: 0 !important; }
body.tv2-shell .tvx .bottom-action { position: fixed !important; left: 50%; transform: translateX(-50%); width: min(688px, calc(100% - 32px)) !important; bottom: calc(76px + env(safe-area-inset-bottom)); margin: 0 !important; z-index: 20; }
body.tv2-shell .tvx-capa .tvx-host:has(.bottom-action)::after { height: 64px; }
body.tv2-shell #tv2-nav { background: #fff !important; }
body.tv2-shell #tv2-nav{background:linear-gradient(145deg,#ffffff 0%,#dbebf9 100%)!important}/*dg*/
/* Títulos largos: máximo 2 líneas; el título cede espacio a los botones de la derecha */
.tvx .back-row > div, .tvx .title-row > div { min-width: 0; flex: 1; }
.tvx .back-row h1, .tvx .title-row h1 { overflow-wrap: break-word; hyphens: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tvx .back-row > button, .tvx .back-row .text-button, .tvx .title-row > button, .tvx .title-row > .avatar, .tvx .title-row > img, .tvx .title-row > .date-pill { flex: 0 0 auto; }
@media (max-width: 380px) { .tvx h1 { font-size: 22px !important; } }

/* ── Tarjetas con degradado suave del color de base — SOLO APK (html.is-native), todos los roles ──
   --g = color base de la tarjeta (r, g, b); el degradado va de transparente a ese color, encima del fondo de cada tema */
html.is-native .card, html.is-native .k-stat-card, html.is-native .job-card, html.is-native .tar-card, html.is-native .crm-card, html.is-native .dash-card { --g: 64, 140, 210; }
html.is-native .k-stat-card:has(.ks-icon-user) { --g: 99, 102, 241; }
html.is-native .k-stat-card:has(.ks-icon-fin) { --g: 16, 185, 129; }
html.is-native .k-stat-card:has(.ks-icon-canc) { --g: 239, 68, 68; }
html.is-native .k-stat-card:has(.ks-icon-pend) { --g: 245, 158, 11; }
html.is-native .k-stat-card:has(.ks-icon-sintec) { --g: 6, 182, 212; }
html.is-native .k-stat-card:has(.ks-icon-iva) { --g: 139, 92, 246; }
html.is-native .k-stat-card:has(.ks-icon-curs) { --g: 59, 130, 246; }
html.is-native .k-stat-card:has(.ks-icon-apr) { --g: 251, 146, 60; }
html.is-native .rec-card { --g: 245, 158, 11; }
html.is-native body:not(.dark):not(.tv2-shell) .card,
html.is-native body:not(.dark):not(.tv2-shell) .k-stat-card:not(.ks-active):not(.ks-active-warn),
html.is-native body:not(.dark):not(.tv2-shell) .job-card,
html.is-native body:not(.dark):not(.tv2-shell) .tar-card,
html.is-native body:not(.dark):not(.tv2-shell) .crm-card { background-image: linear-gradient(145deg, rgba(255,255,255,0) 0%, rgba(var(--g), .2) 100%) !important; }
html.is-native body.dark .card, html.is-native body.dark .k-stat-card:not(.ks-active):not(.ks-active-warn), html.is-native body.dark .job-card, html.is-native body.dark .tar-card, html.is-native body.dark .crm-card,
html.is-native .dash-card { background-image: linear-gradient(145deg, rgba(255,255,255,.02) 0%, rgba(var(--g), .24) 100%) !important; }

body.tv2-shell #offline-banner { display: none !important; }
html.is-native #offline-banner { display: none !important; }


/* Cotizador del vendedor en 5 pasos (APK): solo se muestra el paso activo */
body.vcot #s-cot .row-cot, body.vcot #s-cot .card.o1 { display: none !important; }
body.vcot #s-cot .vstep { display: none; }
body.vcot #s-cot .vstep.on { display: block; }
body.vcot #s-cot .step-badge { display: none; }
body.vcot #s-cot #tras-usar { display: none; }
body.vcot #s-cot #vcot-head { margin-bottom: 4px; }
body.vcot #s-cot #vcot-head .title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
body.vcot #s-cot #vcot-nav { margin: 6px 0 18px; }
body.vcot #s-cot .vstep .tvx .form-card { margin-bottom: 12px; }
body.vcot #s-cot .vstep .tvx .fgrid { display: grid; grid-template-columns: 1fr; gap: 10px; }
body.vcot #s-cot .vstep .tvx .fg { margin-bottom: 10px; }


/* ── Pantalla de actualización obligatoria (APK) ── */
#update-screen{position:fixed;inset:0;z-index:99999;background:#eef5fa;overflow-y:auto;-webkit-overflow-scrolling:touch;color:#102e46;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
#update-screen .upd-main{max-width:430px;min-height:100%;margin:auto;display:flex;flex-direction:column}
#update-screen .upd-hero{position:relative;background:linear-gradient(135deg,#06253e,#0c3c5d);color:#fff;padding:calc(env(safe-area-inset-top,0px) + 38px) 25px 49px;border-bottom:3px solid #15bedc;overflow:hidden}
#update-screen .upd-hero:after{content:'';position:absolute;bottom:9px;left:-20%;width:140%;height:55px;border-bottom:2px solid #238df1;border-radius:50%;pointer-events:none}
#update-screen .upd-brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:750}
#update-screen .upd-brand img{width:52px;height:52px;object-fit:contain}
#update-screen .upd-brand small{display:block;font-size:11px;color:#fff;font-weight:600;margin-top:3px;letter-spacing:.3px}
#update-screen .upd-brand small b{color:#4fc3f7;font-weight:700}
#update-screen .upd-hero h1{font-size:28px;line-height:1.16;margin:30px 0 12px;letter-spacing:-.6px;max-width:290px;color:#fff}
#update-screen .upd-hero p{font-size:14px;line-height:1.6;color:#c5e0ed;margin:0;max-width:310px}
#update-screen .upd-body{padding:0 22px 24px;flex:1}
#update-screen .upd-panel{position:relative;margin-top:-23px;background:#fff;border:1px solid #d9e6ef;border-radius:24px;padding:23px;box-shadow:0 10px 30px #103c5610}
#update-screen .upd-icon{width:44px;height:44px;border-radius:14px;background:#e6f4ff;color:#087cc5;display:grid;place-items:center;font-size:22px;margin-bottom:16px}
#update-screen .upd-panel.ok .upd-icon{color:#09826e;background:#e4f8f0}
#update-screen .upd-panel.err .upd-icon{color:#a26412;background:#fff1d9}
#update-screen .upd-panel h2{font-size:19px;margin:0 0 8px;letter-spacing:-.3px;color:#102e46}
#update-screen .upd-muted{font-size:13px;color:#627b8e;line-height:1.6;margin:0}
#update-screen .upd-meta{display:flex;justify-content:space-between;align-items:center;margin:20px 0 9px;font-size:12px;color:#627b8e}
#update-screen .upd-meta strong{font-size:20px;color:#087cca}
#update-screen .upd-track{height:8px;border-radius:10px;background:#e6f0f7;overflow:hidden;margin-bottom:6px}
#update-screen #update-progress-bar-fill{width:0%;height:100%;background:linear-gradient(90deg,#087bd6,#13bdda);border-radius:10px;transition:width .25s}
#update-screen #update-progress-bar-fill.indet{width:40%!important;animation:updInd 1.2s ease-in-out infinite}
@keyframes updInd{0%{margin-left:-40%}100%{margin-left:100%}}
#update-screen .upd-primary{margin-top:20px;border:0;border-radius:13px;width:100%;min-height:52px;padding:12px;font-weight:750;font-size:14px;color:#fff;background:linear-gradient(110deg,#066abc,#008cda)}
#update-screen .upd-primary:disabled{background:#edf3f8;color:#607c8e}
#update-screen .upd-primary small{display:block;font-size:11px;font-weight:500;opacity:.85;margin-top:3px}
#update-screen .upd-versions{margin:23px 1px 0}
#update-screen .upd-versions h3{font-size:11px;letter-spacing:1.2px;color:#688195;text-transform:uppercase;margin:0 0 13px}
#update-screen .upd-ver{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:13px;border-bottom:1px solid #dce8f0}
#update-screen .upd-ver span{color:#647d8e}
#update-screen .upd-ver b{font-weight:650;color:#304e64}
#update-screen .upd-ver:last-child b{color:#087cca}
#update-screen .upd-req-note{margin:20px 0 0;font-size:12px;line-height:1.6;color:#627b8e}
#update-screen .upd-foot{padding:8px 25px calc(env(safe-area-inset-bottom,0px) + 20px);text-align:center;color:#7790a2;font-size:10px}

/* Clientes del vendedor (APK) */
body.tv2-shell #s-cli.tvx-on > *:not(#tvx-cli) { display: none !important; }
body.tv2-shell #s-cli.tvx-on { padding-top: 0 !important; }

/* Vendedor (APK): sin los KPI viejos en Inicio, sin la vista vieja de Tareas mientras carga y pasos del cotizador centrados */
body.tv2-shell #kpi-bar { display: none !important; }
body.tv2-shell #s-tar:not(.tvx-on) > *:not(#tar-content) { display: none !important; }
body.tv2-shell #s-tar:not(.tvx-on) { padding-top: 0 !important; }
body.vcot #vcot-prog button { width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; line-height: 1; text-align: center; }

/* Cuadro de iniciales de la cabecera: color propio de cada rol (mismos colores designados del distintivo de rol) */
body.tv2-shell #tvc-av[data-rol="admin"]      { background: linear-gradient(135deg, #a855f7, #7e22ce) !important; box-shadow: 0 4px 12px rgba(168,85,247,.45) !important; }
body.tv2-shell #tvc-av[data-rol="supervisor"] { background: linear-gradient(135deg, #f59e0b, #d97706) !important; box-shadow: 0 4px 12px rgba(245,158,11,.45) !important; }
body.tv2-shell #tvc-av[data-rol="vendedor"]   { background: linear-gradient(135deg, #10b981, #059669) !important; box-shadow: 0 4px 12px rgba(16,185,129,.45) !important; }
body.tv2-shell #tvc-av[data-rol="tecnico"]    { background: linear-gradient(135deg, #06b6d4, #0891b2) !important; box-shadow: 0 4px 12px rgba(6,182,212,.45) !important; }
body.tv2-shell #tvc-av[data-rol="bodega"]     { background: linear-gradient(135deg, #0ea5e9, #2563eb) !important; box-shadow: 0 4px 12px rgba(14,165,233,.45) !important; }
body.tv2-shell #tvc-av[data-rol="contador"]   { background: linear-gradient(135deg, #64748b, #475569) !important; box-shadow: 0 4px 12px rgba(100,116,139,.45) !important; }

/* Avatar de Mi perfil con el color de su rol (igual que el cuadro de la cabecera) */
.tvx .avatar[data-rol="admin"] { background: linear-gradient(135deg, #a855f7, #7e22ce) !important; box-shadow: 0 4px 12px rgba(168,85,247,.45) !important; color: #fff !important; }
.tvx .avatar[data-rol="supervisor"] { background: linear-gradient(135deg, #f59e0b, #d97706) !important; box-shadow: 0 4px 12px rgba(245,158,11,.45) !important; color: #fff !important; }
.tvx .avatar[data-rol="vendedor"] { background: linear-gradient(135deg, #10b981, #059669) !important; box-shadow: 0 4px 12px rgba(16,185,129,.45) !important; color: #fff !important; }
.tvx .avatar[data-rol="tecnico"] { background: linear-gradient(135deg, #06b6d4, #0891b2) !important; box-shadow: 0 4px 12px rgba(6,182,212,.45) !important; color: #fff !important; }
.tvx .avatar[data-rol="bodega"] { background: linear-gradient(135deg, #0ea5e9, #2563eb) !important; box-shadow: 0 4px 12px rgba(14,165,233,.45) !important; color: #fff !important; }
.tvx .avatar[data-rol="contador"] { background: linear-gradient(135deg, #64748b, #475569) !important; box-shadow: 0 4px 12px rgba(100,116,139,.45) !important; color: #fff !important; }

/* Pantalla de actualización: "Qué trae esta versión" (se muestra antes del tamaño y del botón) */
#update-screen .upd-notas{margin:20px 0 4px;padding:17px 0 3px;border-top:1px solid #e0ebf2}
#update-screen .upd-notas-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}
#update-screen .upd-notas-hd h3{font-size:16px;margin:0;letter-spacing:-.3px;color:#102e46}
#update-screen .upd-notas-hd span{font-size:10px;color:#157da8;background:#e9f7fb;padding:5px 8px;border-radius:7px;white-space:nowrap}
#update-screen .upd-notas ul{margin:0;padding:0;list-style:none;display:grid;gap:17px}
#update-screen .upd-notas li{display:flex;gap:11px;align-items:flex-start}
#update-screen .upd-check{width:25px;height:25px;flex-shrink:0;display:grid;place-items:center;border-radius:8px;background:#eaf5fe;color:#0b85c9;font-size:13px}
#update-screen .upd-notas b{font-size:13px;display:block;margin:1px 0 4px;color:#102e46}
#update-screen .upd-notas li p{font-size:12px;line-height:1.6;color:#627b8e;margin:0}
#update-screen .upd-notas .upd-sin{font-size:12px;color:#627b8e;line-height:1.6;margin:0 0 12px}

/* Contáctame del vendedor (APK) */
body.tv2-shell #s-contacto.tvx-on > *:not(#tvx-ctc) { display: none !important; }
body.tv2-shell #s-contacto.tvx-on { padding-top: 0 !important; }
body.tv2-shell #s-contacto:not(.tvx-on) > *:not(#contacto-content) { display: none !important; }

/* Contáctame del vendedor: estado de cada solicitud bien distinguible */
#tvx-ctc .file-list article[data-est]{border:.5px solid var(--line,#dce8f1);border-left:4px solid #cbd5e1}
#tvx-ctc .file-list article[data-est="pendiente"]{border-left-color:#f59e0b}
#tvx-ctc .file-list article[data-est="mia"]{border-left-color:#078cff}
#tvx-ctc .file-list article[data-est="otro"]{border-left-color:#94a3b8;opacity:.8}
#tvx-ctc .tag.ctc-est{display:inline-block;padding:4px 11px;border-radius:999px;font-weight:700;font-size:12px}
#tvx-ctc .tag.ctc-pendiente{background:#fff1d6;color:#9a6200}
#tvx-ctc .tag.ctc-pendiente{background:linear-gradient(145deg,#fffbf3 0%,#e8dbc3 100%)}/*dg*/
#tvx-ctc .tag.ctc-mia{background:#dbeeff;color:#0569c4}
#tvx-ctc .tag.ctc-mia{background:linear-gradient(145deg,#f4faff 0%,#c7d9e8 100%)}/*dg*/
#tvx-ctc .tag.ctc-otro{background:#e5e9ee;color:#475569}
#tvx-ctc .tag.ctc-otro{background:linear-gradient(145deg,#f7f8fa 0%,#d0d4d9 100%)}/*dg*/
#tvx-ctc .tag.ctc-rechazada{background:#fde4e2;color:#b3261e}
#tvx-ctc .tag.ctc-rechazada{background:linear-gradient(145deg,#fef7f6 0%,#e6cfce 100%)}/*dg*/
#tvx-ctc .file-list article[data-est="otro"]{cursor:default}

/* Avisos (toast) en la app: sobre la barra inferior y centrados, para que no la tapen */
body.tv2-shell #toast-container{left:12px !important;right:12px !important;bottom:calc(76px + env(safe-area-inset-bottom)) !important;align-items:center}
#tvx-ctc .tag.ctc-prio-alta{background:#fde4e2;color:#b3261e}
#tvx-ctc .tag.ctc-prio-alta{background:linear-gradient(145deg,#fef7f6 0%,#e6cfce 100%)}/*dg*/
#tvx-ctc .tag.ctc-prio-media{background:#fff1d6;color:#9a6200}
#tvx-ctc .tag.ctc-prio-media{background:linear-gradient(145deg,#fffbf3 0%,#e8dbc3 100%)}/*dg*/
#tvx-ctc .tag.ctc-prio-baja{background:#e0f4e6;color:#1b7a3d}
#tvx-ctc .tag.ctc-prio-baja{background:linear-gradient(145deg,#f6fcf8 0%,#ccded1 100%)}/*dg*/

/* Inicio del vendedor: espacio entre tarjetas destacadas seguidas */
#vnd-dash-body .next + .next{margin-top:14px}

/* Inicio del vendedor: cada KPI con su color e ícono */
#vnd-dash-body .stats-grid .kpi{position:relative;padding:12px 14px 12px 16px;min-height:0;overflow:hidden;border:.5px solid var(--kl);border-left:4px solid var(--kc)}
#vnd-dash-body .stats-grid .kpi[data-k="sin"]{--kc:#f59e0b;--kt:#fff3da;--kn:#9a6200;--kl:#f3dcae}
#vnd-dash-body .stats-grid .kpi[data-k="seg"]{--kc:#078cff;--kt:#dbeeff;--kn:#0569c4;--kl:#b7d6f3}
#vnd-dash-body .stats-grid .kpi[data-k="cot"]{--kc:#7c5cff;--kt:#ece7ff;--kn:#5a3fd1;--kl:#d3c9f3}
#vnd-dash-body .stats-grid .kpi[data-k="act"]{--kc:#1b9e5a;--kt:#dff5e8;--kn:#157a45;--kl:#bde2cd}
#vnd-dash-body .stats-grid .kpi{background:linear-gradient(135deg,#fff 0%,var(--kt) 100%)}
#vnd-dash-body .stats-grid .kpi .kpi-ico{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--kt);color:var(--kn);font-size:15px;font-weight:800}
#vnd-dash-body .stats-grid .kpi h2{margin:0;font-size:32px;line-height:1.05;color:var(--kn)}
#vnd-dash-body .stats-grid .kpi p{margin:4px 0 0;font-size:13px;font-weight:700;color:#1a2b3c}
#vnd-dash-body .stats-grid .kpi small{display:block;margin-top:1px;font-size:11px;color:#6b7f90}

/* ── Pantalla de inicio de sesión: diseño aprobado "Login con conexiones" (2026-10-21) ──
   Fondo marino con trama de red, logo oficial y tarjeta clara. Un solo estilo (sin tema oscuro/claro).
   Todo va bajo #login-screen.lg2 para no tocar el resto de la app. */
#login-screen.lg2{background:#061c30;animation:none;align-items:flex-start;justify-content:center;overflow-y:auto;overscroll-behavior:contain;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
#login-screen.lg2 *{box-sizing:border-box}
#login-screen.lg2 .lg2-phone{position:relative;isolation:isolate;width:100%;max-width:430px;min-height:100%;margin:0 auto;padding:max(36px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom));background:radial-gradient(ellipse 110% 63% at 105% -10%,#105775 0%,#0a3654 39%,#072744 76%);overflow:hidden}
#login-screen.lg2 .lg2-network{position:absolute;inset:0;width:100%;height:760px;z-index:-1;pointer-events:none;opacity:.72}
#login-screen.lg2 .lg2-identity{display:block;text-align:center;max-width:366px;margin:0 auto;position:relative}
#login-screen.lg2 .lg2-logo{width:112px;height:112px;display:grid;place-items:center;margin:0 auto 15px;position:relative}
#login-screen.lg2 .lg2-logo:before{content:"";position:absolute;inset:0;background:radial-gradient(circle,#0eaff324,#078cff04 58%,transparent 72%);border:1px solid #3e97c120;border-radius:50%}
#login-screen.lg2 .lg2-logo:after{content:"";position:absolute;inset:8px;border:1px solid #71c7e62b;border-top-color:transparent;border-right-color:#1eb5e6a0;border-bottom-color:transparent;border-radius:50%;transform:rotate(-27deg);pointer-events:none}
#login-screen.lg2 .lg2-logo img{width:80px;height:80px;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 5px 12px #001b3955)}
#login-screen.lg2 .lg2-card{position:relative;width:100%;max-width:366px;margin:31px auto 0;padding:25px 23px 24px;border-radius:25px;background:linear-gradient(150deg,#fff,#fcfeff);border:1px solid #e3f4fb;box-shadow:0 22px 48px #001a302b,0 0 0 5px #ffffff04;overflow:hidden;text-align:left}
#login-screen.lg2 .lg2-card:before{content:"";position:absolute;top:0;left:25px;right:25px;height:2px;background:linear-gradient(90deg,transparent,#15c2e6 35%,#6fcbef 65%,transparent)}
#login-screen.lg2 .lg2-card:after{content:"";position:absolute;right:-45px;top:-52px;height:130px;width:130px;pointer-events:none;border-radius:50%;background:radial-gradient(circle,#d8f0fc50,transparent 70%)}
#login-screen.lg2 .lg2-heading{display:flex;gap:12px;align-items:center;position:relative;z-index:1;margin-bottom:25px}
#login-screen.lg2 .lg2-emblem{width:42px;height:42px;flex:0 0 42px;border-radius:13px;background:linear-gradient(135deg,#e1f3fd,#edf7fc);color:#0989bd;border:1px solid #d9edf8;display:grid;place-items:center}
#login-screen.lg2 .lg2-emblem svg{height:23px;width:23px}
#login-screen.lg2 .lg2-heading>div:not(.lg2-conn){min-width:0;flex:1}
#login-screen.lg2 .lg2-heading h1{font-size:25px;line-height:1.2;letter-spacing:-.045em;font-weight:750;margin:0 0 5px;color:#143a55}
#login-screen.lg2 .lg2-heading p{font-size:11px;line-height:1.5;color:#88a1b2;margin:0}
#login-screen.lg2 .lg2-card label{display:block;font-size:11px;font-weight:650;line-height:1.5;margin:0 0 8px;color:#46687f}
#login-screen.lg2 .lg2-input{position:relative;margin-bottom:20px}
#login-screen.lg2 .lg2-input>svg{position:absolute;left:15px;top:17px;width:18px;height:18px;color:#88a9bd;pointer-events:none}
#login-screen.lg2 .lg2-input input{display:block;width:100%;height:53px;min-width:0;padding:0 14px 0 44px;border:1px solid #dce8f1;background:#f3f8fc!important;color:#193e58;border-radius:12px;font-size:13px;box-shadow:none;backdrop-filter:none;transition:box-shadow .12s,border-color .12s,background .12s;transform:none}
#login-screen.lg2 .lg2-input input::placeholder{color:#9bb0be}
#login-screen.lg2 .lg2-input input:focus{background:#fff!important;border-color:#1a95cf;box-shadow:0 0 0 3px #078ce60c;outline:none;transform:none}
#login-screen.lg2 #l-pass{padding-right:51px}
#login-screen.lg2 .lg2-eye{position:absolute;right:5px;top:5px;width:44px;height:44px;display:grid;place-items:center;border-radius:9px;background:transparent;border:0;color:#7090a6;padding:0;cursor:pointer}
#login-screen.lg2 .lg2-eye svg{width:20px;height:20px}
#login-screen.lg2 .lg2-error{margin:-6px 0 14px;padding:11px 12px;background:#fdf1f4;border:1px solid #efd7de;border-radius:10px;color:#a7485d;font-size:11px;line-height:1.65}
#login-screen.lg2 .lg2-submit{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:53px;margin:26px 0 0;padding:0 11px 0 19px;border:0;border-radius:12px;background:linear-gradient(110deg,#087ed0,#079dde);color:#fff;font-size:13px;font-weight:750;box-shadow:0 7px 17px #0a95ce1c;transform:none;filter:none;cursor:pointer}
#login-screen.lg2 .lg2-submit:hover:not(:disabled),#login-screen.lg2 .lg2-submit:active{transform:none;filter:none;box-shadow:0 7px 17px #0a95ce1c}
#login-screen.lg2 .lg2-submit>svg{height:30px;width:30px;padding:7px;border:1px solid #ffffff30;border-radius:9px;background:#ffffff10}
#login-screen.lg2 .lg2-submit:disabled{opacity:1;filter:none;background:linear-gradient(110deg,#d3e7f4,#e3f0f7);color:#7095ac;box-shadow:none;cursor:default}
#login-screen.lg2 .lg2-submit .spin-w{margin:0 8px 0 0}
#login-screen.lg2 .lg2-footer{display:flex;align-items:center;justify-content:center;gap:12px;max-width:350px;margin:20px auto 0;padding:0 7px}
#login-screen.lg2 .lg2-conn{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;width:fit-content!important;height:auto!important;flex:0 0 auto;align-self:flex-start;margin:2px 0 0 auto!important;padding:5px 10px!important;border:1px solid #cfe9df!important;border-radius:20px!important;background:#eef8f3!important;box-shadow:none!important;font-size:10px!important;font-weight:650!important;line-height:1.3;color:#1f7a5c;z-index:2}
#login-screen.lg2 .lg2-conn #login-conn-dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#2fb792;display:block}
#login-screen.lg2 .lg2-conn #login-conn-lbl{font-size:10px;text-transform:none;color:inherit}
#login-screen.lg2 .lg2-conn.loading{background:#fff8e6!important;border-color:#f0e0b0!important;color:#9a7a14}
#login-screen.lg2 .lg2-conn.loading #login-conn-dot{background:#cfac57;animation:lg2pulse 1.4s infinite}
#login-screen.lg2 .lg2-conn.offline{background:#fdf1ea!important;border-color:#f0d6c6!important;color:#b0613a}
#login-screen.lg2 .lg2-conn.offline #login-conn-dot{background:#d9864f}
#login-screen.lg2 #version-tag-login{display:flex!important;align-items:center;justify-content:center;gap:7px;width:auto!important;margin:0!important;font-size:9px!important;color:#7599b2!important;text-align:center!important}
#login-screen.lg2 .beta-badge{font-size:7px;font-weight:650;letter-spacing:.08em;padding:3px 5px;border:1px solid #395e79;background:#ffffff05;border-radius:4px;color:#8cb9d3}
@keyframes lg2pulse{50%{opacity:.4}}
@media(max-width:370px){#login-screen.lg2 .lg2-phone{padding:max(29px,env(safe-area-inset-top)) 17px max(22px,env(safe-area-inset-bottom))}#login-screen.lg2 .lg2-logo{width:101px;height:101px;margin-bottom:12px}#login-screen.lg2 .lg2-logo img{width:73px;height:73px}#login-screen.lg2 .lg2-card{margin-top:28px;padding:23px 20px}#login-screen.lg2 .lg2-heading h1{font-size:24px}#login-screen.lg2 .lg2-heading{gap:10px;margin-bottom:23px}#login-screen.lg2 .lg2-emblem{width:38px;height:38px;flex-basis:38px;border-radius:11px}}
@media(max-height:680px){#login-screen.lg2 .lg2-phone{padding-top:20px}#login-screen.lg2 .lg2-logo{width:87px;height:87px;margin-bottom:9px}#login-screen.lg2 .lg2-logo img{width:65px;height:65px}#login-screen.lg2 .lg2-card{margin-top:25px;padding-top:22px;padding-bottom:22px}#login-screen.lg2 .lg2-heading{margin-bottom:21px}#login-screen.lg2 .lg2-heading h1{font-size:23px}#login-screen.lg2 .lg2-input{margin-bottom:18px}#login-screen.lg2 .lg2-submit{margin-top:23px}#login-screen.lg2 .lg2-footer{margin-top:17px}}
@media(min-width:500px){#login-screen.lg2{align-items:center}#login-screen.lg2 .lg2-phone{min-height:0;border-radius:27px;box-shadow:0 20px 80px #00122a66}}
@media(prefers-reduced-motion:reduce){#login-screen.lg2 *{animation:none!important;transition:none!important}}


/* ── Mensajería: crear grupo (solo admin y supervisor) ── */
.msg-grp-ov{position:fixed;inset:0;z-index:10050;background:rgba(7,25,45,.55);display:flex;align-items:flex-end;justify-content:center;padding:0}
.msg-grp-card{width:100%;max-width:460px;max-height:88vh;display:flex;flex-direction:column;background:#fff;color:#143a55;border-radius:22px 22px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(0,25,48,.25)}
@media(min-width:600px){.msg-grp-ov{align-items:center}.msg-grp-card{border-radius:22px}}
.msg-grp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.msg-grp-head h3{margin:0;font-size:18px;color:#143a55}
#msg-grp-ov .msg-grp-x{border:0;background:#eef5fa!important;color:#46687f!important;box-shadow:none!important;width:34px;height:34px;border-radius:10px;font-size:20px;line-height:1;cursor:pointer}
.msg-grp-card label{display:block;font-size:12px;font-weight:650;color:#46687f;margin:10px 0 6px}
.msg-grp-card label span{font-weight:500;color:#88a1b2}
#msg-grp-ov .msg-grp-card>input{width:100%;box-sizing:border-box;height:46px;border:1px solid #dce8f1!important;background:#f3f8fc!important;color:#193e58!important;border-radius:12px;padding:0 12px!important;font-size:14px;box-shadow:none!important;backdrop-filter:none}
#msg-grp-ov .msg-grp-card>input::placeholder{color:#9bb0be}
.msg-grp-lista{flex:1;min-height:120px;overflow-y:auto;margin-top:8px;border:1px solid #e3edf4;border-radius:12px;background:#fbfdff}
.msg-grp-fila{display:flex!important;align-items:center;gap:10px;margin:0!important;padding:10px 12px;border-bottom:1px solid #eef4f8;cursor:pointer}
.msg-grp-fila:last-child{border-bottom:0}
.msg-grp-fila input{width:20px;height:20px;flex:0 0 20px;accent-color:#0a87d6}
.msg-grp-fila b{display:block;font-size:14px;color:#143a55;font-weight:600}
.msg-grp-fila small{display:block;font-size:11px;color:#88a1b2}
.msg-grp-vacio{padding:16px;text-align:center;color:#88a1b2;font-size:13px;margin:0}
.msg-grp-err{margin:10px 0 0;padding:9px 12px;background:#fdf1f4;border:1px solid #efd7de;border-radius:10px;color:#a7485d;font-size:12px}
#msg-grp-ov .msg-grp-ok{margin-top:12px;height:48px;border:0!important;border-radius:12px;background:linear-gradient(110deg,#087ed0,#079dde)!important;color:#fff!important;box-shadow:none!important;font-size:14px;font-weight:700;cursor:pointer}
.msg-grp-ok:disabled{opacity:.6;cursor:default}
.msg-title-btns{display:flex;gap:8px;align-items:center}
.tvx .msg-grp-new{width:100%;margin:4px 0 10px}

/* Inicio del supervisor (APK): mismos KPI que Trabajos, cada uno con su color (naranja, azul, violeta, verde) */
#sup-dash-body .stats-grid .kpi{position:relative;padding:12px 14px 12px 16px;min-height:0;overflow:hidden;cursor:pointer;border:.5px solid var(--kl);border-left:4px solid var(--kc)}
#sup-dash-body .stats-grid .kpi[data-k="pen"]{--kc:#f59e0b;--kt:#fff3da;--kn:#9a6200;--kl:#f3dcae}
#sup-dash-body .stats-grid .kpi[data-k="cur"]{--kc:#078cff;--kt:#dbeeff;--kn:#0569c4;--kl:#b7d6f3}
#sup-dash-body .stats-grid .kpi[data-k="apr"]{--kc:#7c5cff;--kt:#ece7ff;--kn:#5a3fd1;--kl:#d3c9f3}
#sup-dash-body .stats-grid .kpi[data-k="fin"]{--kc:#1b9e5a;--kt:#dff5e8;--kn:#157a45;--kl:#bde2cd}
#sup-dash-body .stats-grid .kpi{background:linear-gradient(135deg,#fff 0%,var(--kt) 100%)}
#sup-dash-body .stats-grid .kpi .kpi-ico{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--kt);color:var(--kn);font-size:15px;font-weight:800}
#sup-dash-body .stats-grid .kpi h2{margin:0;font-size:32px;line-height:1.05;color:var(--kn)}
#sup-dash-body .stats-grid .kpi p{margin:4px 0 0;font-size:13px;font-weight:700;color:#1a2b3c}
#sup-dash-body .stats-grid .kpi small{display:block;margin-top:1px;font-size:11px;color:#6b7f90}
#sup-dash-body .note{margin:8px 2px 14px;font-size:12px;color:#6b7f90}
#sup-dash-body .next{margin:14px 0}
#sup-dash-body .attention-list{margin-bottom:14px}
/* Trabajos del supervisor (APK) */
body.tv2-shell #s-crm.tvx-on > *:not(#sup-trab){display:none !important}
body.tv2-shell #s-crm.tvx-on{padding-top:0 !important;height:auto !important;overflow:visible !important}
#sup-trab .sup-tools{display:flex;gap:10px;align-items:stretch;margin:4px 0 14px}
#sup-trab .sup-tools .search{flex:1 1 0;min-width:0;margin:0}
#sup-trab .sup-tools .primary{flex:1 1 0;min-width:0;margin:0;white-space:nowrap}
#sup-trab .section-title{display:flex;align-items:center;justify-content:space-between}
#sup-trab .section-title .link{background:none;border:0;color:#0569c4;font-weight:700;font-size:13px;padding:4px 0}
#sup-trab .note{margin:0 2px 10px;font-size:12px;color:#6b7f90}
#sup-trab .stats-grid .kpi{position:relative;padding:12px 14px 12px 16px;min-height:0;overflow:hidden;cursor:pointer;border:.5px solid var(--kl);border-left:4px solid var(--kc)}
#sup-trab .stats-grid .kpi.sel{box-shadow:0 0 0 2px var(--kc) inset}
#sup-trab .stats-grid .kpi[data-k="pen"]{--kc:#f59e0b;--kt:#fff3da;--kn:#9a6200;--kl:#f3dcae}
#sup-trab .stats-grid .kpi[data-k="cur"]{--kc:#078cff;--kt:#dbeeff;--kn:#0569c4;--kl:#b7d6f3}
#sup-trab .stats-grid .kpi[data-k="apr"]{--kc:#7c5cff;--kt:#ece7ff;--kn:#5a3fd1;--kl:#d3c9f3}
#sup-trab .stats-grid .kpi[data-k="fin"]{--kc:#1b9e5a;--kt:#dff5e8;--kn:#157a45;--kl:#bde2cd}
#sup-trab .stats-grid .kpi{background:linear-gradient(135deg,#fff 0%,var(--kt) 100%)}
#sup-trab .stats-grid .kpi .kpi-ico{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--kt);color:var(--kn);font-size:15px;font-weight:800}
#sup-trab .stats-grid .kpi h2{margin:0;font-size:32px;line-height:1.05;color:var(--kn)}
#sup-trab .stats-grid .kpi p{margin:4px 0 0;font-size:13px;font-weight:700;color:#1a2b3c}
#sup-trab .stats-grid .kpi small{display:block;margin-top:1px;font-size:11px;color:#6b7f90}
#sup-trab .sup-list{display:grid;gap:10px;margin-bottom:14px}
#sup-trab .sup-job{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:#fff;border:.5px solid var(--kl);border-left:4px solid var(--kc);cursor:pointer}
#sup-trab .sup-job[data-e="pen"]{--kc:#f59e0b;--kl:#f3dcae;background:linear-gradient(135deg,#fff 0%,#fff3da 100%)}
#sup-trab .sup-job[data-e="cur"]{--kc:#078cff;--kl:#b7d6f3;background:linear-gradient(135deg,#fff 0%,#dbeeff 100%)}
#sup-trab .sup-job[data-e="apr"]{--kc:#7c5cff;--kl:#d3c9f3;background:linear-gradient(135deg,#fff 0%,#ece7ff 100%)}
#sup-trab .sup-job[data-e="fin"]{--kc:#1b9e5a;--kl:#bde2cd;background:linear-gradient(135deg,#fff 0%,#dff5e8 100%)}
#sup-trab .sup-job>div{flex:1;min-width:0}
#sup-trab .sup-job b{display:block;font-size:14px;color:#10253b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sup-trab .sup-job small{display:block;font-size:12px;color:#6b7f90;margin-top:1px}
#sup-trab .sup-job i{font-style:normal;color:#8aa0b2;font-size:20px}
#sup-trab .sup-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
#sup-trab{padding:12px 16px 96px;box-sizing:border-box}

/* Crear tarea y revisar cierre del supervisor (capa #tv2-cotz) */
#tv2-cotz .steps{display:flex;gap:6px;margin:6px 0 14px}
#tv2-cotz .steps span{flex:1;text-align:center;padding:8px 4px;border-radius:12px;background:#fff;border:.5px solid var(--line);font-size:12px;font-weight:700;color:#6b7f90}
#tv2-cotz .steps span.on{background:#078cff;border-color:#078cff;color:#fff}
#tv2-cotz .steps span.done{color:#157a45;border-color:#bde2cd;background:#dff5e8}
#tv2-cotz .field{display:block;margin:0 0 12px}
#tv2-cotz .field>span{display:block;font-size:12px;font-weight:700;color:#40566b;margin-bottom:4px}
#tv2-cotz .field input,#tv2-cotz .field select,#tv2-cotz .field textarea{width:100%;box-sizing:border-box;padding:12px;border-radius:12px;border:.5px solid var(--line);background:#fff !important;color:#10253b !important;font-size:15px}
#tv2-cotz .contact-actions{display:flex;gap:10px;margin:14px 0}
#tv2-cotz .contact-actions>button{flex:1;min-height:48px}
#tv2-cotz .step-list button.on{border-color:#078cff}

/* ── Supervisor fiel al prototipo (2026-10-21): tarjetas de estado compactas, tarjetas de trabajo y Equipo ── */
#sup-dash-body .stats-grid .kpi .kk,#sup-trab .stats-grid .kpi .kk{display:flex;align-items:center;gap:10px}
#sup-dash-body .stats-grid .kpi .kpi-ico,#sup-trab .stats-grid .kpi .kpi-ico{position:static;width:32px;height:32px;border-radius:50%;flex:0 0 32px}
#sup-dash-body .stats-grid .kpi .kk h2,#sup-trab .stats-grid .kpi .kk h2{flex:1;font-size:30px;line-height:1}
#sup-dash-body .stats-grid .kpi .kk-arr,#sup-trab .stats-grid .kpi .kk-arr{font-style:normal;color:var(--kn);opacity:.65;font-size:16px;align-self:flex-start}
#sup-dash-body .stats-grid .kpi,#sup-trab .stats-grid .kpi{padding:12px 14px}
#sup-dash-body .stats-grid .kpi p,#sup-trab .stats-grid .kpi p{margin:10px 0 0;color:var(--kn)}
#sup-dash-body .stats-grid .kpi small,#sup-trab .stats-grid .kpi small{color:var(--kn);opacity:.8}
#sup-trab .search{display:flex;align-items:center;justify-content:center;gap:8px;background:#fff !important;border:.5px solid var(--line);border-radius:14px;padding:0 12px;color:#4a6a86}
#sup-trab .search input{flex:0 1 auto;min-width:0;width:70px;border:0;background:transparent !important;font-weight:700;color:#2f5675 !important;text-align:left}
#sup-trab .section-title h2{font-size:15px;color:#5f7d96;font-weight:700}
#sup-trab .section-title.big h2{font-size:24px;color:#1b4a68;font-weight:800}
#sup-trab .section-title.big .link{font-size:14px}
#sup-trab .sup-sep{border:0;border-top:1px solid var(--line);margin:18px 0 22px}
#sup-trab .sup-job{display:block;padding:14px 16px;border-radius:18px;cursor:pointer}
#sup-trab .sup-job .sj-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
#sup-trab .sup-job .sj-cod{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--kc)}
#sup-trab .sup-job .sj-pill{font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;background:#fff9;color:var(--kc)}
#sup-trab .sup-job .sj-cli{font-size:21px;color:#1b4a68;white-space:normal;margin-bottom:10px}
#sup-trab .sup-job .sj-mid{display:flex;justify-content:space-between;font-size:14px;font-weight:700;color:#3b5a73}
#sup-trab .sup-job .sj-fecha{color:#9a6200}
#sup-trab .sup-job .sj-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:12px;color:#7a8ea0}
#sup-trab .sup-job .sj-prio i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#9aa9b6;margin-right:6px}
#sup-trab .sup-job .sj-prio.alta i{background:#c0504d}
#sup-trab .sup-job .sj-ver{font-size:14px;font-weight:800;color:#0569c4}
#sup-dash-body .attention-list button{text-align:left}
#sup-dash-body .section-title{display:flex;align-items:center;justify-content:space-between}
#sup-dash-body .section-title .link{background:none;border:0;color:#0569c4;font-weight:700;font-size:13px}
.sup-eq-page .sup-eq-sub{display:flex;justify-content:space-between;align-items:center;margin:2px 2px 14px;color:#5f7d96;font-size:14px}
.sup-eq-page .sup-eq-sub small{font-size:12px}
.sup-eq-page .sup-eq-q{display:flex;align-items:center;gap:10px;background:#fff !important;border:.5px solid var(--line);border-radius:16px;padding:0 14px;margin-bottom:16px;color:#4a6a86}
.sup-eq-page .sup-eq-q input{flex:1;border:0;background:transparent !important;font-size:16px;padding:14px 0;color:#10253b !important}
.sup-tec{background:#fff;border:.5px solid var(--line);border-radius:20px;padding:16px;margin-bottom:14px}
.sup-tec .st-top{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sup-tec .st-av{width:56px;height:56px;border-radius:16px;background:#e5f1fd;color:#0b6fc0;font-weight:800;font-size:18px;display:grid;place-items:center}
.sup-tec .st-top b{display:block;font-size:20px;color:#1b4a68}
.sup-tec .st-top small{color:#6b7f90;font-size:14px}
.sup-tec .st-cnt{display:flex;gap:10px;margin:14px 0}
.sup-tec .st-cnt span{flex:1;display:flex;align-items:center;gap:8px;font-size:14px;color:#5f7d96}
.sup-tec .st-cnt b{font-size:22px;color:#1b4a68}
.sup-tec .st-cnt i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center}
.sup-tec .st-cnt i.o{background:#fdeccc;color:#9a6200}
.sup-tec .st-cnt i.b{background:#dbeeff;color:#0569c4}
.sup-tec .st-apr{display:flex;align-items:center;gap:8px;background:#f1eafb;color:#6a44a8;border-radius:12px;padding:12px 14px;font-size:13px;margin-bottom:12px}
.sup-tec .st-btn{width:100%;background:#fff;border:1px solid #9cc2e0;border-radius:14px;padding:14px;color:#1a6fa8;font-weight:800;font-size:15px}
.sup-vac{width:100%;display:flex;align-items:center;gap:14px;text-align:left;background:#fff;border:.5px solid var(--line);border-radius:18px;padding:14px 16px;margin:6px 0 24px}
.sup-vac>span{width:48px;height:48px;border-radius:14px;background:#e5f1fd;color:#0b6fc0;display:grid;place-items:center}
.sup-vac>div{flex:1}
.sup-vac b{display:block;font-size:16px;color:#10253b}
.sup-vac small{color:#6b7f90;font-size:13px}
.sup-vac i{font-style:normal;font-size:22px;color:#8aa0b2}

/* Tareas del supervisor (APK): misma barra de herramientas que Trabajos */
#sup-tar .sup-tools{display:flex;gap:10px;align-items:stretch;margin:4px 0 14px}
#sup-tar .sup-tools .search{flex:1 1 0;min-width:0;margin:0;display:flex;align-items:center;justify-content:center;gap:8px;background:#fff !important;border:.5px solid var(--line);border-radius:14px;padding:0 12px;color:#4a6a86}
#sup-tar .sup-tools .search input{flex:0 1 auto;min-width:0;width:70px;border:0;background:transparent !important;font-weight:700;color:#2f5675 !important}
#sup-tar .sup-tools .primary{flex:1 1 0;min-width:0;margin:0;white-space:nowrap}

/* Gestionar trabajos del supervisor */
#sup-trab .sup-job{position:relative}
#sup-trab .sup-job.marcado{box-shadow:0 0 0 2px #078cff inset}
#sup-trab .sj-chk{position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:8px;border:2px solid #9cc2e0;background:#fff;color:#fff;font-weight:800;display:grid;place-items:center;font-size:14px;z-index:1}
#sup-trab .sj-chk.on{background:#078cff;border-color:#078cff}
#sup-trab .sup-job .sj-prio.baja i{background:#1b9e5a}
#sup-trab .sup-resrow{display:flex;justify-content:space-between;align-items:center}
#sup-trab .sup-resrow .link{background:none;border:0;color:#0569c4;font-weight:700;font-size:13px}
#sup-trab .sup-selbar{position:fixed;left:16px;right:16px;bottom:84px;z-index:840;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#0b2a4a;color:#fff;border-radius:16px;padding:10px 12px 10px 16px;box-shadow:0 8px 24px #0b2a4a55;font-weight:700}
#sup-trab .sup-selbar .primary{min-width:130px;margin:0}
#tv2-cotz .sup-gl{display:grid;gap:8px;margin:6px 0 16px}
#tv2-cotz .sup-gl>div{background:#fff;border:.5px solid var(--line);border-radius:14px;padding:10px 14px}
#tv2-cotz .sup-gl b{display:block;color:#10253b}
#tv2-cotz .sup-gl small{color:#6b7f90}
#tv2-cotz .sup-prio-pick{display:flex;gap:8px}
#tv2-cotz .sup-prio-pick button{flex:1;padding:12px;border-radius:12px;border:1px solid #9cc2e0;background:#fff;color:#2f5675;font-weight:800}
#tv2-cotz .sup-prio-pick button.on{background:#078cff;border-color:#078cff;color:#fff}
#tv2-cotz .outline.wide{width:100%;margin:6px 0}

/* Cola numerada de tareas de un técnico (supervisor) */
#tv2-cotz .sup-cola{display:grid;gap:10px;margin-top:8px}
#tv2-cotz .sup-cq{display:flex;align-items:center;gap:12px;background:#fff;border:.5px solid var(--line);border-left:4px solid #078cff;border-radius:16px;padding:12px}
#tv2-cotz .sup-cq .cq-n{flex:0 0 36px;height:36px;border-radius:12px;background:#e5f1fd;color:#0b6fc0;font-weight:900;font-size:18px;display:grid;place-items:center}
#tv2-cotz .sup-cq .cq-b{flex:1;min-width:0}
#tv2-cotz .sup-cq .cq-b b{display:block;color:#10253b;font-size:15px}
#tv2-cotz .sup-cq .cq-b small{color:#6b7f90}
#tv2-cotz .sup-cq .cq-mv{display:flex;flex-direction:column;gap:6px}
#tv2-cotz .sup-cq .cq-mv button{width:40px;height:34px;border-radius:10px;border:1px solid #9cc2e0;background:#fff;color:#0b6fc0;font-size:14px;font-weight:800}
#tv2-cotz .sup-cq .cq-mv button:disabled{opacity:.35}
#tv2-cotz .sup-cq.is-pendiente{background:#fff9ed}
#tv2-cotz .sup-cq.is-curso{background:#eff7ff}
#tv2-cotz .sup-cq[data-kind="original"]{border-left-color:#7456bd}
#tv2-cotz .sup-cq[data-kind="espejo"]{border-left-color:#178d91}
#tv2-cotz .sup-cq .cq-kind{display:inline-flex;align-items:center;border:1px solid #c8d4dd;border-radius:999px;padding:3px 8px;font-size:10px;font-weight:800;background:#fff}
#tv2-cotz .sup-cq[data-kind="original"] .cq-kind{color:#624890;border-color:#d8cbea;background:#f5effb}
#tv2-cotz .sup-cq[data-kind="espejo"] .cq-kind{color:#126c70;border-color:#b8dfe0;background:#eaf7f6}
#tv2-cotz .sup-cq .cq-next{color:#157a45;background:#eef8f2}

/* APK: esqueleto en lugar del diseño anterior mientras carga la vista nueva de cada pestaña */
@keyframes tvxPulso{0%,100%{opacity:.55}50%{opacity:1}}
body.tv2-shell .sec.tvx-wait:not(.tvx-on){min-height:70vh}
body.tv2-shell .sec.tvx-wait:not(.tvx-on)>*{display:none !important}
body.tv2-shell .sec.tvx-wait:not(.tvx-on)::before{content:"";display:block;margin:18px 16px;width:calc(100% - 32px);box-sizing:border-box;height:420px;border-radius:20px;animation:tvxPulso 1.2s ease-in-out infinite;background:
  linear-gradient(#dce9f4,#dce9f4) 0 0/55% 30px no-repeat,
  linear-gradient(#e6f0f8,#e6f0f8) 0 62px/100% 92px no-repeat,
  linear-gradient(#e6f0f8,#e6f0f8) 0 170px/100% 92px no-repeat,
  linear-gradient(#e6f0f8,#e6f0f8) 0 278px/100% 92px no-repeat}

/* APK: los textos "Cargando…" del diseño anterior se ven como esqueleto, no como pantalla vieja */
body.tv2-shell .ld,body.tv2-shell .tar-loading,body.tv2-shell .sub-loading{font-size:0 !important;color:transparent !important;min-height:0 !important;padding:0 !important;display:block !important;background:none !important;border:0 !important}
body.tv2-shell .ld>*,body.tv2-shell .tar-loading>*,body.tv2-shell .sub-loading>*{display:none !important}
body.tv2-shell .ld::before,body.tv2-shell .tar-loading::before,body.tv2-shell .sub-loading::before{content:"";display:block;margin:12px 0;height:150px;border-radius:20px;animation:tvxPulso 1.2s ease-in-out infinite;background:
  linear-gradient(#dce9f4,#dce9f4) 0 0/50% 26px no-repeat,
  linear-gradient(#e6f0f8,#e6f0f8) 0 44px/100% 84px no-repeat}

/* Más: las tarjetas y los títulos de grupo respetan el margen lateral de 16px como el resto de las pantallas de la APK */
body.tv2-shell #tv2-more .tvx-host { padding: 12px 16px 8px; }

/* Equipo y cola de tareas del supervisor: letra más chica y avatares del mismo tamaño aunque el nombre ocupe dos líneas */
.sup-tec .st-av{flex:0 0 52px;width:52px;height:52px;font-size:16px}
.sup-tec .st-top{gap:12px}
.sup-tec .st-top>div{min-width:0}
.sup-tec .st-top b{font-size:16px;line-height:1.25}
.sup-tec .st-top small{font-size:12px}
.sup-tec .st-cnt span{font-size:12px}
.sup-tec .st-cnt b{font-size:18px}
.sup-tec .st-cnt i{flex:0 0 30px;width:30px;height:30px}
.sup-tec .st-apr{font-size:12px}
.sup-tec .st-btn{font-size:13px;padding:12px}
.sup-vac b{font-size:14px}
.sup-vac small{font-size:12px}
#tv2-cotz .sup-cq .cq-n{font-size:15px}
#tv2-cotz .sup-cq .cq-b b{font-size:14px}
#tv2-cotz .sup-cq .cq-b small{font-size:12px}

/* Palabra UPLINK NETWORK con la tipografía real del logo (la K lleva sus dos triángulos): cabecera de la APK, login y pantalla de actualización */
body.tv2-shell .mobile-logo #wl-brand-name-mobile.tvc-wm{font-size:0 !important;line-height:0;display:block;width:92px;height:28px;margin-top:2px;background:url('wordmark-oscuro.png') left center/contain no-repeat;color:transparent !important}
#update-screen .upd-brand .upd-wm{display:block;width:132px;height:auto}
body.tv2-shell .mobile-logo .tvc-wm + #tvc-lema{margin-top:1px}

/* Lema alineado con el nombre: la palabra UPLINK NETWORK y "Más que redes, soluciones." comparten ancho y eje central (como en la tarjeta) */
body.tv2-shell .mobile-logo #wl-brand-name-mobile.tvc-wm{width:128px;height:38px;margin-top:0}
body.tv2-shell .mobile-logo .tvc-wm + #tvc-lema{width:128px;text-align:center;font-size:8.1px;letter-spacing:0;margin-top:0;white-space:nowrap}
#update-screen .upd-brand .upd-wm{width:170px}
#update-screen .upd-brand small{width:170px;text-align:center;font-size:10.7px;letter-spacing:0;white-space:nowrap;margin-top:5px}

/* ── Estrellitas de la bienvenida en el login y en la cabecera de la APK (2026-10-22) ──
   uplink/estrellas-red.png: capa transparente con los nodos luminosos y líneas de la red del diseño de la bienvenida
   (sacada de scripts/gen-splash-tarjeta.py; sin la franja angular). Va sobre el fondo original, sin cambiarlo. */
#login-screen.lg2 .lg2-phone{background:url(estrellas-red.png) right top/cover no-repeat,radial-gradient(ellipse 110% 63% at 105% -10%,#105775 0%,#0a3654 39%,#072744 76%)}
body.tv2-shell .mobile-header{background:#052749 url('banner-cabecera.png') center bottom/cover no-repeat !important;border-bottom:0 !important}
/* Cabecera de Administrador (y bodega/contador) en la APK: solo el fondo de la propuesta de Administrador
   (marino + red luminosa + onda, las mismas imágenes de arriba); el contenido y la estructura de siempre */
html.is-native body:not(.tv2-shell) .mobile-header{background:#052749 url('banner-cabecera.png') center bottom/cover no-repeat !important;color:#fff !important;border-bottom:0 !important;box-shadow:0 7px 24px rgba(5,35,61,.18) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
html.is-native body:not(.tv2-shell) .mobile-header #wl-brand-name-mobile{color:#fff !important}
html.is-native body:not(.tv2-shell) .mobile-header .mobile-toggle{color:#fff !important;background:rgba(255,255,255,.12) !important;border:1px solid rgba(255,255,255,.3) !important;box-shadow:none !important}
#update-screen .upd-hero{background:url(estrellas-red.png) right -30px top -70px/430px auto no-repeat,linear-gradient(135deg,#06253e,#0c3c5d)}

/* Cabecera de la APK alineada (2026-10-22): hexágono tan alto como el bloque palabra + lema (46 px), y el lema con el mismo ancho que la palabra
   UPLINK NETWORK visible (122 px de los 128 del recuadro: la imagen deja 10/500 de margen a cada lado). El tamaño exacto de letra lo ajusta _tvcAjustarLema() según la fuente del teléfono. */
body.tv2-shell .mobile-logo img{width:36px !important;height:36px !important}
body.tv2-shell .mobile-logo .tvc-wm + #tvc-lema{width:82px;margin-left:4px;text-align:center;overflow:visible}

/* Cabecera alineada (opción 1 aprobada): el cuadro de iniciales mide lo mismo que el hexágono (46 px); el "Online" queda centrado entre ambos (34 px) */
body.tv2-shell #tvc-av{width:46px !important;height:46px !important;border-radius:14px !important;font-size:17px !important}
body.tv2-shell #tvc-sync{height:34px;padding:0 11px !important;box-sizing:border-box}
#update-screen .upd-brand img.upd-lk{display:block;width:230px;max-width:80%;height:auto}
body.tv2-shell #tvc-av{width:36px !important;height:36px !important;border-radius:11px !important;font-size:15px !important}
body.tv2-shell #tvc-sync{height:40px;padding:0 11px !important;box-sizing:border-box}

/* Letras de la cabecera más chicas (2026-10-22): palabra de 104 px (visible ~100) y hexágono de 40 px */
body.tv2-shell .mobile-logo #wl-brand-name-mobile.tvc-wm{width:94px;height:28px}
/* "Online" más compacto para que no quede pegado al eslogan (2026-10-22) */
body.tv2-shell #tvc-sync{height:24px;padding:0 10px !important;gap:4px !important;font-size:11px !important;margin-left:0;flex-shrink:0;align-self:center}
body.tv2-shell #tvc-sync i{width:7px;height:7px}

/* Permisos y vacaciones: tipo de solicitud y bandeja del supervisor/admin (2026-10-22) */
.tvx .req-tipo{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#e7f0f8;border:.5px solid var(--line);border-radius:14px;padding:4px;margin-bottom:12px}
.tvx .req-tipo button{border:0;background:transparent;border-radius:11px;padding:11px 8px;font-size:13px;font-weight:700;color:#4a6a86}
.tvx .req-tipo button.on{background:linear-gradient(145deg,#2b8ae0 0%,#0a62b8 100%);color:#fff;box-shadow:0 4px 10px rgba(10,98,184,.25)}
.tvx .req-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.tvx .req-actions button{border:.5px solid var(--line);background:#fff;border-radius:12px;padding:11px 8px;font-size:13px;font-weight:700;color:#35526b}
.tvx .req-actions button.primary{background:linear-gradient(145deg,#2b8ae0 0%,#0a62b8 100%);border-color:transparent;color:#fff}
.tvx .req-actions button.danger{background:#c43d3d;border-color:transparent;color:#fff}
.tvx .req-lock{margin:10px 0 0;font-size:12px;color:#6b7f92;font-style:italic}
.tvx .req-motivo{display:block;margin-top:10px;font-size:12px;color:#4a6a86}
.tvx .req-motivo textarea{display:block;width:100%;min-height:64px;margin-top:6px;border:.5px solid var(--line);border-radius:10px;padding:10px;font:inherit;box-sizing:border-box}

/* Administrador en la APK (propuesta UPLINK_ADMIN_PARA_CLAUDE): el Inicio reutiliza las tarjetas de trabajo de Trabajos */
#sup-dash-body .sup-list{display:grid;gap:10px;margin-bottom:14px}
#sup-dash-body .sup-job{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:#fff;border:.5px solid var(--kl);border-left:4px solid var(--kc);cursor:pointer}
#sup-dash-body .sup-job[data-e="pen"]{--kc:#f59e0b;--kl:#f3dcae;background:linear-gradient(135deg,#fff 0%,#fff3da 100%)}
#sup-dash-body .sup-job[data-e="cur"]{--kc:#078cff;--kl:#b7d6f3;background:linear-gradient(135deg,#fff 0%,#dbeeff 100%)}
#sup-dash-body .sup-job[data-e="apr"]{--kc:#7c5cff;--kl:#d3c9f3;background:linear-gradient(135deg,#fff 0%,#ece7ff 100%)}
#sup-dash-body .sup-job[data-e="fin"]{--kc:#1b9e5a;--kl:#bde2cd;background:linear-gradient(135deg,#fff 0%,#dff5e8 100%)}
#sup-dash-body .sup-job>div{flex:1;min-width:0}
#sup-dash-body .sup-job b{display:block;font-size:14px;color:#10253b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sup-dash-body .sup-job small{display:block;font-size:12px;color:#6b7f90;margin-top:1px}
#sup-dash-body .sup-job i{font-style:normal;color:#8aa0b2;font-size:20px}
#sup-dash-body .sup-job{display:block;padding:14px 16px;border-radius:18px;cursor:pointer}
#sup-dash-body .sup-job .sj-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
#sup-dash-body .sup-job .sj-cod{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--kc)}
#sup-dash-body .sup-job .sj-pill{font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;background:#fff9;color:var(--kc)}
#sup-dash-body .sup-job .sj-cli{font-size:21px;color:#1b4a68;white-space:normal;margin-bottom:10px}
#sup-dash-body .sup-job .sj-mid{display:flex;justify-content:space-between;font-size:14px;font-weight:700;color:#3b5a73}
#sup-dash-body .sup-job .sj-fecha{color:#9a6200}
#sup-dash-body .sup-job .sj-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:12px;color:#7a8ea0}
#sup-dash-body .sup-job .sj-prio i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#9aa9b6;margin-right:6px}
#sup-dash-body .sup-job .sj-prio.alta i{background:#c0504d}
#sup-dash-body .sup-job .sj-ver{font-size:14px;font-weight:800;color:#0569c4}
#sup-dash-body .sup-job{position:relative}
#sup-dash-body .sup-job.marcado{box-shadow:0 0 0 2px #078cff inset}
#sup-dash-body .sj-chk{position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:8px;border:2px solid #9cc2e0;background:#fff;color:#fff;font-weight:800;display:grid;place-items:center;font-size:14px;z-index:1}
#sup-dash-body .sj-chk.on{background:#078cff;border-color:#078cff}
#sup-dash-body .sup-job .sj-prio.baja i{background:#1b9e5a}
#sup-dash-body .adm-inicio .section-title{margin-top:18px}
#sup-dash-body .adm-inicio .action-menu{margin-bottom:14px}
#sup-dash-body .empty-note{margin:6px 2px 14px;color:#6b7f90;font-size:13px}
#sup-trab .adm-trab-mas{margin:6px 0 16px}
.adm-back.tvx-host{padding:10px 16px 0}
.adm-back .back-row{margin-bottom:6px}
#s-admper.sec, #s-admmsg.sec{padding-bottom:96px}
body.adm-ind #kpi-bar{display:block !important}

/* ── Glosario interno (materiales y equipos / herramientas y repuestos) ─────────────────────────────
   Estilos acotados a #s-gls y a los cuadros .gl-overlay; no tocan otras pantallas. Tarjetas: borde lateral de 4px
   (azul = materiales, ámbar = herramientas) y línea fina de 0,5px con el tono de la propia tarjeta. */
#s-gls .gl, .gl-overlay { --g-bg:#fff; --g-tx:#0f2a44; --g-mut:#5d7388; --g-line:#d7e3ee; --g-soft:#f3f8fc; --g-acc:#087cf0; --g-herr:var(--amber,#f59e0b); --g-bad:#c0392b; }
body.dark:not(.tv2-shell) #s-gls .gl, body.dark:not(.tv2-shell) .gl-overlay { --g-bg:#0f172a; --g-tx:#e2e8f0; --g-mut:#94a3b8; --g-line:rgba(255,255,255,.12); --g-soft:rgba(255,255,255,.04); }
#s-gls .gl { color:var(--g-tx); }
#s-gls .gl-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#s-gls .gl-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
#s-gls .gl-head h2 { margin:0; font-size:20px; font-weight:800; color:var(--g-tx); }
#s-gls .gl-head p { margin:4px 0 0; font-size:13px; color:var(--g-mut); }
#s-gls .gl-actions { display:flex; gap:8px; flex-wrap:wrap; }
#s-gls .gl-actions button, #s-gls .gl-tools button { width:auto; }
#s-gls .gl-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
#s-gls .gl-tab { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:12px; border:.5px solid var(--g-line); background:var(--g-bg); color:var(--g-mut); font-weight:700; font-size:13px; cursor:pointer; }
#s-gls .gl-tab b { font-size:11px; padding:2px 7px; border-radius:999px; background:var(--g-soft); color:var(--g-tx); }
#s-gls .gl-tab.on { background:var(--g-acc); border-color:var(--g-acc); color:#fff; }
#s-gls .gl-tab.on b { background:rgba(255,255,255,.22); color:#fff; }
#s-gls .gl-banner { margin:0 0 12px; padding:10px 14px; font-size:12.5px; border-radius:14px; background:var(--g-soft); border:.5px solid var(--g-line); border-left:4px solid var(--g-acc); color:var(--g-tx); }
#s-gls .gl-banner[data-sec="herramientas"] { border-left-color:var(--g-herr); }
#s-gls .gl-alert { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 12px; padding:12px 14px; border-radius:14px; background:var(--g-soft); border:.5px solid var(--g-line); border-left:4px solid var(--g-bad); font-size:13px; color:var(--g-tx); }
#s-gls .gl-alert button { width:auto; flex:0 0 auto; }
#s-gls .gl-tools { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
#s-gls .gl-search { flex:1 1 260px; min-width:0; }
#s-gls .gl-search input, #s-gls .gl-sel select { width:100%; box-sizing:border-box; padding:10px 12px; border-radius:12px; border:.5px solid var(--g-line); background:var(--g-bg); color:var(--g-tx); font-size:13px; }
#s-gls .gl-sel { flex:0 1 190px; min-width:140px; }
#s-gls .gl-result { margin:6px 2px 10px; font-size:12px; color:var(--g-mut); }
#s-gls .gl-table { width:100%; border-collapse:collapse; background:var(--g-bg); border:.5px solid var(--g-line); border-radius:14px; overflow:hidden; }
#s-gls .gl-table th { text-align:left; padding:10px 12px; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--g-mut); background:var(--g-soft); border-bottom:.5px solid var(--g-line); }
#s-gls .gl-table td { padding:10px 12px; border-bottom:.5px solid var(--g-line); font-size:13px; vertical-align:top; color:var(--g-tx); }
#s-gls .gl-table tbody tr[data-gl] { cursor:pointer; }
#s-gls .gl-table tbody tr[data-gl]:hover { background:var(--g-soft); }
#s-gls .gl-table .r, #s-gls .gl-table th.r { text-align:right; }
#s-gls .gl-table tr.gl-cat td { background:var(--g-soft); font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--g-acc); }
#s-gls .gl-name { font-weight:700; }
#s-gls .gl-meta { font-size:11.5px; color:var(--g-mut); margin-top:2px; }
#s-gls .gl-code { font-family:ui-monospace,Menlo,monospace; font-size:12px; font-weight:700; color:var(--g-acc); }
#s-gls .gl-price { font-weight:800; white-space:nowrap; }
#s-gls .gl-price small { display:block; font-size:10px; font-weight:600; color:var(--g-mut); }
#s-gls .gl-oculto { opacity:.4; letter-spacing:2px; }
#s-gls .gl-go { width:34px; height:34px; border-radius:10px; border:.5px solid var(--g-line); background:var(--g-bg); color:var(--g-acc); font-size:15px; cursor:pointer; }
#s-gls .gl-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; }
#s-gls .gl-card { padding:12px 14px; border-radius:16px; background:var(--g-bg); border:.5px solid var(--g-line); border-left:4px solid var(--g-acc); cursor:pointer; display:flex; flex-direction:column; gap:4px; }
#s-gls .gl-card[data-sec="herramientas"] { border-left-color:var(--g-herr); }
#s-gls .gl-card h3 { margin:0; font-size:14px; line-height:1.3; color:var(--g-tx); overflow-wrap:anywhere; }
#s-gls .gl-card p { margin:0; }
#s-gls .gl-card-top, #s-gls .gl-card-bot { display:flex; justify-content:space-between; align-items:center; gap:8px; }
#s-gls .gl-brand { font-size:11px; font-weight:700; color:var(--g-mut); }
#s-gls .gl-card-bot { margin-top:6px; }
#s-gls .gl-empty { padding:28px 16px; text-align:center; font-size:13px; color:var(--g-mut); background:var(--g-bg); border:.5px solid var(--g-line); border-radius:14px; }
#s-gls .gl-empty strong { display:block; margin-bottom:4px; color:var(--g-tx); font-size:14px; }
#s-gls .gl-link, .gl-overlay .gl-link { background:none; border:none; padding:0; color:var(--g-acc); font-weight:700; cursor:pointer; text-decoration:underline; font-size:13px; }
@media (max-width:719px) { #s-gls .gl-sel { flex:1 1 45%; } #s-gls .gl-actions button { flex:1 1 auto; } }

.gl-overlay { position:fixed; inset:0; z-index:4000; background:rgba(8,43,73,.5); display:flex; align-items:center; justify-content:center; padding:16px; }
.gl-dlg { width:min(520px,100%); max-height:88vh; overflow:auto; border-radius:20px; background:var(--g-bg); color:var(--g-tx); border:.5px solid var(--g-line); border-left:4px solid var(--g-acc); box-shadow:0 18px 50px rgba(0,0,0,.35); }
.gl-dlg-h { display:flex; justify-content:space-between; align-items:center; padding:14px 16px 6px; }
.gl-dlg-h h3 { margin:0; font-size:16px; }
.gl-x { width:34px; height:34px; border-radius:10px; border:.5px solid var(--g-line); background:var(--g-bg); color:var(--g-tx); font-size:18px; cursor:pointer; }
.gl-dlg-b { padding:6px 16px 16px; font-size:13px; }
.gl-dlg-b .gl-nota { margin:0 0 10px; color:var(--g-mut); font-size:12.5px; }
.gl-d-name { margin:0 0 6px; font-size:15px; line-height:1.35; overflow-wrap:anywhere; }
.gl-d-price { font-size:26px; font-weight:800; color:var(--g-acc); }
.gl-d-sub { font-size:11.5px; color:var(--g-mut); margin-bottom:10px; }
.gl-d-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.gl-d-grid div { padding:8px 10px; border-radius:12px; background:var(--g-soft); border:.5px solid var(--g-line); }
.gl-d-grid span { display:block; font-size:10.5px; color:var(--g-mut); text-transform:uppercase; letter-spacing:.04em; }
.gl-d-grid b { font-size:13px; overflow-wrap:anywhere; }
.gl-info { padding:10px 12px; border-radius:12px; background:var(--g-soft); border:.5px solid var(--g-line); font-size:12px; color:var(--g-mut); margin-bottom:10px; }
.gl-origen { display:inline-block; font-weight:700; color:var(--g-acc); margin-bottom:6px; }
.gl-d-acc { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; flex-wrap:wrap; }
.gl-d-acc button { width:auto; }
.gl-peligro { color:var(--g-bad); }
.gl-fs { border:.5px solid var(--g-line); border-radius:14px; margin:0 0 10px; padding:8px 12px; }
.gl-fs legend { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--g-mut); padding:0 6px; }
.gl-fs label, .gl-chk { display:flex; gap:8px; align-items:center; padding:5px 0; font-size:13px; }
.gl-file { display:block; margin:8px 0; font-size:12px; color:var(--g-mut); }
.gl-file input[type=text], .gl-file input[type=file] { display:block; width:100%; box-sizing:border-box; margin-top:4px; padding:9px 10px; border-radius:12px; border:.5px solid var(--g-line); background:var(--g-bg); color:var(--g-tx); }
.gl-validacion { margin:10px 0; border:.5px solid var(--g-line); border-radius:14px; overflow:hidden; }
.gl-vrow { display:flex; justify-content:space-between; gap:10px; padding:8px 12px; border-bottom:.5px solid var(--g-line); font-size:12.5px; }
.gl-vrow:last-child { border-bottom:none; }
.gl-vrow b { text-align:right; }
.gl-overlay .gl-alert { padding:10px 12px; border-radius:12px; background:var(--g-soft); border:.5px solid var(--g-line); border-left:4px solid var(--g-bad); font-size:12.5px; margin-top:8px; }
.gl-overlay .gl-alert ul { margin:6px 0 0 16px; padding:0; }
@media (max-width:480px) { .gl-d-grid { grid-template-columns:1fr; } }
.gl-overlay input[type=checkbox], .gl-overlay input[type=radio] { width:auto; flex:0 0 auto; margin:0; padding:0; }
.gl-overlay .gl-chk, .gl-overlay .gl-fs label { cursor:pointer; }

/* ── Glosario: diseño del prototipo (encabezado, estado, pestañas segmentadas y tarjetas) ─────────── */
#s-gls .gl-top { display:flex; align-items:center; gap:14px; margin:4px 0 10px; }
#s-gls .gl-back { flex:0 0 auto; width:48px; height:48px; border-radius:16px; border:.5px solid var(--g-line); background:var(--g-bg); color:var(--g-tx); font-size:22px; cursor:pointer; display:none; }
body.tv2-shell #s-gls .gl-back { display:block; }
#s-gls .gl-eyebrow { display:block; font-size:12px; font-weight:800; letter-spacing:.12em; color:#2b7ea1; }
#s-gls .gl-top h1 { margin:2px 0 0; font-size:28px; line-height:1.1; font-weight:800; color:var(--g-tx); }
#s-gls .gl-intro { margin:0 0 14px; font-size:14px; color:var(--g-mut); }
#s-gls .gl-state { display:flex; align-items:center; gap:12px; padding:14px 16px; margin-bottom:14px; border-radius:20px; background:#e9f4ee; border:.5px solid #cfe5d8; border-left:4px solid #3f8a63; color:#2f6b4c; }
#s-gls .gl-state > span { width:28px; height:28px; flex:0 0 28px; }
#s-gls .gl-state > span svg { width:100%; height:100%; }
#s-gls .gl-state > div { flex:1; min-width:0; }
#s-gls .gl-state b { display:block; font-size:15px; }
#s-gls .gl-state small { display:block; font-size:12.5px; opacity:.85; }
#s-gls .gl-state button, #s-gls .gl-toolbar button, #s-gls .gl-bottom button { width:auto; padding:12px 16px; border-radius:16px; font-weight:800; font-size:14px; cursor:pointer; }
#s-gls .gl-state .secondary, #s-gls .gl-bottom .secondary { background:var(--g-bg); color:#1f6f98; border:.5px solid var(--g-line); }
#s-gls .gl-state-bad { background:#fbeeec; border-color:#efd3cf; border-left-color:var(--g-bad); color:#8a2f25; }
#s-gls .gl-seg { display:flex; gap:4px; padding:6px; margin-bottom:12px; border-radius:20px; background:#e1ecf4; border:.5px solid var(--g-line); }
#s-gls .gl-seg button { flex:1; padding:12px 6px; border:0; border-radius:15px; background:transparent; color:#5d7a92; font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap; }
#s-gls .gl-seg button.selected { background:#fff; color:#1b5f87; box-shadow:0 2px 8px rgba(20,60,90,.12); }
#s-gls .gl-toolbar { display:flex; gap:10px; margin-bottom:10px; }
#s-gls .gl-find { flex:1; min-width:0; position:relative; display:block; }
#s-gls .gl-find-ico { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--g-mut); pointer-events:none; }
#s-gls .gl-find-ico svg { width:100%; height:100%; }
#s-gls .gl-find input { width:100%; box-sizing:border-box; padding:14px 14px 14px 44px; border-radius:18px; border:.5px solid var(--g-line); background:var(--g-bg); color:var(--g-tx); font-size:14px; }
#s-gls .gl-toolbar .primary { background:#0b7fc0; color:#fff; border:0; white-space:nowrap; }
#s-gls .gl-filters { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
#s-gls .gl-cat-row { display:flex; align-items:center; gap:12px; }
#s-gls .gl-cat-row span { flex:0 0 78px; font-size:13px; font-weight:800; color:var(--g-mut); }
#s-gls .gl-cat-row select { flex:1; min-width:0; padding:12px 14px; border-radius:18px; border:.5px solid var(--g-line); background:var(--g-bg); color:var(--g-tx); font-size:14px; }
#s-gls .gl-count { margin:8px 2px 10px; font-size:13px; color:var(--g-mut); }
#s-gls .gl-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
#s-gls .gl-card { padding:16px 18px 6px; border-radius:22px; background:var(--g-bg); border:.5px solid var(--g-line); border-left:4px solid #5b9fc7; cursor:default; display:block; }
#s-gls .gl-card[data-sec="herramientas"] { border-left-color:var(--g-herr); }
#s-gls .gl-ident { display:flex; gap:14px; align-items:center; }
#s-gls .gl-ico { flex:0 0 46px; width:46px; height:46px; border-radius:15px; background:#e6f1f8; color:#2d7ba3; display:flex; align-items:center; justify-content:center; }
#s-gls .gl-card[data-sec="herramientas"] .gl-ico { background:#f6ecd9; color:#a8721f; }
#s-gls .gl-ico svg { width:24px; height:24px; }
#s-gls .gl-ident small { display:block; font-size:12.5px; color:var(--g-mut); }
#s-gls .gl-ident h2 { margin:2px 0 0; font-size:17px; line-height:1.25; font-weight:800; color:#23506f; overflow-wrap:anywhere; }
#s-gls .gl-pricebox { display:flex; align-items:baseline; gap:12px; margin:14px 0 6px; }
#s-gls .gl-pricebox strong { font-size:30px; font-weight:800; color:#23506f; }
#s-gls .gl-pricebox span { font-size:13px; color:var(--g-mut); }
#s-gls .gl-note { margin:0 0 12px; font-size:13px; color:var(--g-mut); overflow-wrap:anywhere; }
#s-gls .gl-acts { display:flex; gap:18px; padding:4px 0; border-top:.5px solid var(--g-line); }
#s-gls .gl-tx { background:none; border:0; padding:14px 2px; color:#1f6f98; font-weight:800; font-size:15px; cursor:pointer; width:auto; }
#s-gls .gl-tx-r { margin-left:auto; }
#s-gls .gl-bottom { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
#s-gls .gl-bottom button { flex:1 1 auto; }
body.dark:not(.tv2-shell) #s-gls .gl-state { background:rgba(63,138,99,.14); border-color:rgba(63,138,99,.35); color:#8fd1ae; }
body.dark:not(.tv2-shell) #s-gls .gl-seg { background:rgba(255,255,255,.06); }
body.dark:not(.tv2-shell) #s-gls .gl-seg button.selected { background:rgba(255,255,255,.14); color:#e2e8f0; }
body.dark:not(.tv2-shell) #s-gls .gl-ident h2, body.dark:not(.tv2-shell) #s-gls .gl-pricebox strong { color:#e2e8f0; }
body.dark:not(.tv2-shell) #s-gls .gl-tx, body.dark:not(.tv2-shell) #s-gls .gl-state .secondary, body.dark:not(.tv2-shell) #s-gls .gl-bottom .secondary { color:#7cc4ee; }
#s-gls .gl-envase { margin:0 0 6px; font-size:13px; font-weight:700; color:#2b7ea1; }

/* Glosario: materiales que lleva un servicio (editor) */
#mdl-edit-price .modal-card { max-height:calc(100dvh - 32px); overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; }
@media (max-width:550px) { #mdl-edit-price .modal-card { padding:22px 18px; width:calc(100% - 24px); } }
#mdl-edit-price .modal-card { max-height:calc(100dvh - 32px); overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; }
@media (max-width:550px) { #mdl-edit-price .modal-card { padding:22px 18px; width:calc(100% - 24px); } }
#mdl-edit-price .ep-sm-res { display:flex; flex-direction:column; gap:4px; margin-bottom:6px; }
#mdl-edit-price .ep-sm-res button { text-align:left; padding:9px 12px; border-radius:12px; border:.5px solid var(--line, #d7e3ee); background:#fff; color:#1f6f98; font-size:13px; font-weight:700; cursor:pointer; }
#mdl-edit-price .ep-sm-res button small { display:block; font-size:10px; font-weight:400; color:#7b92a5; margin-top:2px; }
#mdl-edit-price .ep-sm-item { border:.5px solid var(--line, #d7e3ee); border-left:4px solid #2b7ea1; border-radius:14px; background:#fff; padding:12px; margin-top:10px; }
#mdl-edit-price .ep-sm-head { display:flex; gap:10px; align-items:flex-start; }
#mdl-edit-price .ep-sm-head > div { flex:1; min-width:0; }
#mdl-edit-price .ep-sm-head strong { display:block; font-size:13px; line-height:1.45; font-weight:700; overflow-wrap:anywhere; }
#mdl-edit-price .ep-sm-head small { display:block; font-size:10px; color:#7b92a5; margin-top:3px; }
#mdl-edit-price .ep-sm-x { flex:0 0 32px; width:32px; height:32px; border-radius:10px; border:.5px solid var(--line, #d7e3ee); background:transparent; color:#c0392b; font-size:18px; cursor:pointer; }
#mdl-edit-price .ep-sm-ctl { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
#mdl-edit-price .ep-sm-ctl label { margin:0; font-size:11px; font-weight:600; min-width:0; }
#mdl-edit-price .ep-sm-ctl input, #mdl-edit-price .ep-sm-ctl select { display:block; width:100%; min-width:0; min-height:42px; margin-top:4px; font-size:14px; }
#mdl-edit-price .ep-sm-ctl input { font-weight:700; }
#mdl-edit-price .ep-sm-ctl .psel-trigger { min-height:42px; margin-top:4px; padding-left:10px; padding-right:8px; font-size:13px; }
#mdl-edit-price .ep-sm-eq { margin-top:10px; border-top:.5px solid var(--line, #d7e3ee); padding-top:8px; }
#mdl-edit-price .ep-sm-eq summary { font-size:11px; color:#2b7ea1; cursor:pointer; line-height:1.5; }
#mdl-edit-price .ep-sm-eq label { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:11px; margin-top:8px; }
#mdl-edit-price .ep-sm-eq input { display:inline-block; width:100px; min-height:38px; margin:0; font-size:13px; }
#mdl-edit-price .ep-sm-eq p { margin:6px 0 0; font-size:10px; line-height:1.6; opacity:.7; }
#mdl-edit-price .ep-sm-msg { margin:8px 0 0; font-size:12px; line-height:1.5; color:#b45309; }
#mdl-edit-price .ep-sm-msg:empty { display:none; }
#mdl-edit-price .ep-sm-total { margin:10px 0 0; padding:10px 12px; border:.5px solid var(--line, #d7e3ee); border-left:4px solid #2b7ea1; border-radius:12px; background:#f4f9fd; font-size:13px; }
#mdl-edit-price .ep-sm-total:empty { display:none; }
#mdl-edit-price .ep-sm-total b { font-size:16px; color:#14527a; }
#mdl-edit-price .ep-sm-total small { display:block; margin-top:3px; font-size:10px; opacity:.7; }
#mdl-edit-price .ep-sm-vacio { margin:6px 0; font-size:12px; opacity:.7; }

/* Cotizador: materiales que vienen de la receta de un servicio (bloqueados; se editan en Glosario → Servicios) */
.mat-row[data-srv] .stepper-btns, .mat-row[data-srv] .rm, .mat-row[data-srv] .mat-series-input { display:none !important; }
.mat-row[data-srv] input[readonly], .mat-row[data-srv] input:disabled { cursor:not-allowed; }
.mat-lock-tag { grid-column:1 / -1; font-size:11px; font-weight:700; color:#2b7ea1; margin-top:2px; }

/* ── Calculadora rápida ─────────────────────────────────────────────────────── */
.calc-ov { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:12px; background:rgba(5,34,59,.55); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.calc-card { display:flex; flex-direction:column; width:100%; max-width:560px; max-height:calc(100dvh - 24px); background:#fff; color:#163149; border:.5px solid var(--line, #d7e3ee); border-radius:22px; box-shadow:0 24px 60px rgba(9,39,62,.28); overflow:hidden; }
.calc-card * { box-sizing:border-box; }
.calc-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px 10px; }
.calc-head h3 { margin:0; font-size:18px; color:#163149; }
.calc-x { display:flex; align-items:center; justify-content:center; padding:0; width:36px; height:36px; border-radius:50%; border:0; background:#eaf1f7; color:#5d7890; font-size:22px; line-height:1; cursor:pointer; }
.calc-body { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:4px 18px 14px; display:flex; flex-direction:column; gap:12px; }
.calc-add { display:flex; flex-direction:column; gap:8px; padding:12px; border:.5px solid var(--line, #d7e3ee); border-left:4px solid #2b7ea1; border-radius:14px; background:linear-gradient(145deg,#fff,#f4f9fd); min-width:0; }
.calc-lbl { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#5d7890; }
.calc-card select { width:100%; min-width:0; min-height:44px; }
.calc-card .psel-wrap { width:100%; min-width:0; }
.calc-card .psel-trigger { width:100%; min-width:0; min-height:44px; padding:10px 12px; font-size:14px; }
.calc-card .psel-text { min-width:0; }
.calc-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:8px; }
.calc-f { display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; color:#5d7890; min-width:0; }
.calc-f[hidden] { display:none; }
.calc-card input[type=text] { width:100%; min-width:0; min-height:44px; padding:10px 12px; border:1px solid #d7e3ee; border-radius:12px; background:#fff; color:#163149; font-size:15px; font-weight:700; }
.calc-card input:focus-visible, .calc-card button:focus-visible { outline:3px solid #8acbfa; outline-offset:2px; }
.calc-btn { min-height:44px; border:0; border-radius:12px; background:linear-gradient(115deg,#0879f0,#10b9d7); color:#fff; font-size:14px; font-weight:700; cursor:pointer; }
.calc-list { display:flex; flex-direction:column; gap:8px; min-width:0; }
.calc-vacio { margin:6px 0; text-align:center; font-size:13px; color:#7b92a5; }
.calc-it { display:grid; grid-template-columns:minmax(0,1fr) auto 32px; align-items:center; gap:10px; padding:10px 12px; border:.5px solid var(--line, #d7e3ee); border-left:4px solid #2b7ea1; border-radius:12px; background:#fff; }
.calc-it-t { min-width:0; }
.calc-it-t strong { display:block; font-size:13px; line-height:1.35; overflow-wrap:anywhere; }
.calc-it-t small { display:block; margin-top:2px; font-size:11px; color:#7b92a5; line-height:1.4; }
.calc-it > b { font-size:14px; color:#14527a; white-space:nowrap; font-variant-numeric:tabular-nums; }
.calc-it > button { display:flex; align-items:center; justify-content:center; padding:0; line-height:1; width:32px; height:32px; border-radius:10px; border:.5px solid #f0c4c0; background:#fff3f2; color:#c0392b; font-size:18px; cursor:pointer; }
.calc-gan { padding:12px; border:.5px solid var(--line, #d7e3ee); border-left:4px solid #178d91; border-radius:14px; background:#f4fbfb; display:flex; flex-direction:column; gap:8px; }
.calc-gan-h { display:flex; flex-direction:column; gap:1px; }
.calc-gan-h b { font-size:14px; }
.calc-gan-h small { font-size:11px; color:#7b92a5; }
.calc-chips { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.calc-chips button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; line-height:1.15; min-width:0; padding:6px 4px; min-height:54px; border:1px solid #cfe0ea; border-radius:12px; background:#fff; color:#2b7ea1; font-size:14px; font-weight:800; cursor:pointer; }
.calc-chips button.on { background:#178d91; border-color:#178d91; color:#fff; }
.calc-pct { position:relative; display:block; }
.calc-pct input { padding-right:34px; }
.calc-pct i { position:absolute; right:12px; top:50%; transform:translateY(-50%); font-style:normal; font-weight:800; color:#7b92a5; }
.calc-tot { flex-shrink:0; padding:12px 18px 16px; border-top:.5px solid var(--line, #d7e3ee); background:#f7fafd; display:flex; flex-direction:column; gap:6px; }
.calc-tot > div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:13px; color:#5d7890; }
.calc-tot > div[hidden] { display:none; }
.calc-tot b { color:#163149; font-variant-numeric:tabular-nums; }
.calc-tot .calc-total { margin-top:4px; padding-top:8px; border-top:.5px solid var(--line, #d7e3ee); font-size:16px; font-weight:800; color:#163149; }
.calc-tot .calc-total b { font-size:22px; color:#0a6bd0; }
body.dark .calc-card { background:#0f1e3d; color:#e2e8f0; border-color:rgba(99,102,241,.25); }
body.dark .calc-head h3, body.dark .calc-tot b, body.dark .calc-tot .calc-total { color:#f1f5f9; }
body.dark .calc-add, body.dark .calc-it, body.dark .calc-gan { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); }
body.dark .calc-card input[type=text], body.dark .calc-chips button { background:rgba(30,41,59,.6); border-color:rgba(255,255,255,.12); color:#e2e8f0; }
body.dark .calc-chips button.on { background:#178d91; color:#fff; }
body.dark .calc-tot { background:rgba(255,255,255,.03); }
body.dark .calc-x { background:rgba(255,255,255,.08); color:#94a3b8; }
.calc-chips button small { font-size:12px; font-weight:700; opacity:.8; }

/* Glosario → Servicios: ganancia por tipo de cliente y totales */
.gl-gan { margin:0 0 12px; padding:12px; border:.5px solid var(--line, #d7e3ee); border-left:4px solid #178d91; border-radius:14px; background:linear-gradient(145deg,#fff,#f4fbfb); display:flex; flex-direction:column; gap:10px; }
.gl-gan-h { display:flex; flex-direction:column; gap:2px; }
.gl-gan-h b { font-size:14px; }
.gl-gan-h small { font-size:11px; color:#7b92a5; line-height:1.4; }
.gl-gan-f { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.gl-gan-f label { display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; color:#5d7890; min-width:0; }
.gl-pct { position:relative; display:block; }
.gl-pct input { width:100%; min-width:0; min-height:44px; padding:10px 30px 10px 12px; border:1px solid #d7e3ee; border-radius:12px; background:#fff; color:#163149; font-size:15px; font-weight:700; box-sizing:border-box; }
.gl-pct i { position:absolute; right:12px; top:50%; transform:translateY(-50%); font-style:normal; font-weight:800; color:#7b92a5; }
.gl-gan-ro { margin:0; font-size:13px; color:#355c77; }
.gl-tt { display:flex; flex-direction:column; align-items:flex-end; margin-bottom:4px; }
.gl-tt small { font-size:10px; color:#7b92a5; font-weight:600; }
.gl-tt b { font-size:14px; font-variant-numeric:tabular-nums; }
body.dark .gl-gan { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); }
body.dark .gl-pct input { background:rgba(30,41,59,.6); border-color:rgba(255,255,255,.12); color:#e2e8f0; }

/* ── Selector de ubicación del cotizador (diseño aprobado "Mapas", 2026-10-24) ─────────────── */
.pin-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;background:rgba(6,27,52,.64);align-items:center;justify-content:center;padding:18px 10px}
.pin-overlay[style*="flex"]{display:flex}
.pin-sheet{width:min(100%,410px);max-height:calc(100vh - 36px);max-height:calc(100dvh - 36px);margin:0;background:#f7fbfe;color:#17344b;border:1px solid #d0dfea;border-radius:22px;box-shadow:0 18px 70px rgba(3,21,43,.25);overflow:auto;display:flex;flex-direction:column;padding:17px 15px 12px;font-family:Arial,sans-serif;box-sizing:border-box}
.pin-sheet *{box-sizing:border-box}
.pin-heading{display:flex;align-items:center;gap:9px}
.pin-heading>span{width:35px;height:35px;flex:0 0 35px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:#e1f1fb;color:#217eab}
.pin-heading svg{width:21px;height:21px}
.pin-heading>div{flex:1;min-width:0}
.pin-eyebrow{display:block;font-size:8px;letter-spacing:.07em;font-weight:700;color:#3380a1}
.pin-heading h1{font-size:22px;line-height:1.2;letter-spacing:-.4px;margin:4px 0 0;color:#17344b}
.pin-close{width:40px;height:40px;flex:0 0 40px;border-radius:11px;border:1px solid #d4e2eb;background:#fff;font-size:26px;color:#668499;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pin-help{font-size:11px;margin:12px 0;color:#668297}
.pin-search{display:flex;gap:7px;align-items:stretch}
.pin-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.pin-search input{min-width:0;flex:1;font-size:12px;min-height:45px;padding:11px;border-radius:12px;background:#fff;border:1px solid #cbdfea;color:#17344b}
.pin-search input:focus{outline:2px solid #13a7e7;outline-offset:1px}
.pin-primary,.pin-secondary{border-radius:12px;min-height:45px;padding:10px 12px;font-weight:700;font-size:12px;cursor:pointer;font-family:inherit}
.pin-primary{border:0;background:linear-gradient(115deg,#087bcd,#079fe6);color:#fff}
.pin-primary:disabled{opacity:.45;cursor:default}
.pin-secondary{border:1px solid #c8dce8;background:#fff;color:#326b8e}
.pin-search .pin-primary{width:45px;flex:0 0 45px;padding:11px;display:flex;align-items:center;justify-content:center}
.pin-search svg{width:20px;height:20px}
.pin-links{display:flex;flex-wrap:wrap;gap:4px 14px}
.pin-form-address{display:flex;align-items:center;justify-content:flex-start;border:0;background:transparent;color:#24799f;font-size:11px;font-weight:700;min-height:40px;padding:8px 2px;text-align:left;cursor:pointer;font-family:inherit}
.pin-feedback:empty{display:none}
.pin-error{font-size:11px;color:#a44d52;background:#fff0f1;border:1px solid #edced2;padding:9px;border-radius:10px;margin:0 0 10px}
.pin-info{font-size:11px;color:#2f6d8e;background:#edf6fb;border:1px solid #cfe3ef;padding:9px;border-radius:10px;margin:0 0 10px}
.pin-map-frame{position:relative;border:1px solid #cbdfe7;border-radius:15px;overflow:hidden;background:#e8f0e9;flex:1 0 235px;min-height:235px}
.pin-map{height:100%;min-height:235px;position:absolute;top:0;right:0;bottom:0;left:0;cursor:crosshair}
.pin-map-caption{position:absolute;bottom:8px;left:9px;padding:4px 6px;background:rgba(255,255,255,.85);border-radius:5px;font-size:8px;color:#6f8994;pointer-events:none;z-index:500}
.pin-zoom{position:absolute;top:10px;right:10px;z-index:500;display:grid;gap:1px;background:#fff;border:1px solid #d1e1e9;border-radius:10px;overflow:hidden;box-shadow:0 3px 10px rgba(32,63,73,.1)}
.pin-zoom button{width:38px;height:38px;padding:0;border:0;background:#fff;font-size:22px;color:#3d758f;cursor:pointer}
.pin-zoom button:first-child{border-bottom:1px solid #e0eaf0}
.pin-center-action{position:absolute;bottom:8px;right:9px;z-index:500;background:rgba(255,255,255,.95);color:#2c7395;border:1px solid #cedfe6;border-radius:8px;min-height:36px;font-size:10px;font-weight:700;padding:7px 9px;cursor:pointer;font-family:inherit}
.pin-sheet-bottom{position:sticky;bottom:-12px;z-index:2;background:#f7fbfe;padding-top:12px}
.pin-selected{display:flex;align-items:center;gap:9px;padding:11px 10px;background:#edf3f7;border:1px solid #d8e3eb;border-radius:12px;min-height:58px}
.pin-selected>span{display:flex;align-items:center;justify-content:center;flex:0 0 29px;height:29px;background:#fff;border-radius:9px;color:#7894a5}
.pin-selected svg{width:18px;height:18px}
.pin-selected>div{flex:1;min-width:0}
.pin-selected b{display:block;font-size:11px;color:#52738a;font-weight:700}
.pin-selected small{display:block;font-size:10px;margin-top:4px;line-height:1.45;overflow-wrap:anywhere;color:#52738a}
.pin-selected.has-pin{background:#eaf6ef;border-color:#cee6d7}
.pin-selected.has-pin>span,.pin-selected.has-pin b{color:#2c8057}
.pin-text-action{border:0;background:transparent;color:#9a5c68;font-size:10px;min-height:36px;padding:4px;cursor:pointer;font-family:inherit}
.pin-coordinates-editor{margin:6px 0 8px}
.pin-coordinates-editor>summary{font-size:10px;color:#6b8a9e;cursor:pointer;min-height:35px;padding:10px 0;list-style:none}
.pin-coordinates-editor>summary::-webkit-details-marker{display:none}
.pin-coordinates-editor>summary:after{content:'\2304';margin-left:7px}
.pin-fieldpair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pin-fieldpair label{font-size:10px;color:#52738a;display:block}
.pin-fieldpair input{display:block;width:100%;margin-top:4px;padding:9px;font-size:11px;min-height:40px;border-radius:10px;border:1px solid #cbdfea;background:#fff;color:#17344b}
.pin-coordinates-editor .pin-secondary{margin-top:8px;min-height:38px;padding:9px;font-size:10px;width:100%}
.pin-footer-actions{display:grid;grid-template-columns:.7fr 1.3fr;gap:8px}
.pin-footer-actions button{min-height:46px;font-size:12px;padding:10px 8px}
.pin-pin{width:30px;height:40px;filter:drop-shadow(0 3px 5px rgba(3,21,43,.35))}
@media(max-height:720px){.pin-overlay{padding:8px}.pin-sheet{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);padding:13px 13px 9px}.pin-map-frame,.pin-map{min-height:190px}.pin-map-frame{flex-basis:190px}.pin-heading h1{font-size:20px}.pin-help{margin:9px 0}}
@media(max-width:370px){.pin-sheet{padding-left:12px;padding-right:12px}.pin-heading h1{font-size:20px}.pin-footer-actions button{font-size:11px}}
/* Mapa del servicio en "Ver datos del servicio" del técnico */
.tvx .svc-map{padding:0;overflow:hidden}
.tvx .svc-map-head{padding:14px 14px 10px}
.tvx .svc-map-head p{margin:6px 0 0}
.tvx .svc-map-frame{height:190px;position:relative;background:#e8f0e9;border-top:1px solid #d7e6ee;border-bottom:1px solid #d7e6ee}
.tvx .svc-map-frame>div{position:absolute;top:0;right:0;bottom:0;left:0}
.tvx .svc-map-foot{padding:10px 14px 14px}
.tvx .svc-map-foot small{display:block;font-size:11px;line-height:1.45;color:#668297;margin-bottom:10px}
/* El selector de ubicación es siempre claro: se imponen sus colores sobre los botones y campos globales del tema oscuro */
#mdl-pin-manual .pin-primary{background:linear-gradient(115deg,#087bcd,#079fe6)!important;color:#fff!important;border:0!important;box-shadow:none!important}
#mdl-pin-manual .pin-primary:disabled{opacity:.45!important}
#mdl-pin-manual .pin-secondary,#mdl-pin-manual .pin-zoom button,#mdl-pin-manual .pin-close{background:#fff!important;color:#326b8e!important;border:1px solid #c8dce8!important;box-shadow:none!important}
#mdl-pin-manual .pin-zoom button{border:0!important;color:#3d758f!important}
#mdl-pin-manual .pin-center-action{background:rgba(255,255,255,.95)!important;color:#2c7395!important;border:1px solid #cedfe6!important;box-shadow:none!important}
#mdl-pin-manual .pin-form-address,#mdl-pin-manual .pin-text-action{background:transparent!important;border:0!important;box-shadow:none!important}
#mdl-pin-manual .pin-form-address{color:#24799f!important}
#mdl-pin-manual .pin-text-action{color:#9a5c68!important}
#mdl-pin-manual input{background:#fff!important;color:#17344b!important;border:1px solid #cbdfea!important;box-shadow:none!important}
#mdl-pin-manual .pin-heading h1{color:#17344b!important}

/* Menú de trabajos: acceso visible a tareas asignadas junto al título. */
#sup-trab .sup-work-actions{position:relative;flex:0 0 auto;z-index:8}
#sup-trab .sup-work-dots{list-style:none;display:grid;place-items:center;width:48px;height:48px;border:.5px solid var(--line,#d6e2e9);border-top:4px solid #1385b5;border-radius:15px;background:#fff;color:#16445e;font-size:27px;font-weight:800;line-height:1;cursor:pointer;box-shadow:0 5px 14px rgba(27,70,96,.08)}
#sup-trab .sup-work-dots::-webkit-details-marker{display:none}
#sup-trab .sup-work-menu{position:absolute;right:0;top:calc(100% + 8px);width:min(300px,calc(100vw - 40px));padding:7px;background:#fff;border:.5px solid var(--line,#d6e2e9);border-top:4px solid #1385b5;border-radius:16px;box-shadow:0 16px 38px rgba(19,53,76,.2);z-index:20}
#sup-trab .sup-work-menu button{display:flex;align-items:center;gap:11px;width:100%;min-height:58px;padding:9px 10px;border:0;border-radius:11px;background:transparent;text-align:left;color:#18344b;cursor:pointer}
#sup-trab .sup-work-menu button+button{border-top:.5px solid #e3ebef}
#sup-trab .sup-work-menu button>span{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#e9f4fb;color:#147eaa;font-size:19px}
#sup-trab .sup-work-menu button div{display:grid;gap:3px;min-width:0;flex:1}
#sup-trab .sup-work-menu button b{font-size:14px}
#sup-trab .sup-work-menu button small{font-size:11px;color:#688092}
#sup-trab .sup-work-menu button i{font-style:normal;color:#7993a3;font-size:20px}
@media(max-width:430px){#sup-trab .sup-work-dots{width:44px;height:44px}}

/* Acceso directo a la cola de tareas desde Inicio para supervisor y admin. */
#sup-dash-body .home-task-queue{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;margin:10px 0 18px;padding:12px 14px;border:.5px solid #c9dce8;border-top:4px solid #168ac2;border-radius:18px;background:linear-gradient(115deg,#f7fbfe,#eaf5fc);color:#17344b;text-align:left;box-shadow:0 7px 18px rgba(30,76,104,.07);cursor:pointer}
#sup-dash-body .home-task-queue>span{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:13px;background:#dceefa;color:#127daf;font-size:22px}
#sup-dash-body .home-task-queue>div{display:grid;gap:4px;flex:1;min-width:0}
#sup-dash-body .home-task-queue b{font-size:15px;color:#17344b}
#sup-dash-body .home-task-queue small{font-size:12px;line-height:1.35;color:#587487}
#sup-dash-body .home-task-queue i{font-style:normal;color:#2584ad;font-size:23px}

/* Lema en 3D (2026-10-26, pedido del dueño): extrusión azul, brillo y sombra, solo sobre fondo oscuro. Más sutil en tamaños chicos. */
body.tv2-shell #tvc-lema,#update-screen .upd-brand small{text-shadow:1px 1px 0 #0b2f78,1.5px 1.5px 0 #082456,1.5px 2px 4px rgba(0,0,0,.5),0 0 6px rgba(79,195,247,.3)}

/* Lema de la cabecera con el ancho de la palabra 3D (2026-10-26): la cara blanca de UPLINK mide 443 de los 500 px del lienzo (antes 475), o sea ~92 px de los 104 del recuadro; el lema mide lo mismo y parte donde parte la palabra (5 px). */

/* Lema en 3D (2026-10-26): "Más que redes, soluciones." como imagen (lema-oscuro-3d.png, recorte del lockup 3D) bajo la palabra UPLINK NETWORK.
   _lemaAjustar() fija su ancho (cara blanca de la palabra) y su margen izquierdo; el texto queda en el DOM pero invisible. */
body.tv2-shell #tvc-lema{font-size:0 !important;color:transparent !important;text-shadow:none !important;letter-spacing:0;line-height:0;background:url('lema-oscuro-3d.png') left center/100% 100% no-repeat;aspect-ratio:492/65;height:auto;overflow:hidden}
body.tv2-shell #tvc-lema b{color:transparent !important}
body.tv2-shell .mobile-logo .tvc-wm + #tvc-lema{margin-top:1px}

/* Barra lateral de escritorio/PWA con el logo nuevo (2026-10-26): hexágono + palabra + lema como una sola pieza (lockup claro sobre fondo blanco,
   oscuro en 3D sobre fondo oscuro). Se muestra solo con la marca Uplink y la barra abierta; con marca propia (.wl) o barra mini queda el logo y nombre de siempre. */
.sidebar .logo .sb-lk{display:none}
.sidebar:not(.mini) .logo:not(.wl) .sb-lk{display:block;flex:1 1 auto;min-width:0;height:56px;margin:-6px 0;background:url('lockup-claro.png') left center/contain no-repeat}
body.dark .sidebar:not(.mini) .logo:not(.wl) .sb-lk{background-image:url('lockup-oscuro.png')}
.sidebar:not(.mini) .logo:not(.wl) > img,.sidebar:not(.mini) .logo:not(.wl) > #wl-brand-name-sb,.sidebar:not(.mini) .logo:not(.wl) > .logo-glow{display:none !important}

/* ── Inventario del técnico con el diseño del inventario del admin (2026-10-26) ──
   Mismas funciones del técnico (usar material, pedir material, recibir envíos, equipos); aspecto de admin-inventario.css:
   cabecera de página con ←, tarjetas con acento lateral de 4px y línea fina, pestañas con subrayado, botones turquesa. */
#tv2-inv.tvx-capa{background:#edf5fa !important;font-family:Arial,Helvetica,sans-serif !important;padding:18px clamp(14px,3vw,28px) 96px !important}
#tv2-inv .tvx-host{max-width:960px}
#tv2-inv .title-row,#tv2-inv .back-row{display:flex;align-items:center;gap:12px;margin:0 0 18px}
#tv2-inv .title-row>div,#tv2-inv .back-row>div{flex:1;min-width:0}
#tv2-inv .eyebrow{display:block;color:#2a8099 !important;font-size:10px !important;font-weight:800 !important;letter-spacing:.12em !important}
#tv2-inv h1{font-size:27px !important;line-height:1.25 !important;margin:0 !important;color:#16374b !important}
#tv2-inv .iconbtn,#tv2-inv .back-row>button:first-child{display:grid;place-items:center;width:42px;min-width:42px;height:42px;padding:0;border:1px solid #d2e2ec;border-radius:13px;background:linear-gradient(145deg,#fff,#eef6fb) !important;color:#27576e;font-size:23px;box-shadow:none}
#tv2-inv .search{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:0 12px;border:1px solid #d0e1eb;border-radius:10px;background:#fff !important;color:#5f7c8f}
#tv2-inv .search input{flex:1;min-width:0;border:0;outline:0;background:transparent !important;padding:10px 0;color:#244d63;font:inherit}
#tv2-inv .warehouse{display:flex;flex-wrap:wrap;align-items:center;width:fit-content;max-width:100%;gap:4px 8px;margin:0 0 12px;padding:6px 9px;border:1px solid #c7e4d8;border-radius:9px;background:#e9f6ef !important;color:#3d7d6c;font-size:11px;font-weight:700}
#tv2-inv .warehouse span{font-size:11px;font-weight:400;color:#6a9b8b}
#tv2-inv .filters,#tv2-inv .tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(max-content,1fr);gap:2px;overflow-x:auto;margin:0 0 14px;padding:0;border-top:1px solid #d9e6ee;border-bottom:0;scrollbar-width:none}
#tv2-inv .filters button,#tv2-inv .tabs button{min-height:43px;border:0 !important;border-radius:10px;background:transparent !important;color:#7e94a2 !important;font-size:12px;font-weight:750;padding:7px 12px;white-space:nowrap;box-shadow:none}
#tv2-inv .filters button.on,#tv2-inv .tabs button.on{background:#e8f6fb !important;color:#1685a5 !important;box-shadow:inset 0 -3px #1c94b1}
#tv2-inv .stock-list,#tv2-inv .request-list,#tv2-inv .receipt-list,#tv2-inv .timeline{display:grid;gap:12px}
#tv2-inv .stock-list article,#tv2-inv .request-list article,#tv2-inv .receipt-list article,#tv2-inv .timeline article,#tv2-inv .card,#tv2-inv .form-card{min-width:0;padding:16px;background:linear-gradient(130deg,#fff,#f7fbfd) !important;border:.5px solid #d3e1eb !important;border-left:4px solid #1997b8 !important;border-radius:18px;color:#244d63;overflow-wrap:anywhere;box-shadow:none}
#tv2-inv .stock-list article.low{border-left-color:#d5a044 !important;background:linear-gradient(130deg,#fff,#fff8e9) !important}
#tv2-inv .stock-list article.agotado{border-left-color:#d28c94 !important;background:linear-gradient(130deg,#fff,#fdf0f2) !important}
#tv2-inv .stock-list article b,#tv2-inv .request-list article b,#tv2-inv .receipt-list article b,#tv2-inv .timeline article b{font-size:16px;line-height:1.35;color:#244d63}
#tv2-inv .stock-list article small,#tv2-inv .request-list article small,#tv2-inv .receipt-list article small,#tv2-inv .timeline article small{font-size:11px;color:#7e95a3}
#tv2-inv .stock-list article>strong,#tv2-inv .receipt-list article>strong{font-size:31px;line-height:1.2;color:#234d63}
#tv2-inv .stock-icon{background:#e8f6fb !important;color:#1688a9;border-radius:12px}
#tv2-inv .stockbar{background:#e3edf3 !important;height:6px;border-radius:6px}
#tv2-inv .stockbar i{background:#1997b8 !important;border-radius:6px}
#tv2-inv .stock-list article.low .stockbar i,#tv2-inv .stock-list article.agotado .stockbar i{background:#d5a044 !important}
#tv2-inv .tag,#tv2-inv .status{display:inline-block;font-size:10px;font-weight:750;color:#22728e;background:#e8f6fb !important;border-radius:20px;padding:5px 9px}
#tv2-inv .tag.low{color:#90651e;background:#f8eccc !important}
#tv2-inv .stock-list article.agotado .tag.low{color:#a14d60;background:#f8e2e6 !important}
#tv2-inv .alert-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin:0 0 14px;background:linear-gradient(130deg,#fff,#fff8e9) !important;border:.5px solid #e9d7a8 !important;border-left:4px solid #d5a044 !important;border-radius:18px;color:#6b4d12}
#tv2-inv .alert-card b{display:block;font-size:14px;color:#6b4d12}
#tv2-inv .alert-card span{font-size:11px;color:#8c7340}
#tv2-inv .alert-card button{border:1px solid #bad5e3 !important;border-radius:10px;background:#eff8fc !important;color:#167fa2 !important;padding:10px 14px;font-weight:700;font-size:12px}
#tv2-inv .notice{padding:12px;border:1px solid #d4e7ef !important;border-radius:12px;background:#edf7fc !important;color:#4d7389;font-size:12px;margin:0 0 12px}
#tv2-inv .notice.warning{background:#fff8e9 !important;border-color:#ecdcae !important;color:#7a5a1c}
#tv2-inv .empty-note{padding:32px 16px;text-align:center;color:#7a93a1;font-size:12px}
#tv2-inv .bottom-action,#tv2-inv .dual-actions .primary{border:0 !important;border-radius:12px;background:#1688a9 !important;color:#fff !important;font-weight:750;box-shadow:none}
#tv2-inv .dual-actions .outline,#tv2-inv .outline{border:1px solid #bad5e3 !important;border-radius:12px;background:#eff8fc !important;color:#167fa2 !important;font-weight:750}
#tv2-inv .dual-actions .danger{border:1px solid #e3c1c8 !important;border-radius:12px;background:#fdf0f2 !important;color:#a14d60 !important;font-weight:750}
#tv2-inv .detail-grid span{color:#7e95a3;font-size:11px}
#tv2-inv .detail-grid b{color:#244d63}
#tv2-inv label{color:#274d63;font-size:12px;font-weight:700}
#tv2-inv input,#tv2-inv textarea,#tv2-inv select{border:1px solid #cedfe9;border-radius:11px;background:#f8fcfe !important;color:#234d63}
#tv2-inv .tabs{background:transparent !important;border-radius:0}

/* Distintivo de rol en pastel (cabecera y Mi perfil): sin degradado intenso ni halo, mismas dimensiones. */
body.tv2-shell #tvc-av[data-rol="admin"], .tvx .avatar[data-rol="admin"] { background: #ede0fb !important; color: #7e22ce !important; box-shadow: none !important; }
body.tv2-shell #tvc-av[data-rol="supervisor"], .tvx .avatar[data-rol="supervisor"] { background: #fdecc8 !important; color: #b45309 !important; box-shadow: none !important; }
body.tv2-shell #tvc-av[data-rol="vendedor"], .tvx .avatar[data-rol="vendedor"] { background: #d1f5e4 !important; color: #047857 !important; box-shadow: none !important; }
body.tv2-shell #tvc-av[data-rol="tecnico"], .tvx .avatar[data-rol="tecnico"] { background: #cdf1f7 !important; color: #0e7490 !important; box-shadow: none !important; }
body.tv2-shell #tvc-av[data-rol="bodega"], .tvx .avatar[data-rol="bodega"] { background: #d4ebfc !important; color: #1d4ed8 !important; box-shadow: none !important; }
body.tv2-shell #tvc-av[data-rol="contador"], .tvx .avatar[data-rol="contador"] { background: #e2e8f0 !important; color: #475569 !important; box-shadow: none !important; }

/* Selector de persona destino del traspaso del técnico */
#tv2-inv .tr-picklist{display:grid;gap:6px;margin:6px 0 10px}
#tv2-inv .tr-pick{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 12px;border:.5px solid #d3e1eb;border-left:4px solid #1997b8;border-radius:12px;background:#fff;color:#0d2f4a;font:inherit}
#tv2-inv .tr-pick small{color:#5d7a8c;font-size:12px}
#tv2-inv .tr-pick.on{background:#e4f4f8;border-color:#a9d9e4;border-left-color:#1688a9}

/* Bloque "Almacén de destino" de traspasos, dentro del formulario (técnico y admin) */
.trd-box{display:flex;flex-direction:column;gap:10px;margin:4px 0 14px}
.trd-box .trd-bar{display:flex;gap:8px;align-items:stretch}
.trd-box .trd-user{flex:1;min-width:0;display:flex;align-items:center;gap:6px;background:#fff;border:.5px solid #cfe0ea;border-radius:12px;padding:0 12px}
.trd-box .trd-user input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:16px;padding:12px 0;color:#0d2f4a}
.trd-box .trd-user span{color:#2d9bb8;font-size:13px;white-space:nowrap}
.trd-box .trd-buscar{flex:0 0 44px;width:44px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:12px;background:#1688a9;color:#fff}
.trd-box .trd-hint{color:#5d7a8c;font-size:12px}
.trd-box .trd-filtro{width:100%;box-sizing:border-box;border:.5px solid #cfe0ea;border-radius:12px;background:#fff;padding:11px 12px;font-size:15px;color:#0d2f4a;outline:0}
.trd-box #trd-lista{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.trd-box .trd-item,.trd-box .trd-sel{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 12px;background:#fff;border:.5px solid #d3e1eb;border-left:4px solid #1997b8;border-radius:12px;color:#0d2f4a;font:inherit;width:100%;box-sizing:border-box}
.trd-box .trd-av{flex:0 0 38px;height:38px;border-radius:12px;background:#d4ebfc;color:#1d4ed8;display:grid;place-items:center;font-weight:800;font-size:13px}
.trd-box .trd-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.trd-box .trd-tx b{font-size:14px;overflow-wrap:anywhere;line-height:1.25}
.trd-box .trd-tx small{color:#5d7a8c;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trd-box .trd-code{flex:0 0 auto;max-width:34%;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.03em;color:#1688a9;background:#e4f4f8;border-radius:999px;padding:3px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trd-box .trd-item.on{background:#e4f4f8;border-color:#a9d9e4;border-left-color:#1688a9}
.trd-box .trd-sel{background:#eaf7f1;border-color:#bfe3d0;border-left-color:#1c9a6b}
.trd-box .trd-sel .trd-av{background:#d1f5e4;color:#047857}
.trd-box .trd-cambiar{flex:0 0 auto;border:.5px solid #bfe3d0;background:#fff;color:#047857;border-radius:999px;padding:6px 12px;font-weight:700;font-size:12px}
.trd-box .trd-vacio{text-align:center;color:#5d7a8c;font-size:13px;margin:6px 0}
.tr-destbtn,.ix-destbtn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:12px 14px;margin-bottom:10px;border:.5px solid #d3e1eb;border-left:4px solid #1997b8;border-radius:12px;background:#fff;color:#0d2f4a;font:inherit}
.tr-destbtn small,.ix-destbtn small{color:#5d7a8c;font-size:12px}

/* Finanzas (APK): resumen del período. Acento lateral de 4px + línea fina de 0,5px del tono de cada tarjeta. */
#tv2-cotz .fin-page{padding-bottom:28px}
#tv2-cotz .fin-per{display:flex;gap:6px;overflow-x:auto;margin:4px 0 8px;padding-bottom:2px}
#tv2-cotz .fin-per button{flex:0 0 auto;white-space:nowrap}
#tv2-cotz .fin-sub{margin:4px 2px 10px;font-size:12px;color:#5d7a8c}
#tv2-cotz .fin-h{margin:16px 2px 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#46657a}
#tv2-cotz .fin-util{display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:#fff;border:.5px solid #cfe0ea;border-left:4px solid #1c9a6b;border-radius:14px}
#tv2-cotz .fin-util small{font-size:11px;letter-spacing:.06em;color:#5d7a8c;font-weight:700}
#tv2-cotz .fin-util b{font-size:28px;line-height:1.15;color:#146f4d}
#tv2-cotz .fin-util span{font-size:12px;color:#5d7a8c}
#tv2-cotz .fin-util.neg{border-left-color:#d4506a}
#tv2-cotz .fin-util.neg b{color:#b23a52}
#tv2-cotz .fin-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
#tv2-cotz .fin-tile{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center;padding:11px 14px;background:#fff;border:.5px solid #d3e1eb;border-left:4px solid #1997b8;border-radius:12px}
#tv2-cotz .fin-tile small{grid-column:1;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#46657a}
#tv2-cotz .fin-tile b{grid-column:2;grid-row:1/3;font-size:17px;color:#0d2f4a;text-align:right;white-space:nowrap}
#tv2-cotz .fin-tile span{grid-column:1;font-size:11.5px;color:#6b8696}
#tv2-cotz .fin-tile.verde{border-color:#bde2cd;border-left-color:#1c9a6b}
#tv2-cotz .fin-tile.ambar{border-color:#f3dcae;border-left-color:#d9962a}
#tv2-cotz .fin-tile.rojo{border-color:#f0c8d0;border-left-color:#d4506a}
#tv2-cotz .fin-tile.gris{border-color:#d6dee5;border-left-color:#7a8ea0}
#tv2-cotz .fin-warn{margin:8px 2px 0;padding:9px 12px;font-size:12px;line-height:1.4;color:#7a5a12;background:#fff8e6;border:.5px solid #f3dcae;border-left:4px solid #d9962a;border-radius:10px}
#tv2-cotz .fin-ot{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;padding:10px 14px;background:#fff;border:.5px solid #d3e1eb;border-left:4px solid #1997b8;border-radius:12px}
#tv2-cotz .fin-ot.neg{border-color:#f0c8d0;border-left-color:#d4506a}
#tv2-cotz .fin-ot b{display:block;font-size:14px;color:#0d2f4a}
#tv2-cotz .fin-ot small{display:block;font-size:12px;color:#5d7a8c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tv2-cotz .fin-ot dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0;font-size:12px}
#tv2-cotz .fin-ot dt{color:#6b8696}
#tv2-cotz .fin-ot dd{margin:0;text-align:right;color:#0d2f4a;font-weight:600}
#tv2-cotz .fin-ot dd.m{color:#146f4d}
#tv2-cotz .fin-ot.neg dd.m{color:#b23a52}
#tv2-cotz .fin-page .outline.wide{margin-top:14px}

/* Margen estimado del cotizador (admin y supervisor) */
.cot-margen{margin:12px 0;padding:12px 14px;border-radius:12px;background:#f3f9f5;border:.5px solid #bde2cd;border-left:4px solid #178d56;color:#14532d;font-size:13px}
.cot-margen b{display:block;margin-bottom:6px;font-size:13px}
.cot-margen>div{display:flex;justify-content:space-between;gap:12px;padding:2px 0}
.cot-margen>div.m{margin-top:4px;padding-top:6px;border-top:.5px solid #bde2cd;font-weight:700}
.cot-margen p{margin:8px 0 0;font-weight:600;color:#b91c1c}
.cot-margen.bajo{background:#fdf2f2;border-color:#f2c4c4;border-left-color:#dc2626;color:#7f1d1d}
.cot-margen.bajo>div.m{border-top-color:#f2c4c4}
.cot-margen small{display:block;margin:2px 0 4px;font-size:11px;opacity:.8}

/* Finanzas del mes en el Inicio del administrador */
.adm-inicio .adm-fin{display:block;width:100%;text-align:left;margin:0 0 14px;padding:14px 16px;border-radius:16px;border:.5px solid #bde2cd;border-left:4px solid #178d56;background:linear-gradient(135deg,#fff,#eef9f2);color:#14532d;font:inherit;cursor:pointer}
.adm-inicio .adm-fin .af-top{display:flex;justify-content:space-between;align-items:center;font-size:15px}
.adm-inicio .adm-fin .af-top i{font-style:normal;font-size:22px;opacity:.6}
.adm-inicio .adm-fin .af-util{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:8px 0 10px}
.adm-inicio .adm-fin .af-util small{width:100%;font-size:11px;letter-spacing:.4px;text-transform:uppercase;opacity:.7}
.adm-inicio .adm-fin .af-util strong{font-size:28px;line-height:1.1;color:#0f6b3a}
.adm-inicio .adm-fin .af-util.neg strong{color:#b91c1c}
.adm-inicio .adm-fin .af-util em{font-style:normal;font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px;background:#d9f2e3}
.adm-inicio .adm-fin .af-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.adm-inicio .adm-fin .af-grid span{display:block;padding:8px;border-radius:10px;background:#fff;border:.5px solid #cfe9da}
.adm-inicio .adm-fin .af-grid small{display:block;font-size:10px;opacity:.7}
.adm-inicio .adm-fin .af-grid b{font-size:13px}
.adm-inicio .adm-fin .af-sub{margin:10px 0 0;font-size:12px;opacity:.8}

/* Finanzas: histórico mensual */
#tv2-cotz .fin-hist{margin:0 0 8px;padding:10px 12px;border-radius:12px;border:.5px solid #bde2cd;border-left:4px solid #178d56;background:linear-gradient(135deg,#fff,#f1faf5);color:#14532d}
#tv2-cotz .fin-hist.neg{border-color:#f2c4c4;border-left-color:#dc2626;background:linear-gradient(135deg,#fff,#fdf3f3);color:#7f1d1d}
#tv2-cotz .fin-hist.vacio{opacity:.6}
#tv2-cotz .fin-hist .fh-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
#tv2-cotz .fin-hist .fh-bar{height:6px;border-radius:99px;background:rgba(23,141,86,.14);margin:6px 0 4px;overflow:hidden}
#tv2-cotz .fin-hist .fh-bar i{display:block;height:100%;border-radius:99px;background:#178d56}
#tv2-cotz .fin-hist.neg .fh-bar{background:rgba(220,38,38,.14)}
#tv2-cotz .fin-hist.neg .fh-bar i{background:#dc2626}
#tv2-cotz .fin-hist small{font-size:11px;opacity:.85}

/* Finanzas: gastos fijos mensuales */
#tv2-cotz .fin-fijo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;margin:0 0 8px;padding:10px 12px;border-radius:12px;border:.5px solid #cfd9e6;border-left:4px solid #64748b;background:linear-gradient(135deg,#fff,#f4f7fb);color:#1e293b}
#tv2-cotz .fin-fijo.fin{opacity:.6}
#tv2-cotz .fin-fijo b{display:block;font-size:14px}
#tv2-cotz .fin-fijo small{display:block;font-size:11px;opacity:.75;font-weight:400}
#tv2-cotz .fin-fijo strong{font-size:15px;text-align:right}
#tv2-cotz .fin-fijo-acc{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
#tv2-cotz .fin-fijo-acc button{flex:1 1 auto;min-height:36px;padding:6px 10px;border-radius:10px;font-size:12px}
#tv2-cotz .fin-fijo-form{display:grid;gap:10px;margin:0 0 10px;padding:12px;border-radius:12px;border:.5px solid #cfd9e6;border-left:4px solid #178d91;background:linear-gradient(135deg,#fff,#eef8f9);color:#0f3d40}
#tv2-cotz .fin-fijo-form label{display:grid;gap:4px;font-size:12px;font-weight:600}
#tv2-cotz .fin-fijo-form input,#tv2-cotz .fin-fijo-form select{min-height:42px;padding:8px 10px;border-radius:10px;border:.5px solid #b9c7d6;background:#fff;color:#0f172a;font:inherit;font-size:14px;box-sizing:border-box;width:100%}

/* Gastos fijos: aviso de cobro, dólares y proyección */
#tv2-cotz .fin-cobros{display:grid;gap:3px;margin:0 0 10px;padding:10px 12px;border-radius:12px;border:.5px solid #f3dcae;border-left:4px solid #d97706;background:linear-gradient(135deg,#fff,#fff7e6);color:#7c4a03;font-size:13px}
#tv2-cotz .fin-fijo-form .fx-hint{min-height:14px;font-weight:400;font-size:11px;opacity:.8}
#tv2-cotz .fin-proy{margin:0 0 8px;padding:12px 10px 8px;border-radius:12px;border:.5px solid #cfd9e6;border-left:4px solid #2b6591;background:linear-gradient(135deg,#fff,#f1f6fb)}
#tv2-cotz .fin-proy .fp-bars{position:relative;display:flex;align-items:flex-end;gap:4px;height:130px;padding-bottom:16px}
#tv2-cotz .fin-proy .fp-col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
#tv2-cotz .fin-proy .fp-col i{display:block;width:100%;border-radius:4px 4px 0 0;background:#e0a23b;min-height:2px}
#tv2-cotz .fin-proy .fp-col i.ok{background:#178d56}
#tv2-cotz .fin-proy .fp-col small{font-size:9px;opacity:.7;height:14px;margin-top:2px}
#tv2-cotz .fin-proy .fp-line{position:absolute;left:0;right:0;height:0;margin-bottom:16px;border-top:1.5px dashed #b91c1c;pointer-events:none}
#tv2-cotz .fin-proy .fp-line em{position:absolute;right:0;top:-15px;font-style:normal;font-size:10px;font-weight:700;color:#b91c1c;background:#fff;padding:0 4px;border-radius:4px}
.adm-inicio .adm-fin .af-aviso{margin:8px 0 0;padding:6px 10px;border-radius:10px;background:#fff3d6;border:.5px solid #f3dcae;color:#7c4a03;font-size:12px}

/* Finanzas: botón + junto al título de Gastos fijos (igual que el resto de la app) */
#tv2-cotz .fin-h-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}
#tv2-cotz .fin-h-row .fin-h{margin:0 2px}
#tv2-cotz .fin-mas{flex:0 0 auto;width:38px;height:38px;border-radius:12px;border:.5px solid #b7d6f3;background:linear-gradient(135deg,#fff,#e8f3fd);color:#0a79e0;font-size:24px;font-weight:600;line-height:1;display:grid;place-items:center;padding:0;cursor:pointer}

/* Gasto fijo recién guardado: resaltado unos segundos */
#tv2-cotz .fin-fijo.nuevo{border-color:#9fdcb8;border-left-color:#178d56;animation:finNuevo 1.6s ease-out 2}
#tv2-cotz .fin-nuevo-tag{font-style:normal;font-size:10px;font-weight:700;margin-left:6px;padding:2px 7px;border-radius:99px;background:#d9f2e3;color:#0f6b3a;vertical-align:middle}
@keyframes finNuevo{0%{background:#d9f2e3}100%{background:linear-gradient(135deg,#fff,#f4f7fb)}}

/* Finanzas: tarjeta superior de gastos fijos (abre su pantalla) */
#tv2-cotz .fin-fijos-card{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin:0 0 10px;padding:12px 14px;text-align:left;cursor:pointer;border-radius:14px;border:.5px solid #e2bd7d;border-left:4px solid var(--amber);background:linear-gradient(135deg,#fff,#fdf3e0);color:#7a4a05;font:inherit}
#tv2-cotz .fin-fijos-card small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.06em}
#tv2-cotz .fin-fijos-card b{display:block;font-size:22px;color:#4a2c02}
#tv2-cotz .fin-fijos-card b em{font-style:normal;font-size:12px;font-weight:600;margin-left:3px}
#tv2-cotz .fin-fijos-card span span{font-size:12px}
#tv2-cotz .fin-fijos-card i{font-style:normal;font-size:26px;line-height:1}
/* Login: proporción final de la marca desde el primer render, sin mediciones JS. */
#login-screen.lg2 .lg2-brand{width:min(200px,70vw);max-width:100%;margin:0 auto}
#login-screen.lg2 .lg2-brand strong{display:block;font-size:0;line-height:0}
#login-screen.lg2 .lg2-brand .lg2-wm{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:500/150;margin:0}
#login-screen.lg2 .lg2-brand p{display:block;width:88.6%;height:auto;aspect-ratio:492/65;margin:8px 0 0 4.8%;font-size:0!important;line-height:0;color:transparent!important;letter-spacing:0;text-shadow:none!important;background:url('lema-oscuro-3d.png') left center/100% 100% no-repeat;overflow:hidden}
#login-screen.lg2 .lg2-brand p b{color:transparent!important}