/* ========================================
   WhatsApp Panel & Dashboard – Astra CRM
   style.css
   ======================================== */

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Scrollbar global */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

:root {
  --wa-green:        #25D366;
  --wa-green-dark:   #128C7E;
  --wa-green-teal:   #075E54;
  --wa-light-green:  #DCF8C6;
  --wa-incoming-bg:  #FFFFFF;
  --wa-bg-chat:      #ECE5DD;
  --wa-sidebar-bg:   #FFFFFF;
  --wa-header-bg:    #F0F2F5;
  --wa-search-bg:    #F0F2F5;
  --wa-divider:      #E9EDEF;
  --wa-text-primary: #111B21;
  --wa-text-secondary: #667781;
  --wa-text-light:   #8696A0;
  --wa-icon:         #54656F;
  --wa-blue-check:   #53BDEB;
  --wa-badge:        #25D366;
  --wa-active-item:  #F0F2F5;
  --wa-hover-item:   #F5F6F6;
  --sidebar-width:   380px;
  --header-height:   64px;
  --input-height:    68px;
  --radius-bubble:   7.5px;
  --shadow-bubble:   0 1px 0.5px rgba(11,20,26,.13);
  --transition:      0.18s ease;
  
  /* New Dashboard variables */
  --dash-bg:          #F8F9FA;
  --card-bg:          #FFFFFF;
  --text-dark:        #1E293B;
  --text-muted:       #64748B;
  --card-shadow:      0 1px 3px 0 rgba(0,0,0,0.05), 0 1px 2px -1px rgba(0,0,0,0.05);
}

html, body {
  height: 100%;
  width: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #f1f5f9;
  font-size: 14px;
  color: var(--text-dark);
  overflow: hidden;
  /* iOS Safari: fill-available evita que el navegador tape el contenido */
  min-height: -webkit-fill-available;
}

/* =============================================
   PÁGINA DE LOGIN (SPLIT LAYOUT)
   ============================================= */
.auth-wrapper {
  display: flex;
  width: 100%;
  height: 100vh;
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
}

/* ── Lado izquierdo: foto de panadería ────── */
.login-hero {
  flex: 0 0 58%;
  position: relative;
  background-image: url('https://images.unsplash.com/photo-1509440159596-0249088772ff?auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center;
  display: flex;
  overflow: hidden;
}

.login-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    145deg,
    rgba(7, 94, 84, 0.88) 0%,
    rgba(18, 140, 126, 0.72) 45%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

.login-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 52px 56px;
  width: 100%;
}

.login-hero-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-hero-logo {
  width: 220px;
  height: 220px;
  border-radius: 20px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.login-hero-brand span {
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.2px;
}

.login-hero-text {
  margin-bottom: 20px;
}

.login-hero-text h1 {
  font-size: 62px;
  font-weight: 800;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -2px;
  margin-bottom: 20px;
}

.login-hero-text p {
  color: rgba(255,255,255,0.75);
  font-size: 17px;
  line-height: 1.65;
  max-width: 380px;
  font-weight: 400;
}

.login-hero-domain {
  color: rgba(255,255,255,0.4);
  font-size: 12.5px;
  letter-spacing: 1px;
  text-transform: lowercase;
}

/* ── Lado derecho: formulario ─────────────── */
.login-panel {
  flex: 1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  overflow-y: auto;
}

.login-panel-inner {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
}

.login-panel-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
}

.login-panel-logo {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: contain;
}

.login-panel-brand span {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-dark);
}

.login-panel-title {
  font-size: 30px;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -0.8px;
  margin-bottom: 6px;
}

.login-panel-sub {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 28px;
}

/* Clerk component fit */
#login-container > * {
  width: 100% !important;
}

/* Mobile: ocultar foto, solo formulario */
@media (max-width: 768px) {
  .login-hero  { display: none; }
  .login-panel { padding: 32px 24px; }
  .login-panel-inner { max-width: 100%; }
  .login-panel-title { font-size: 26px; }
}

/* =============================================
   APP SHELL LAYOUT
   ============================================= */
.shell {
  display: flex;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* adapta al viewport visible, excluye barras del navegador */
  background: var(--dash-bg);
  position: relative;
  overflow: hidden;
}

/* =============================================
   NAV SIDEBAR (LATERAL NAVIGATION BAR)
   ============================================= */
.nav-sidebar {
  width: 240px;
  background: #FFFFFF;
  border-right: 1px solid var(--wa-divider);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%;
  z-index: 100;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--wa-divider);
}

.nav-logo {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: contain;
}

.nav-brand-name {
  font-weight: 700;
  font-size: 17px;
  color: var(--text-dark);
  letter-spacing: -0.2px;
}

.nav-items {
  list-style: none;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 500;
  transition: all var(--transition);
  user-select: none;
  position: relative;
}

.nav-item:hover {
  background: var(--wa-hover-item);
  color: var(--text-dark);
}

.nav-item.active {
  background: #f1f5f9;
  color: #075E54;
  font-weight: 600;
}

.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.nav-label {
  flex: 1;
  font-size: 14px;
}

.nav-badge {
  background: var(--wa-badge);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}

.nav-bottom {
  padding: 20px 24px;
  border-top: 1px solid var(--wa-divider);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-circle-auth {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #075E54;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 2px 6px rgba(7, 94, 84, 0.2);
}

/* =============================================
   VIEW CONTAINER & COMMON VIEW STYLING
   ============================================= */
.view-container {
  flex: 1;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
}

.view {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  display: flex;
  width: 100%;
  height: 100%;
}

.view.active {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}

/* =============================================
   DASHBOARD VIEW (NEW AESTHETICS - CLEAN WHITE STYLE)
   ============================================= */
.dashboard-wrapper {
  flex: 1;
  overflow-y: auto;
  background: var(--dash-bg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.dash-header {
  margin-bottom: 4px;
}

.dash-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: -0.5px;
}

.dash-subtitle {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* --- KPI Grid --- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.kpi-card {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(226, 232, 240, 0.7);
  transition: transform var(--transition), box-shadow var(--transition);
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

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

.kpi-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.8px;
}

.kpi-badge-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

/* Color schemes for badges from reference */
.badge-green { background: #e6fcf5; color: #099268; }
.badge-blue { background: #e7f5ff; color: #1c7ed6; }
.badge-teal { background: #e6fffa; color: #0ca678; }
.badge-purple { background: #f3f0ff; color: #7048e8; }
.badge-orange { background: #fff9db; color: #f59f00; }
.badge-red { background: #fff5f5; color: #f03e3e; }

.kpi-value-row {
  display: flex;
  align-items: baseline;
}

.kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: -0.5px;
}

.kpi-footer-row {
  font-size: 12px;
  font-weight: 500;
}

.kpi-trend {
  display: flex;
  align-items: center;
  gap: 4px;
}

.kpi-trend.up { color: #099268; }
.kpi-trend.down { color: #e03131; }

/* --- Charts Row --- */
.charts-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.chart-card {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(226, 232, 240, 0.7);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
}

.chart-subtitle {
  font-size: 12.5px;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

.trend-badge-pill {
  background: #e6fcf5;
  color: #099268;
  font-weight: 600;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
}

.kpi-toggle-group {
  display: flex;
  gap: 4px;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 3px;
  width: fit-content;
  margin-bottom: 16px;
}

.chart-toggle-group {
  display: flex;
  gap: 4px;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 3px;
}

.chart-toggle-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  padding: 5px 14px;
  border-radius: 8px;
  transition: background .15s, color .15s;
}

.chart-toggle-btn.active {
  background: #fff;
  color: #0ea5e9;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.chart-container {
  position: relative;
  height: 280px;
  width: 100%;
}

/* Funnel bars */
.funnel-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  justify-content: center;
}

.funnel-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.funnel-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.funnel-label-name {
  color: var(--text-dark);
}

.funnel-progress-bg {
  width: 100%;
  height: 18px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.funnel-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #0ea5e9);
  border-radius: 4px;
  transition: width 0.8s ease-in-out;
  display: flex;
  align-items: center;
  padding-left: 8px;
}

.funnel-progress-value {
  color: white;
  font-size: 10px;
  font-weight: 700;
}

/* --- Bottom Row --- */
.bottom-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.bottom-card {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(226, 232, 240, 0.7);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bottom-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.activity-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}
.activity-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.activity-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.activity-icon {
  width: 32px;
  height: 32px;
  background: #e6fcf5;
  color: #099268;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.activity-info {
  display: flex;
  flex-direction: column;
}

.activity-title {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-dark);
}

.activity-time {
  font-size: 11.5px;
  color: var(--text-muted);
}

.activity-amount {
  font-weight: 700;
  font-size: 13.5px;
  color: #099268;
}

.systems-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.system-item {
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.system-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.system-icon {
  width: 32px;
  height: 32px;
  background: #f1f5f9;
  color: var(--text-muted);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.system-info {
  display: flex;
  flex-direction: column;
}

.system-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-dark);
}

.system-leads {
  font-size: 11.5px;
  color: var(--text-muted);
}

.system-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
}

.system-dot.active {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

/* =============================================
   WHATSAPP PANEL (VIEW ACTIVE - EXACTLY AS BEFORE)
   ============================================= */
.app {
  display: flex;
  width: 100%;
  height: 100%;
  background: var(--wa-sidebar-bg);
  position: relative;
  overflow: hidden;
}

.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  background: var(--wa-sidebar-bg);
  border-right: 1px solid var(--wa-divider);
  height: 100%;
  overflow: hidden;
  z-index: 10;
  transition: transform var(--transition);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--wa-header-bg);
  height: var(--header-height);
  flex-shrink: 0;
}

.profile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.profile-avatar:hover { transform: scale(1.05); }
.profile-avatar svg { width: 100%; height: 100%; display: block; }

.sidebar-header-icons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.search-bar {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--wa-sidebar-bg);
  flex-shrink: 0;
  position: relative;
}

.search-bar .search-icon {
  position: absolute;
  pointer-events: none;
  margin-left: 10px;
  color: var(--wa-text-secondary);
  display: flex;
  align-items: center;
}

.search-bar input {
  width: 100%;
  height: 36px;
  background: var(--wa-search-bg);
  border: none;
  border-radius: 8px;
  padding: 0 12px 0 38px;
  font-size: 13.5px;
  color: var(--wa-text-primary);
  font-family: inherit;
  outline: none;
  transition: background var(--transition);
}
.search-bar input::placeholder { color: var(--wa-text-secondary); }
.search-bar input:focus { background: #e8eaeb; }

.chat-list {
  list-style: none;
  overflow-y: auto;
  flex: 1;
}

.chat-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--wa-divider);
  gap: 12px;
  transition: background var(--transition);
  user-select: none;
  position: relative;
}

.chat-item:hover { background: var(--wa-hover-item); }
.chat-item.active { background: var(--wa-active-item); }

.avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: .5px;
}

.avatar-blue   { background: linear-gradient(135deg,#2196F3,#1565C0); }
.avatar-teal   { background: linear-gradient(135deg,#26A69A,#00695C); }
.avatar-orange { background: linear-gradient(135deg,#FF9800,#E65100); }
.avatar-purple { background: linear-gradient(135deg,#9C27B0,#4A148C); }
.avatar-green  { background: linear-gradient(135deg,#4CAF50,#1B5E20); }
.avatar-pink   { background: linear-gradient(135deg,#E91E63,#880E4F); }
.avatar-indigo { background: linear-gradient(135deg,#5C6BC0,#1A237E); }
.avatar-red    { background: linear-gradient(135deg,#F44336,#B71C1C); }

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

.chat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.chat-row:first-child { margin-bottom: 3px; }

.chat-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--wa-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-time {
  font-size: 11.5px;
  color: var(--wa-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.chat-preview {
  font-size: 12.5px;
  color: var(--wa-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.double-check {
  color: var(--wa-text-secondary);
  font-size: 11px;
  margin-right: 2px;
}
.blue-check { color: var(--wa-blue-check); }

.chat-badge {
  background: var(--wa-badge);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  flex-shrink: 0;
}

/* =============================================
   CHAT WINDOW
   ============================================= */
.chat-window {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--wa-bg-chat);
  position: relative;
}

/* WhatsApp chat background pattern */
.chat-window::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("bg_chat.png");
  background-repeat: repeat;
  background-size: 400px auto;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

/* Fallback if bg_chat.png not loaded */
.chat-window {
  background-color: var(--wa-bg-chat);
}

.chat-header {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--wa-header-bg);
  height: var(--header-height);
  flex-shrink: 0;
  gap: 10px;
  z-index: 5;
  border-bottom: 1px solid var(--wa-divider);
}

.back-btn {
  display: none;
}

.chat-header-avatar {
  width: 40px;
  height: 40px;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.chat-header-avatar:hover { opacity: .85; }

.chat-header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.chat-header-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--wa-text-primary);
  line-height: 1.2;
}
.chat-header-status {
  font-size: 12.5px;
  color: var(--wa-text-secondary);
}

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

/* =============================================
   HUMAN TAKEOVER BUTTON
   ============================================= */
.takeover-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .2px;
  transition: background 0.22s, color 0.22s, box-shadow 0.22s, transform 0.12s;
  white-space: nowrap;
  outline: none;
  user-select: none;
}
.takeover-btn:active { transform: scale(.96); }

.takeover-btn.mode-ai {
  background: linear-gradient(135deg, #1abc9c, #128C7E);
  color: #fff;
  box-shadow: 0 2px 10px rgba(18,140,126,.35);
}
.takeover-btn.mode-ai:hover {
  background: linear-gradient(135deg, #16a085, #0e6b62);
}

.takeover-btn.mode-human {
  background: linear-gradient(135deg, #f39c12, #e67e22);
  color: #fff;
  box-shadow: 0 2px 10px rgba(230,126,34,.35);
}
.takeover-btn.mode-human:hover {
  background: linear-gradient(135deg, #d68910, #ca6f1e);
}

.takeover-btn .btn-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

@keyframes aiBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}
.takeover-btn.mode-ai .btn-icon svg {
  animation: aiBlink 2.2s ease-in-out infinite;
}

/* --- Messages Area --- */
.messages-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  z-index: 1;
  background-image: url('fondo-chat.jpeg');
  background-repeat: repeat;
  background-size: 400px auto;
  background-attachment: local;
}

/* Grupo de mensajes de un mismo dia. El separador hace sticky DENTRO
   del grupo: cuando el grupo termina, su pildora se va con el y la del
   dia siguiente la reemplaza sin solaparse (WhatsApp Web). */
.day-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.date-separator {
  display: flex;
  justify-content: center;
  margin: 14px 0 10px;
  position: sticky;
  top: 8px;
  z-index: 2;
  pointer-events: none;
}
.date-separator span {
  background: #e1f2fb;
  color: #54656F;
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 8px;
  box-shadow: 0 1px 1px rgba(0,0,0,.08);
  letter-spacing: .3px;
}

/* Hora dentro de cada burbuja */
.bubble .msg-hora {
  display: block;
  text-align: right;
  font-size: 10.5px;
  color: var(--wa-text-secondary, #667781);
  margin-top: 2px;
  line-height: 1;
  user-select: none;
}
.message.outgoing .bubble .msg-hora { color: #3a7d5d; }

.message {
  display: flex;
  margin-bottom: 2px;
  animation: fadeUp 0.22s ease;
}

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

.message.incoming { justify-content: flex-start; }
.message.outgoing { justify-content: flex-end; }

.bubble {
  max-width: 65%;
  min-width: 80px;
  padding: 7px 10px 6px 10px;
  border-radius: var(--radius-bubble);
  box-shadow: var(--shadow-bubble);
  position: relative;
  word-break: break-word;
  line-height: 1.45;
}

.message.incoming .bubble {
  background: var(--wa-incoming-bg);
  border-top-left-radius: 0;
}
.message.incoming .bubble::before {
  content: '';
  position: absolute;
  top: 0;
  left: -8px;
  width: 0; height: 0;
  border-top: 8px solid var(--wa-incoming-bg);
  border-left: 8px solid transparent;
}

.message.outgoing .bubble {
  background: var(--wa-light-green);
  border-top-right-radius: 0;
}
.message.outgoing .bubble::after {
  content: '';
  position: absolute;
  top: 0;
  right: -8px;
  width: 0; height: 0;
  border-top: 8px solid var(--wa-light-green);
  border-right: 8px solid transparent;
}

.bubble p {
  font-size: 13.8px;
  color: var(--wa-text-primary);
  margin: 0;
}

.msg-link {
  color: #027eb5;
  text-decoration: underline;
  word-break: break-all;
}

.msg-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-top: 3px;
  float: right;
  margin-left: 8px;
}

.msg-time {
  font-size: 10.5px;
  color: var(--wa-text-light);
  white-space: nowrap;
}

.msg-status {
  font-size: 11px;
  line-height: 1;
}
.msg-status.sent  { color: var(--wa-text-secondary); }
.msg-status.read  { color: var(--wa-blue-check); }

/* --- Input Area --- */
.input-area {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--wa-header-bg);
  height: var(--input-height);
  flex-shrink: 0;
  gap: 8px;
  z-index: 5;
  position: relative;
}

.ai-active-banner {
  flex: 1;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 42px;
  background: linear-gradient(135deg, rgba(18,140,126,.08), rgba(37,211,102,.06));
  border: 1.5px dashed rgba(18,140,126,.45);
  border-radius: 21px;
  color: #128C7E;
  font-size: 13px;
  font-weight: 500;
  user-select: none;
}
.ai-active-banner svg {
  flex-shrink: 0;
  animation: aiBlink 2.2s ease-in-out infinite;
}
.ai-active-banner.visible {
  display: flex;
}

.message-input {
  flex: 1;
  height: 42px;
  background: var(--wa-sidebar-bg);
  border: none;
  border-radius: 21px;
  padding: 0 16px;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--wa-text-primary);
  outline: none;
  transition: box-shadow var(--transition);
}
.message-input::placeholder { color: var(--wa-text-secondary); }
.message-input:focus { box-shadow: 0 0 0 2px rgba(37,211,102,.25); }

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--wa-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition), transform 0.12s;
}
.icon-btn:hover {
  background: rgba(0,0,0,.06);
  color: var(--wa-text-primary);
}
.icon-btn:active { transform: scale(.93); }

.emoji-btn:hover { color: #f9a825; }
.mic-btn:hover   { color: var(--wa-green-dark); }

/* Botón de adjunto — sólo visible en móvil */
.attach-mobile-btn {
  display: none;
}

.mic-btn.send-mode {
  background: var(--wa-green);
  color: #fff;
}
.mic-btn.send-mode:hover {
  background: var(--wa-green-dark);
}

/* =============================================
   RESPONSIVE LAYOUTS
   ============================================= */
@media (max-width: 1024px) {
  .charts-row, .bottom-row {
    grid-template-columns: 1fr;
  }
  .nav-sidebar {
    width: 70px;
  }
  .nav-brand-name, .nav-label {
    display: none;
  }
  .nav-brand {
    justify-content: center;
    padding: 16px 0;
  }
}

@media (max-width: 768px) {
  .shell {
    flex-direction: column;
  }

  /* ── Barra de navegación en la parte inferior (thumb-friendly) ── */
  .nav-sidebar {
    order: 2;
    width: 100%;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    flex-direction: row;
    border-right: none;
    border-bottom: none;
    border-top: 1px solid var(--wa-divider);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #ffffff;
    position: relative; /* necesario para que z-index funcione */
    z-index: 200;
    flex-shrink: 0;     /* nunca se comprime aunque el contenido sea grande */
  }
  /* Shell usa dvh en móvil para excluir la barra del navegador */
  .shell {
    height: 100vh;
    height: 100dvh;
    min-height: -webkit-fill-available;
  }
  .view-container {
    order: 1;
  }
  .nav-brand {
    display: none;
  }
  .nav-items {
    flex-direction: row;
    padding: 4px 8px;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    gap: 0;
  }
  .nav-item {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 16px;
    flex: 1;
    min-height: 48px;
    border-radius: 12px;
  }
  /* Re-habilitar etiquetas en la barra inferior */
  .nav-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
  }
  .nav-icon {
    width: 20px;
    height: 20px;
  }
  /* Badge como burbuja sobre el ícono */
  .nav-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 22px);
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    min-width: 14px;
    height: 14px;
    line-height: 12px;
    border-radius: 7px;
  }
  .nav-bottom {
    display: none;
  }

  /* ── Dashboard ── */
  .dashboard-wrapper {
    padding: 16px;
    gap: 16px;
  }
  .dash-title {
    font-size: 20px;
  }
  .chart-container {
    height: 200px;
  }

  /* ── WhatsApp: sidebar y chat-window como overlays deslizantes ── */
  .sidebar {
    width: 100%;
    min-width: 100%;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 20;
    border-right: none;
    transform: translateX(0);
    transition: transform 0.28s cubic-bezier(.4, 0, .2, 1);
  }
  .sidebar.hidden-mobile {
    transform: translateX(-100%);
  }
  .chat-window {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 15;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(.4, 0, .2, 1);
  }
  .chat-window.visible-mobile {
    transform: translateX(0);
  }
  .back-btn         { display: flex; }
  .messages-area    { padding: 12px 10px; }
  .bubble           { max-width: 85%; }
  .attach-mobile-btn { display: flex; }

  /* ── Login: ocultar hero, mostrar solo formulario ── */
  .login-hero { display: none; }
  .login-panel { flex: 1; width: 100%; }
  .login-panel-inner { padding: 40px 24px; }

  /* ── Dashboard: prevenir overflow horizontal ── */
  .view-container  { overflow-x: hidden; }
  .dashboard-wrapper { overflow-x: hidden; }

  /* ── KPI grid: columna única ── */
  .kpi-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* ── Subtítulo largo: que no desborde ── */
  .dash-subtitle {
    white-space: normal;
    word-break: break-word;
    font-size: 12px;
    line-height: 1.5;
  }

  /* ── Toggle KPI: ancho completo, toque fácil ── */
  .kpi-toggle-group {
    width: 100%;
    justify-content: stretch;
  }
  .kpi-toggle-group .chart-toggle-btn {
    flex: 1;
    text-align: center;
  }

  /* ── Todos los botones toggle: mínimo 44px alto ── */
  .chart-toggle-btn {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 13px;
  }

  /* ── Gráfica: header apilado si no cabe ── */
  .chart-header {
    flex-wrap: wrap;
    gap: 10px;
  }
  .chart-toggle-group {
    flex-shrink: 0;
    align-self: flex-start;
  }

  /* ── Settings: sin max-width fijo ── */
  .settings-card   { max-width: 100%; }
  .settings-input  { max-width: 100%; width: 100%; }
  .settings-wrapper { padding: 16px; }
  .settings-save-btn,
  .settings-logout-btn { width: 100%; justify-content: center; }
}

/* =============================================
   SETTINGS VIEW
   ============================================= */
.settings-wrapper {
  flex: 1;
  overflow-y: auto;
  background: var(--dash-bg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-section-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.settings-card {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(226, 232, 240, 0.7);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 560px;
}

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

.settings-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.settings-value {
  font-size: 14px;
  color: var(--text-dark);
  font-weight: 500;
}

.settings-input {
  height: 42px;
  border: 1.5px solid var(--wa-divider);
  border-radius: 10px;
  padding: 0 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-dark);
  outline: none;
  background: #fff;
  transition: border-color 0.2s;
  max-width: 400px;
}
.settings-input:focus { border-color: var(--wa-green); }

.settings-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background: #075E54;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  align-self: flex-start;
}
.settings-save-btn:hover { background: #054d44; }

.settings-logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: #fff;
  color: #e03131;
  border: 1.5px solid #fca5a5;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  align-self: flex-start;
}
.settings-logout-btn:hover { background: #fff5f5; border-color: #e03131; }

/* =============================================
   EDIT CONTACT NAME
   ============================================= */
.chat-name-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
}

.edit-name-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--wa-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  line-height: 0;
  flex-shrink: 0;
}
.edit-name-btn:hover { color: var(--wa-green-dark); background: rgba(0,0,0,.06); }

.name-edit-input {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--wa-text-primary);
  border: none;
  border-bottom: 2px solid var(--wa-green);
  outline: none;
  background: transparent;
  width: 200px;
  font-family: inherit;
  padding: 0;
  line-height: 1.2;
}

/* ── Teléfonos pequeños (≤ 480 px) ── */
@media (max-width: 480px) {
  .dashboard-wrapper {
    padding: 12px;
    gap: 14px;
  }
  .dash-title {
    font-size: 18px;
  }
  .dash-subtitle {
    font-size: 12px;
  }
  .kpi-card {
    padding: 14px;
    gap: 8px;
  }
  .kpi-value {
    font-size: 20px;
  }
  .kpi-title {
    font-size: 10.5px;
  }
  .chart-card,
  .bottom-card {
    padding: 16px;
    gap: 14px;
  }
  .chart-title,
  .bottom-card-title {
    font-size: 14px;
  }
  .login-panel-title {
    font-size: 22px;
  }
  .input-area {
    padding: 6px 10px;
    gap: 6px;
  }
  .message-input {
    font-size: 14px;
  }
  .dash-title {
    font-size: 17px;
  }
  .kpi-value {
    font-size: 22px;
  }
  .chart-toggle-btn {
    min-height: 44px;
    font-size: 12px;
    padding: 10px 12px;
  }
}

/* ── Panel de emojis (flotante sobre el composer) ── */
.input-area { position: relative; }

.emoji-panel {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 8px;
  z-index: 50;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}

.emoji-panel[hidden] { display: none; }

.emoji-panel emoji-picker {
  --background: #fff;
  --border-color: #e2e8f0;
  --indicator-color: #0F5132;
  --num-columns: 8;
  height: 340px;
}

@media (max-width: 640px) {
  .emoji-panel { left: 4px; right: 4px; }
  .emoji-panel emoji-picker { width: 100%; height: 300px; }
}
/* ══ Multimedia en las burbujas ══════════════════════════ */

.bubble-media { padding: 5px 6px 5px 6px; max-width: 320px; }

.media-cargando,
.media-error {
  font-size: 12.5px;
  color: var(--wa-text-secondary, #667781);
  margin: 6px 8px;
  font-style: italic;
}
.media-error { color: #b91c1c; }

/* ── Imagen ── */
.media-img-link { display: block; line-height: 0; }
.media-img {
  display: block;
  width: 100%;
  max-width: 308px;
  max-height: 340px;
  object-fit: cover;
  border-radius: 7px;
  cursor: zoom-in;
}

/* ── Video ── */
.media-video {
  display: block;
  width: 100%;
  max-width: 308px;
  border-radius: 7px;
}

/* ── Audio ── */
.media-audio {
  display: block;
  width: 280px;
  max-width: 100%;
  height: 40px;
  margin: 2px 0;
}

/* Transcripcion de Whisper, bajo el reproductor */
.media-transcripcion {
  margin: 6px 4px 2px;
  padding-left: 8px;
  border-left: 2px solid rgba(0, 0, 0, .12);
  font-size: 12.5px;
  font-style: italic;
  color: #667781;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Documento ── */
.media-doc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-width: 200px;
  border-radius: 7px;
  background: rgba(0, 0, 0, .04);
  color: inherit;
  text-decoration: none;
}
.media-doc:hover { background: rgba(0, 0, 0, .07); }
.media-doc svg { flex: 0 0 auto; opacity: .65; }
.media-doc-nombre {
  font-size: 13px;
  line-height: 1.3;
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ══ Grabacion de audio ══════════════════════════════════ */

.rec-barra {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--wa-panel, #f0f2f5);
  z-index: 20;
}

.rec-punto {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ef4444;
  flex: 0 0 auto;
  animation: rec-latido 1.3s ease-in-out infinite;
}

@keyframes rec-latido {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

.rec-tiempo {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--wa-text-primary, #111b21);
  min-width: 42px;
}

.rec-cancelar {
  margin-left: auto;
  padding: 6px 14px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #ef4444;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.rec-cancelar:hover { background: rgba(239, 68, 68, .1); }

/* Microfono en rojo mientras graba */
.mic-btn.grabando { color: #ef4444 !important; }

/* Clip girando mientras sube */
.icon-btn.cargando { opacity: .5; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .rec-punto { animation: none; }
}

@media (max-width: 640px) {
  .bubble-media { max-width: 78vw; }
  .media-audio  { width: 100%; }
}

/* ══ Multimedia en las burbujas ══════════════════════════ */

.bubble-media { padding: 5px 6px 5px 6px; max-width: 320px; }

.media-cargando,
.media-error {
  font-size: 12.5px;
  color: var(--wa-text-secondary, #667781);
  margin: 6px 8px;
  font-style: italic;
}
.media-error { color: #b91c1c; }

/* ── Imagen ── */
.media-img-link { display: block; line-height: 0; }
.media-img {
  display: block;
  width: 100%;
  max-width: 308px;
  max-height: 340px;
  object-fit: cover;
  border-radius: 7px;
  cursor: zoom-in;
}

/* ── Video ── */
.media-video {
  display: block;
  width: 100%;
  max-width: 308px;
  border-radius: 7px;
}


/* Transcripcion de Whisper, bajo el reproductor */
.media-transcripcion {
  margin: 6px 4px 2px;
  padding-left: 8px;
  border-left: 2px solid rgba(0, 0, 0, .12);
  font-size: 12.5px;
  font-style: italic;
  color: #667781;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Documento ── */
.media-doc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-width: 200px;
  border-radius: 7px;
  background: rgba(0, 0, 0, .04);
  color: inherit;
  text-decoration: none;
}
.media-doc:hover { background: rgba(0, 0, 0, .07); }
.media-doc svg { flex: 0 0 auto; opacity: .65; }
.media-doc-nombre {
  font-size: 13px;
  line-height: 1.3;
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ══ Reproductor de audio estilo WhatsApp ════════════════ */

.wa-audio {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  width: 260px;
  max-width: 100%;
  padding: 4px 2px 0;
}

.wa-audio audio { display: none; }

/* ── Boton play/pausa ── */
.wa-audio-btn {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: #54656f;
  cursor: pointer;
  transition: background .12s;
}
.wa-audio-btn:hover  { background: rgba(0, 0, 0, .06); }
.wa-audio-btn:active { background: rgba(0, 0, 0, .1); }
.wa-audio-btn:disabled { opacity: .4; cursor: default; }

/* ── Forma de onda ── */
.wa-audio-onda {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 26px;
  cursor: pointer;
  touch-action: none;
  outline: none;
}
.wa-audio-onda:focus-visible { box-shadow: 0 0 0 2px rgba(15, 81, 50, .35); border-radius: 3px; }

.wa-barra {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 2px;
  background: #c7ced3;
  transition: background .08s linear;
}
.wa-barra.sonada { background: #0F5132; }

/* En burbuja saliente (verde) el contraste cambia */
.wa-audio-out .wa-barra        { background: #a7c4b1; }
.wa-audio-out .wa-barra.sonada { background: #0b3d26; }
.wa-audio-out .wa-audio-btn    { color: #3b6b52; }

/* ── Pie: tiempo y velocidad ── */
.wa-audio-pie {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 18px;
  margin-top: 1px;
}

.wa-audio-tiempo {
  font-size: 11px;
  color: #667781;
  font-variant-numeric: tabular-nums;
}

.wa-audio-vel {
  border: 0;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .07);
  color: #54656f;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.5;
}
.wa-audio-vel:hover { background: rgba(0, 0, 0, .12); }

.wa-audio-error .wa-audio-tiempo { color: #b91c1c; }

@media (max-width: 640px) {
  .wa-audio { width: 100%; min-width: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-barra { transition: none; }
}

/* ══ Grabacion de audio ══════════════════════════════════ */

.rec-barra {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--wa-panel, #f0f2f5);
  z-index: 20;
}

.rec-punto {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ef4444;
  flex: 0 0 auto;
  animation: rec-latido 1.3s ease-in-out infinite;
}

@keyframes rec-latido {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

.rec-tiempo {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--wa-text-primary, #111b21);
  min-width: 42px;
}

.rec-cancelar {
  margin-left: auto;
  padding: 6px 14px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #ef4444;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.rec-cancelar:hover { background: rgba(239, 68, 68, .1); }

/* Microfono en rojo mientras graba */
.mic-btn.grabando { color: #ef4444 !important; }

/* Clip girando mientras sube */
.icon-btn.cargando { opacity: .5; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .rec-punto { animation: none; }
}

@media (max-width: 640px) {
  .bubble-media { max-width: 78vw; }
}


/* =============================================
   TEMA OSCURO  (activado con <html data-theme="dark">)
   Redefine las variables y sobreescribe los pocos
   colores hardcoded de los contenedores estructurales.
   ============================================= */
[data-theme="dark"] {
  --wa-incoming-bg:  #202C33;
  --wa-bg-chat:      #0B141A;
  --wa-sidebar-bg:   #111B21;
  --wa-header-bg:    #202C33;
  --wa-search-bg:    #202C33;
  --wa-divider:      #2A3942;
  --wa-text-primary: #E9EDEF;
  --wa-text-secondary:#8696A0;
  --wa-text-light:   #667781;
  --wa-icon:         #AEBAC1;
  --wa-active-item:  #2A3942;
  --wa-hover-item:   #202C33;

  --dash-bg:         #0B141A;
  --card-bg:         #111B21;
  --text-dark:       #E9EDEF;
  --text-muted:      #8696A0;
  --card-shadow:     0 1px 3px 0 rgba(0,0,0,0.4), 0 1px 2px -1px rgba(0,0,0,0.4);
}

/* Fondos estructurales que estaban hardcoded en blanco */
[data-theme="dark"] .nav-sidebar { background:#111B21; border-right-color:#2A3942; }
[data-theme="dark"] .nav-item.active { background:#2A3942; }
[data-theme="dark"] .nav-item:hover { background:#202C33; }
[data-theme="dark"] .nav-brand-name,
[data-theme="dark"] .nav-label { color:#E9EDEF; }

[data-theme="dark"] .kpi-card,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .card,
[data-theme="dark"] .chat-window,
[data-theme="dark"] .chat-list { background:var(--card-bg); }

[data-theme="dark"] .dash-title,
[data-theme="dark"] .kpi-value,
[data-theme="dark"] .settings-section-title,
[data-theme="dark"] .chat-name,
[data-theme="dark"] .settings-value { color:var(--text-dark); }

[data-theme="dark"] .dash-subtitle,
[data-theme="dark"] .kpi-title,
[data-theme="dark"] .chat-preview,
[data-theme="dark"] .chat-time,
[data-theme="dark"] .settings-label { color:var(--text-muted); }

/* Inputs en oscuro */
[data-theme="dark"] .settings-input,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] textarea {
  background:#202C33; color:#E9EDEF; border-color:#2A3942;
}
[data-theme="dark"] .settings-input::placeholder { color:#667781; }

/* Sub-tabs y badges */
[data-theme="dark"] .sub-tab { color:#8696A0; }
[data-theme="dark"] .sub-tab-activa { color:#E9EDEF; }

/* Burbujas de chat: la entrante usa var; la saliente (verde) se mantiene */
[data-theme="dark"] .bubble.incoming,
[data-theme="dark"] .bubble-media { background:var(--wa-incoming-bg); color:#E9EDEF; }

/* Zona de mensajes */
/* (override de fondo solido eliminado: tapaba el patron de doodles) */

/* Suaviza el cambio */
.shell, .nav-sidebar, .kpi-card, .settings-card, .card, .chat-window,
.chat-list, .bubble, input, textarea { transition: background .2s ease, color .2s ease, border-color .2s ease; }

/* =============================================
   AJUSTES — estilos de los nuevos controles
   ============================================= */
.settings-toggle-row {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 0;
}
.settings-toggle-row + .settings-toggle-row { border-top:1px solid var(--wa-divider); }
.settings-toggle-info { display:flex; flex-direction:column; gap:2px; }
.settings-toggle-title {
  font-weight:600; color:var(--text-dark); font-size:14px;
  display:inline-flex; align-items:center; gap:8px;
}
.settings-toggle-desc  { font-size:12px; color:var(--text-muted); }

/* Icono junto al titulo de cada ajuste — mismo color/estilo (currentColor) */
.settings-ico { color:var(--wa-green-dark); flex:none; }
[data-theme="dark"] .settings-ico { color:#25D366; }

/* Interruptor tipo switch (notificaciones) */
.switch { position:relative; width:46px; height:26px; flex:none; }
.switch input { opacity:0; width:0; height:0; }
.switch .slider {
  position:absolute; inset:0; cursor:pointer; background:#cbd5e1;
  border-radius:26px; transition:.2s;
}
.switch .slider::before {
  content:""; position:absolute; height:20px; width:20px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:.2s;
}
.switch input:checked + .slider { background:var(--wa-green-dark); }
.switch input:checked + .slider::before { transform:translateX(20px); }
[data-theme="dark"] .switch .slider { background:#3b4a54; }

/* Selector (idioma) */
.settings-select {
  padding:8px 12px; border-radius:8px; border:1px solid var(--wa-divider);
  background:var(--card-bg); color:var(--text-dark); font-size:14px; cursor:pointer;
}

/* ── Theme switch: sol / luna / auto ── */
.theme-switch {
  display:inline-flex; gap:2px; padding:3px; border-radius:10px;
  background:var(--wa-search-bg); border:1px solid var(--wa-divider); flex:none;
}
.theme-opt {
  display:flex; align-items:center; justify-content:center;
  width:34px; height:30px; border:none; border-radius:8px; cursor:pointer;
  background:transparent; color:var(--text-muted); transition:.15s;
}
.theme-opt:hover { color:var(--text-dark); }
.theme-opt.activo {
  background:var(--card-bg); color:var(--wa-green-dark);
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
[data-theme="dark"] .theme-opt.activo { color:#25D366; box-shadow:0 1px 3px rgba(0,0,0,.4); }

/* ── Botón grande de IA (activar / desactivar) ── */
.ia-big-btn {
  display:flex; align-items:center; gap:14px; width:100%; margin-top:6px;
  padding:16px 18px; border-radius:14px; cursor:pointer; text-align:left;
  border:1.5px solid; transition:.18s; font-family:inherit;
  /* Estado por defecto = IA ACTIVA (verde) */
  background:linear-gradient(135deg, rgba(18,140,126,.08), rgba(37,211,102,.06));
  border-color:rgba(18,140,126,.35); color:var(--wa-green-dark);
}
.ia-big-btn:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.08); }
.ia-big-icon {
  flex:none; width:52px; height:52px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(18,140,126,.12); color:var(--wa-green-dark);
}
.ia-big-text { display:flex; flex-direction:column; gap:3px; }
.ia-big-title { font-weight:700; font-size:16px; }
.ia-big-sub   { font-size:12.5px; opacity:.85; font-weight:500; }

/* Estado IA APAGADA (rojo + warning) */
.ia-big-btn.ia-off {
  background:linear-gradient(135deg, rgba(224,49,49,.10), rgba(240,180,20,.08));
  border-color:rgba(224,49,49,.45); color:#c0392b;
}
.ia-big-btn.ia-off .ia-big-icon { background:rgba(224,49,49,.14); color:#e03131; }

/* Modo oscuro del botón */
[data-theme="dark"] .ia-big-btn {
  background:linear-gradient(135deg, rgba(37,211,102,.10), rgba(18,140,126,.06));
  border-color:rgba(37,211,102,.30); color:#63e6be;
}
[data-theme="dark"] .ia-big-btn .ia-big-icon { background:rgba(37,211,102,.14); color:#63e6be; }
[data-theme="dark"] .ia-big-btn.ia-off {
  background:linear-gradient(135deg, rgba(255,135,135,.12), rgba(249,212,35,.07));
  border-color:rgba(255,135,135,.35); color:#ff8787;
}
[data-theme="dark"] .ia-big-btn.ia-off .ia-big-icon { background:rgba(255,135,135,.14); color:#ff8787; }

/* pulso sutil del warning cuando esta apagada */
.ia-big-btn.ia-off .ia-big-icon svg { animation:iaWarnPulse 1.6s ease-in-out infinite; }
@keyframes iaWarnPulse { 0%,100%{opacity:1} 50%{opacity:.55} }

/* ── Tema oscuro: lagunas adicionales (search focus, burbujas) ── */
[data-theme="dark"] .search-bar input:focus { background:#2A3942; }
[data-theme="dark"] .search-bar input { background:var(--wa-search-bg); color:var(--wa-text-primary); }
[data-theme="dark"] .bubble.incoming,
[data-theme="dark"] .message.incoming .bubble { background:#202C33; color:#E9EDEF; }
[data-theme="dark"] .chat-header,
[data-theme="dark"] .chat-window-header { background:var(--wa-header-bg); color:var(--text-dark); }
[data-theme="dark"] .input-area { background:var(--wa-header-bg); }
[data-theme="dark"] .message-input,
[data-theme="dark"] #message-input { background:#2A3942; color:#E9EDEF; }

/* ============================================================
   TEMA OSCURO — Pedidos y Sanidad (tablas)
   pedidos.css usa variables bajo #pedidos-root: solo hay que
   redefinirlas. Sanidad se cubre con selectores genericos.
   ============================================================ */
[data-theme="dark"] #pedidos-root,
[data-theme="dark"] #encargos-root,
[data-theme="dark"] #confirmar-root,
[data-theme="dark"] #sanidad-root {
  --ped-borde: #2A3942;
  --ped-fondo: #111B21;
  --ped-fondo-suave: #1A2730;
  --ped-texto: #E9EDEF;
  --ped-suave: #8696A0;
  --ped-primario: #2f81f7;
  --ped-primario-osc: #1f6feb;
  --ped-sucio: #4a3f14;
  --ped-sucio-borde: #d9a800;
}
/* filas alternas hardcoded */
[data-theme="dark"] #pedidos-root .ped-tabla tbody tr:nth-child(even) td,
[data-theme="dark"] #pedidos-root .ped-tabla tbody tr:nth-child(even) th { background:#161f27; }
[data-theme="dark"] #pedidos-root .ped-celda input { color:var(--ped-texto); }
[data-theme="dark"] #pedidos-root .ped-celda input:disabled { color:var(--ped-suave); }

/* ── Sanidad: usa #sanidad-root con las variables --ped-* (ya redefinidas
   arriba), asi que la tabla y controles se adaptan solos. Solo faltan los
   colores hardcoded de las pills de estado y la celda "sucia". ── */
[data-theme="dark"] #sanidad-root .san-ok   { background:#0f2e1c; color:#63e6be; }
[data-theme="dark"] #sanidad-root .san-err  { background:#3a1414; color:#ff8787; }
[data-theme="dark"] #sanidad-root .san-pend { background:#1f2730; color:#9aa5b1; }
[data-theme="dark"] #sanidad-root .san-sucio .san-input { background:#16283f; border-color:var(--ped-primario); }
[data-theme="dark"] #sanidad-root .san-falta { color:#ff8787; }
[data-theme="dark"] #sanidad-root tbody tr:hover { background:var(--ped-fondo-suave); }

/* ── Inputs de fecha / date pickers y buscadores en oscuro ── */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="number"] {
  background:#202C33; color:#E9EDEF; border-color:#2A3942;
}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter:invert(1) opacity(.7); }

/* ── Sub-tabs (Pedidos diarios / Encargos / Envios / Despachos) ── */
[data-theme="dark"] .sub-tabs { border-color:#2A3942; }

/* ── Botones ghost/reenviar/actualizar que quedan claros ── */
[data-theme="dark"] .san-btn,
[data-theme="dark"] .btn-reenviar,
[data-theme="dark"] .btn-ver-pdf,
[data-theme="dark"] button.actualizar,
[data-theme="dark"] .ped-btn-ghost {
  background:#202C33; color:#E9EDEF; border-color:#2A3942;
}

/* ============================================================
   TEMA OSCURO — WhatsApp: clonar el fondo real de WhatsApp Dark
   (verde-oscuro #0B141A + patron de doodles tenue).
   Reemplaza las imagenes claras (fondo-chat.jpeg / bg_chat.png).
   ============================================================ */
[data-theme="dark"] .chat-window { background-color:#0B141A; }

/* La imagen clara de messages-area se oculta; ponemos fondo oscuro solido.
   El patron va en ::before del chat-window, atenuado. */


/* Patron de doodles sobre fondo oscuro: el mismo PNG pero muy tenue e
   invertido para que los trazos claros se vean sobre el fondo negro,
   igual que en WhatsApp oscuro. */


/* Header y barra de input del chat en oscuro */
[data-theme="dark"] .chat-header { background:#202C33; border-bottom-color:#2A3942; }
[data-theme="dark"] .chat-header-name,
[data-theme="dark"] .chat-header-title { color:#E9EDEF; }
[data-theme="dark"] .chat-header-status,
[data-theme="dark"] .chat-header-sub { color:#8696A0; }

/* Burbuja entrante (gris oscuro) y saliente (verde WhatsApp dark) */
[data-theme="dark"] .bubble.incoming,
[data-theme="dark"] .message.incoming .bubble,
[data-theme="dark"] .bubble-media { background:#202C33; color:#E9EDEF; }
[data-theme="dark"] .bubble.outgoing,
[data-theme="dark"] .message.outgoing .bubble { background:#005C4B; color:#E9EDEF; }

/* Pildora separadora de dia (AYER / HOY) */
[data-theme="dark"] .day-separator,
[data-theme="dark"] .day-pill { background:#182229; color:#8696A0; }

/* Barra inferior de "Agente IA activado / input" */
[data-theme="dark"] .input-area,
[data-theme="dark"] .takeover-bar { background:#202C33; border-top-color:#2A3942; color:#8696A0; }

/* ============================================================
   TEMA OSCURO — Encargos (sub-vista de Pedidos)
   Usa las clases ped-* (comparte pedidos.css) o su propio marco.
   Cubrimos avisos y tarjetas de "no hay Word".
   ============================================================ */
[data-theme="dark"] #encargos-root,
[data-theme="dark"] .enc-marco,
[data-theme="dark"] .enc-aviso,
[data-theme="dark"] .enc-vacio,
[data-theme="dark"] .ped-aviso,
[data-theme="dark"] .ped-vacio,
[data-theme="dark"] .ped-cargando {
  background:var(--card-bg) !important;
  color:var(--text-dark);
  border-color:#2A3942 !important;
}
/* Textos secundarios dentro de esos avisos */
[data-theme="dark"] .enc-vacio,
[data-theme="dark"] .ped-vacio { color:var(--text-muted); }

/* ============================================================
   TEMA OSCURO — Dashboard: toggles y badges de KPI
   ============================================================ */
/* Toggles Diario/Semanal/Mensual y Semanal/Mensual de la grafica */
[data-theme="dark"] .chart-toggle-group,
[data-theme="dark"] .kpi-toggle-group { background:#202C33; }
[data-theme="dark"] .chart-toggle-btn { color:#8696A0; }
[data-theme="dark"] .chart-toggle-btn:hover { color:#E9EDEF; }
[data-theme="dark"] .chart-toggle-btn.active {
  background:#0B141A; color:#25D366; box-shadow:0 1px 4px rgba(0,0,0,.4);
}

/* Iconos (badges) de las KPI cards: fondos claros -> versiones oscuras */
[data-theme="dark"] .badge-green  { background:rgba(9,146,104,.18);  color:#63e6be; }
[data-theme="dark"] .badge-blue   { background:rgba(28,126,214,.18); color:#74c0fc; }
[data-theme="dark"] .badge-teal   { background:rgba(12,166,120,.18); color:#63e6be; }
[data-theme="dark"] .badge-purple { background:rgba(112,72,232,.18); color:#b197fc; }
[data-theme="dark"] .badge-orange { background:rgba(245,159,0,.18);  color:#ffd43b; }
[data-theme="dark"] .badge-red    { background:rgba(240,62,62,.18);  color:#ff8787; }

/* Trend pill si aparece */
[data-theme="dark"] .trend-badge-pill { background:#202C33; color:#8696A0; }

/* ── WhatsApp oscuro: fondo negro con patron de doodles (como la app real) ── */
[data-theme="dark"] .chat-window { background-color:#0B141A; }
[data-theme="dark"] .chat-window::before {
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNjAiIGhlaWdodD0iMjYwIiB2aWV3Qm94PSIwIDAgMjYwIDI2MCI+CjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg2OTZhMCIgc3Ryb2tlLXdpZHRoPSIxLjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgb3BhY2l0eT0iMC42Ij4KPGNpcmNsZSBjeD0iMjgiIGN5PSIyNiIgcj0iOCIvPjxwYXRoIGQ9Ik0yMiAyNmgxMk0yOCAyMHYxMiIvPgo8cGF0aCBkPSJNNzAgMjBjNS01IDEyLTUgMTcgMHM1IDEyIDAgMTctMTIgNS0xNyAwIi8+CjxwYXRoIGQ9Ik0xMjAgMzRsMTItNyAxMiA3LTEyIDd6Ii8+CjxjaXJjbGUgY3g9IjE4MCIgY3k9IjI4IiByPSI3Ii8+PHBhdGggZD0iTTE3NiAyOGg4Ii8+CjxwYXRoIGQ9Ik0yMTUgMjJxNy05IDE1IDAiLz4KPHBhdGggZD0iTTIzNSA1NWMtNiAwLTkgNS02IDkiLz4KPHBhdGggZD0iTTIwIDcwcTktMTIgMTkgMHQxOSAwIi8+CjxyZWN0IHg9Ijg4IiB5PSI2MiIgd2lkdGg9IjIyIiBoZWlnaHQ9IjE3IiByeD0iMyIvPjxwYXRoIGQ9Ik04OCA2OGgyMiIvPgo8cGF0aCBkPSJNMTUwIDYwbC04IDE3aDE2eiIvPgo8Y2lyY2xlIGN4PSIyMDAiIGN5PSI3MiIgcj0iOCIvPjxwYXRoIGQ9Ik0xOTcgNzJsMiAzIDUtNSIvPgo8cGF0aCBkPSJNMjM4IDkwbC02IDEyIi8+CjxwYXRoIGQ9Ik0yOCAxMThjMC03IDctMTAgMTItNyA1LTMgMTIgMCAxMiA3IDAgNy0xMiAxNC0xMiAxNHMtMTItNy0xMi0xNHoiLz4KPHBhdGggZD0iTTkyIDEwOGgyMHYxOGgtMjB6Ii8+PHBhdGggZD0iTTkyIDExNWgyMCIvPgo8Y2lyY2xlIGN4PSIxNTgiIGN5PSIxMTgiIHI9IjgiLz48cGF0aCBkPSJNMTU4IDExMnYxMk0xNTIgMTE4aDEyIi8+CjxwYXRoIGQ9Ik0xOTggMTA4bDE1IDE1TTIxMyAxMDhsLTE1IDE1Ii8+CjxwYXRoIGQ9Ik0yMzUgMTI4cTYgNiAwIDEyIi8+CjxwYXRoIGQ9Ik0yMiAxNjhsOC0xMSA4IDExIi8+PHBhdGggZD0iTTMwIDE1N3YyMCIvPgo8Y2lyY2xlIGN4PSI5NiIgY3k9IjE3MiIgcj0iOCIvPgo8cGF0aCBkPSJNMTQ1IDE2MGgyMGwtNCAxN2gtMTN6Ii8+CjxwYXRoIGQ9Ik0yMDUgMTY1cTctOCAxNCAwIi8+CjxjaXJjbGUgY3g9IjI0MCIgY3k9IjE3NSIgcj0iNiIvPgo8cGF0aCBkPSJNMjggMjE1cTYgNiAwIDEyIi8+CjxwYXRoIGQ9Ik03MCAyMTBsMTQtNiAzIDE0LTE0IDN6Ii8+CjxjaXJjbGUgY3g9IjEzMCIgY3k9IjIyMCIgcj0iOCIvPjxwYXRoIGQ9Ik0xMjYgMjIwbDMgMyA1LTYiLz4KPHBhdGggZD0iTTE3NSAyMDhoMjB2MThoLTIweiIvPjxwYXRoIGQ9Ik0xNzUgMjE1aDIwIi8+CjxwYXRoIGQ9Ik0yMjUgMjEycTgtOSAxNiAwIi8+CjxwYXRoIGQ9Ik01NSA1NXE1IDUgMCAxMCIvPjxwYXRoIGQ9Ik0xNjUgMjM1cTUgNSAwIDEwIi8+CjxjaXJjbGUgY3g9IjEzMCIgY3k9IjEyOCIgcj0iMi41Ii8+CjxwYXRoIGQ9Ik0yNDUgMjQwcS02LTYgMC0xMiIvPgo8L2c+PC9zdmc+");
  background-repeat:repeat;
  background-size:260px 260px;
  opacity:0.6;
  filter:none;
}
[data-theme="dark"] .messages-area {
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNjAiIGhlaWdodD0iMjYwIiB2aWV3Qm94PSIwIDAgMjYwIDI2MCI+CjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg2OTZhMCIgc3Ryb2tlLXdpZHRoPSIxLjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgb3BhY2l0eT0iMC42Ij4KPGNpcmNsZSBjeD0iMjgiIGN5PSIyNiIgcj0iOCIvPjxwYXRoIGQ9Ik0yMiAyNmgxMk0yOCAyMHYxMiIvPgo8cGF0aCBkPSJNNzAgMjBjNS01IDEyLTUgMTcgMHM1IDEyIDAgMTctMTIgNS0xNyAwIi8+CjxwYXRoIGQ9Ik0xMjAgMzRsMTItNyAxMiA3LTEyIDd6Ii8+CjxjaXJjbGUgY3g9IjE4MCIgY3k9IjI4IiByPSI3Ii8+PHBhdGggZD0iTTE3NiAyOGg4Ii8+CjxwYXRoIGQ9Ik0yMTUgMjJxNy05IDE1IDAiLz4KPHBhdGggZD0iTTIzNSA1NWMtNiAwLTkgNS02IDkiLz4KPHBhdGggZD0iTTIwIDcwcTktMTIgMTkgMHQxOSAwIi8+CjxyZWN0IHg9Ijg4IiB5PSI2MiIgd2lkdGg9IjIyIiBoZWlnaHQ9IjE3IiByeD0iMyIvPjxwYXRoIGQ9Ik04OCA2OGgyMiIvPgo8cGF0aCBkPSJNMTUwIDYwbC04IDE3aDE2eiIvPgo8Y2lyY2xlIGN4PSIyMDAiIGN5PSI3MiIgcj0iOCIvPjxwYXRoIGQ9Ik0xOTcgNzJsMiAzIDUtNSIvPgo8cGF0aCBkPSJNMjM4IDkwbC02IDEyIi8+CjxwYXRoIGQ9Ik0yOCAxMThjMC03IDctMTAgMTItNyA1LTMgMTIgMCAxMiA3IDAgNy0xMiAxNC0xMiAxNHMtMTItNy0xMi0xNHoiLz4KPHBhdGggZD0iTTkyIDEwOGgyMHYxOGgtMjB6Ii8+PHBhdGggZD0iTTkyIDExNWgyMCIvPgo8Y2lyY2xlIGN4PSIxNTgiIGN5PSIxMTgiIHI9IjgiLz48cGF0aCBkPSJNMTU4IDExMnYxMk0xNTIgMTE4aDEyIi8+CjxwYXRoIGQ9Ik0xOTggMTA4bDE1IDE1TTIxMyAxMDhsLTE1IDE1Ii8+CjxwYXRoIGQ9Ik0yMzUgMTI4cTYgNiAwIDEyIi8+CjxwYXRoIGQ9Ik0yMiAxNjhsOC0xMSA4IDExIi8+PHBhdGggZD0iTTMwIDE1N3YyMCIvPgo8Y2lyY2xlIGN4PSI5NiIgY3k9IjE3MiIgcj0iOCIvPgo8cGF0aCBkPSJNMTQ1IDE2MGgyMGwtNCAxN2gtMTN6Ii8+CjxwYXRoIGQ9Ik0yMDUgMTY1cTctOCAxNCAwIi8+CjxjaXJjbGUgY3g9IjI0MCIgY3k9IjE3NSIgcj0iNiIvPgo8cGF0aCBkPSJNMjggMjE1cTYgNiAwIDEyIi8+CjxwYXRoIGQ9Ik03MCAyMTBsMTQtNiAzIDE0LTE0IDN6Ii8+CjxjaXJjbGUgY3g9IjEzMCIgY3k9IjIyMCIgcj0iOCIvPjxwYXRoIGQ9Ik0xMjYgMjIwbDMgMyA1LTYiLz4KPHBhdGggZD0iTTE3NSAyMDhoMjB2MThoLTIweiIvPjxwYXRoIGQ9Ik0xNzUgMjE1aDIwIi8+CjxwYXRoIGQ9Ik0yMjUgMjEycTgtOSAxNiAwIi8+CjxwYXRoIGQ9Ik01NSA1NXE1IDUgMCAxMCIvPjxwYXRoIGQ9Ik0xNjUgMjM1cTUgNSAwIDEwIi8+CjxjaXJjbGUgY3g9IjEzMCIgY3k9IjEyOCIgcj0iMi41Ii8+CjxwYXRoIGQ9Ik0yNDUgMjQwcS02LTYgMC0xMiIvPgo8L2c+PC9zdmc+") !important;
  background-repeat:repeat;
  background-size:260px 260px;
  background-color:#0B141A !important;
}

/* ── Sanidad → Despachos: inputs y contenedores en oscuro (refuerzo) ── */
[data-theme="dark"] #sanidad-root .san-input,
[data-theme="dark"] #sanidad-root input.san-input,
[data-theme="dark"] #sanidad-root input[type="text"] {
  background:#202C33 !important; color:#E9EDEF !important; border-color:#2A3942 !important;
}
[data-theme="dark"] #sanidad-root .san-input::placeholder { color:#667781 !important; }
[data-theme="dark"] #sanidad-root .san-marco,
[data-theme="dark"] #sanidad-root .san-barra { background:var(--card-bg) !important; border-color:#2A3942 !important; }
[data-theme="dark"] #sanidad-root .san-desp,
[data-theme="dark"] #sanidad-root .san-tel { color:#E9EDEF !important; }
[data-theme="dark"] #sanidad-root .san-tab { color:#8696A0; background:transparent; }
[data-theme="dark"] #sanidad-root .san-tab-activa { color:#fff; }


/* ═══════════════ SECCION PRODUCTOS ═══════════════ */
.prod-barra { display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
#prod-buscar {
  flex:1; min-width:200px; padding:10px 14px; border-radius:10px;
  border:1px solid var(--wa-border, #d8dde1); font-size:14px;
  background:var(--wa-panel-bg, #fff); color:inherit;
}
.prod-btn-nuevo {
  padding:10px 18px; border:none; border-radius:10px; cursor:pointer;
  background:#128C7E; color:#fff; font-weight:600; font-size:14px;
}
.prod-btn-nuevo:hover { background:#0f7a6d; }

.prod-chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.prod-chip {
  padding:7px 14px; border-radius:999px; cursor:pointer; font-size:13px;
  border:1px solid var(--wa-border, #d8dde1); background:transparent; color:inherit;
}
.prod-chip span { opacity:.6; margin-left:4px; }
.prod-chip.activa { background:#128C7E; color:#fff; border-color:#128C7E; }

.prod-lista { list-style:none; margin:0; padding:0; }
.prod-fila {
  display:flex; align-items:center; gap:12px; padding:9px 12px;
  border-bottom:1px solid var(--wa-border, #eceff1);
}
.prod-fila:hover { background:rgba(128,128,128,.06); }
.prod-pos { width:38px; text-align:right; opacity:.45; font-size:12px; font-variant-numeric:tabular-nums; }
.prod-img {
  width:36px; height:36px; border-radius:8px; flex:none; font-size:19px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(128,128,128,.1); overflow:hidden;
}
.prod-img img { width:100%; height:100%; object-fit:cover; }
.prod-nombre { flex:1; font-size:14px; }
.prod-cat { font-size:12px; opacity:.55; white-space:nowrap; }
.prod-acciones { display:flex; gap:2px; }
.prod-acciones button {
  border:none; background:none; cursor:pointer; font-size:14px;
  padding:5px 7px; border-radius:6px; opacity:.65;
}
.prod-acciones button:hover:not(:disabled) { background:rgba(128,128,128,.18); opacity:1; }
.prod-acciones button:disabled { opacity:.2; cursor:default; }
.prod-vacio, .prod-pie { text-align:center; opacity:.55; font-size:13px; padding:18px 0; }

.prod-modal {
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.prod-modal-caja {
  background:var(--wa-panel-bg, #fff); color:inherit; border-radius:14px;
  padding:22px; width:100%; max-width:420px; box-shadow:0 12px 40px rgba(0,0,0,.3);
}
.prod-modal-caja h3 { margin:0 0 16px; font-size:17px; }
.prod-modal-caja label { display:block; margin-bottom:13px; font-size:13px; opacity:.75; }
.prod-modal-caja input, .prod-modal-caja select {
  width:100%; margin-top:5px; padding:9px 11px; font-size:14px;
  border:1px solid var(--wa-border, #d8dde1); border-radius:8px;
  background:var(--wa-input-bg, #fff); color:inherit;
}
.prod-modal-btns { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.prod-modal-btns button {
  padding:9px 18px; border-radius:8px; cursor:pointer; font-size:14px;
  border:1px solid var(--wa-border, #d8dde1); background:transparent; color:inherit;
}
.prod-modal-btns .primario { background:#128C7E; color:#fff; border-color:#128C7E; }

@media (max-width: 640px) {
  .prod-cat { display:none; }
  .prod-pos { width:28px; }
}

/* ══════════════════════════════════════════════════════════════════════
   DESPACHOS DE PRUEBAS  ·  Pedidos
   Bandas de peligro para los despachos que NO son clientes reales
   (ver TIENDAS_PRUEBA en pedidos.js). El nombre va en una pastilla
   blanca porque sobre las bandas no hay contraste que valga.
   Solo se aplica a los nombres de esa lista; el resto no se toca.
   ══════════════════════════════════════════════════════════════════════ */

.ped-prueba {
  background-image: repeating-linear-gradient(45deg, #111 0 9px, #f4c400 9px 18px) !important;
  background-color: #f4c400 !important;
  border-color: #111 !important;
}

.ped-prueba-txt {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff; color: #111; font-weight: 600;
  padding: 2px 7px; border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}

/* Triangulo de aviso en SVG: sin fichero externo que se pueda perder. */
.ped-prueba-txt::before {
  content: ""; width: 13px; height: 13px; flex: 0 0 13px;
  background-repeat: no-repeat; background-size: contain; background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2 1.9 20.8h20.2L12 3.2z' fill='%23f4c400' stroke='%23111' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 9.4v5.1' stroke='%23111' stroke-width='2.1' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.6' r='1.25' fill='%23111'/%3E%3C/svg%3E");
}

/* En tema oscuro las bandas ya tienen su propio contraste: se mantienen. */
[data-theme="dark"] .ped-prueba-txt { background: #fff; color: #111; }

/* Bandas ATENUADAS: para superficies grandes (la tabla de un despacho de
   pruebas, o su fila en Sanidad). Mismo codigo visual que el chip, pero
   con opacidad baja para que las cifras y los campos se sigan leyendo. */

.ped-prueba-zona,
tr.san-prueba > td,
tr.san-prueba > th {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(17,17,17,.07) 0 11px,
    rgba(244,196,0,.20) 11px 22px
  );
  background-attachment: local;
}

.ped-prueba-zona { border: 2px solid #f4c400; border-radius: 10px; }

/* Los campos editables se dejan opacos: sobre las bandas no se leen. */
.ped-prueba-zona input,
tr.san-prueba input {
  background: var(--wa-input-bg, #fff) !important;
}

[data-theme="dark"] .ped-prueba-zona,
[data-theme="dark"] tr.san-prueba > td,
[data-theme="dark"] tr.san-prueba > th {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,.28) 0 11px,
    rgba(244,196,0,.16) 11px 22px
  );
}