/* =============================================
   BUFALOS HC HUB - Estilos Principales
   Paleta Oficial Bufalos: Rojo #A72020 | Gris #5B585D | Blanco #FFFFFF
   ============================================= */

:root {
  --color-primary: #A72020;
  --color-primary-dark: #8A1A1A;
  --color-primary-light: #C94040;
  --color-secondary: #5B585D;
  --color-secondary-dark: #434147;
  --color-secondary-light: #7A7780;
  --color-snow: #F5F5F5;
  --color-dark: #2B2828;
  --color-gray: #6B7280;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --sidebar-width: 260px;
  --sidebar-width-tablet: 88px;
  --header-height: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

/* ── CONTENCIÓN GLOBAL DE DESBORDAMIENTO ──
   Garantiza que ningún contenido (texto largo, URLs, palabras sin espacios)
   rompa el layout. Las celdas de grids/flex pueden encogerse (min-width:0). */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }
/* Palabras/URLs muy largas no deben empujar el ancho del contenedor.
   IMPORTANTE: usamos solo overflow-wrap (rompe en límites de palabra cuando es
   necesario) y NO word-break:break-word, que partía palabras letra por letra
   (ej. "A-Q-U-Í" en vertical dentro de celdas estrechas). */
p, h1, h2, h3, h4, h5, span, a, div, li, label {
  overflow-wrap: break-word;
}
/* Las celdas de tabla no deben envolver sus encabezados/contenido de forma
   agresiva; si la tabla no cabe, su contenedor hace scroll horizontal. */
.data-table th, .data-table td { overflow-wrap: normal; word-break: normal; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #F0F2F5;
  color: var(--color-dark);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Evitar que los inputs hagan zoom automático en iOS (font-size < 16px) */
@media (max-width: 768px) {
  .form-input, .form-select, .form-textarea,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="search"], input[type="tel"],
  input[type="date"], input[type="time"], textarea, select {
    font-size: 16px !important;
  }
}

/* ─── SCROLLBAR ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 3px; }

/* ─── LOGIN ──────────────────────────────────────────────────────────────── */
#login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #1E1C1C 0%, #2B2828 50%, var(--color-primary-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

#login-page::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(167,32,32,0.2) 0%, transparent 70%);
  top: -100px; right: -100px;
  border-radius: 50%;
}

#login-page::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(91,88,93,0.25) 0%, transparent 70%);
  bottom: -50px; left: -50px;
  border-radius: 50%;
}

.login-card {
  background: white;
  border-radius: 24px;
  padding: 48px 40px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.3);
  position: relative;
  z-index: 10;
}

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

.login-logo img {
  height: 80px;
  margin-bottom: 16px;
}

.login-logo h1 {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-dark);
  letter-spacing: -0.5px;
}

.login-logo p {
  color: var(--color-gray);
  font-size: 14px;
  margin-top: 4px;
}

.kirp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary-dark));
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 8px;
}

/* ─── LAYOUT ──────────────────────────────────────────────────────────────── */
#app-layout {
  display: flex;
  min-height: 100vh;
}

/* ─── SIDEBAR ─────────────────────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-width);
  background: linear-gradient(180deg, #1E1C1C 0%, #2B2828 100%);
  color: white;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 100;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 24px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-logo-icon {
  width: 42px; height: 42px;
  background: var(--color-primary);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  color: white;
  flex-shrink: 0;
}

.sidebar-logo-text h2 {
  font-size: 16px;
  font-weight: 800;
  color: white;
  letter-spacing: -0.3px;
}

.sidebar-logo-text p {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 1px;
}

.sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.nav-section {
  margin-bottom: 24px;
}

.nav-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.3);
  padding: 0 8px;
  margin-bottom: 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
  text-decoration: none;
}

.nav-item:hover {
  background: rgba(255,255,255,0.08);
  color: white;
}

.nav-item.active {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 4px 12px rgba(230,58,46,0.4);
}

.nav-item .nav-icon {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.nav-item .nav-badge {
  margin-left: auto;
  background: var(--color-primary);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.nav-item.active .nav-badge {
  background: rgba(255,255,255,0.3);
}

.sidebar-footer {
  padding: 16px 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
}

.user-info:hover { background: rgba(255,255,255,0.08); }

.user-avatar {
  width: 36px; height: 36px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: white;
  flex-shrink: 0;
}

.user-details { flex: 1; overflow: hidden; }
.user-name { font-size: 13px; font-weight: 600; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11px; color: rgba(255,255,255,0.4); }

/* ─── MAIN CONTENT ────────────────────────────────────────────────────────── */
#main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-width: 0;          /* permite que el contenido se encoja y no desborde */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.3s ease;
}

/* ─── HEADER ──────────────────────────────────────────────────────────────── */
#top-header {
  min-height: var(--header-height);
  height: calc(var(--header-height) + var(--safe-top));
  padding-top: var(--safe-top);
  background: white;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  padding-left: max(24px, var(--safe-left));
  padding-right: max(24px, var(--safe-right));
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.header-title {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* ─── PAGE CONTENT ────────────────────────────────────────────────────────── */
.page-content {
  padding: 24px;
  padding-left: max(24px, var(--safe-left));
  padding-right: max(24px, var(--safe-right));
  flex: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

/* ─── CARDS ───────────────────────────────────────────────────────────────── */
.card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

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

/* ─── STATS CARDS ────────────────────────────────────────────────────────── */
.stat-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border-left: 4px solid var(--color-primary);
  transition: transform 0.2s, box-shadow 0.2s;
}

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

.stat-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1;
}

.stat-label {
  font-size: 13px;
  color: var(--color-gray);
  margin-top: 4px;
  font-weight: 500;
}

.stat-change {
  font-size: 12px;
  font-weight: 600;
  margin-top: 8px;
}

.stat-change.up { color: var(--color-success); }
.stat-change.down { color: var(--color-error); }

/* ─── BUTTONS ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 4px 12px rgba(167,32,32,0.3);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 6px 16px rgba(167,32,32,0.45);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--color-secondary);
  color: white;
  box-shadow: 0 4px 12px rgba(91,88,93,0.3);
}

.btn-secondary:hover {
  background: var(--color-secondary-dark);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn-outline:hover {
  background: var(--color-primary);
  color: white;
}

.btn-ghost {
  background: transparent;
  color: var(--color-gray);
  border: 1px solid #E5E7EB;
}

.btn-ghost:hover {
  background: #F9FAFB;
  color: var(--color-dark);
}

/* Sidebar logout button - dark background needs special treatment */
.btn-logout {
  background: transparent;
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-logout:hover {
  background: rgba(167,32,32,0.25);
  color: rgba(255,255,255,0.9);
  border-color: rgba(167,32,32,0.45);
}

/* Sidebar logo image container */
.sidebar-logo-img {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 14px 24px; font-size: 16px; }
.btn-icon { padding: 10px; min-width: 40px; justify-content: center; }

.btn-kirpai {
  background: linear-gradient(135deg, var(--color-primary), #8A1A1A);
  color: white;
  box-shadow: 0 4px 15px rgba(167,32,32,0.35);
}

.btn-kirpai:hover {
  box-shadow: 0 6px 20px rgba(167,32,32,0.55);
  transform: translateY(-1px);
}

/* ─── FORMS ───────────────────────────────────────────────────────────────── */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 6px;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid #E5E7EB;
  border-radius: 10px;
  font-size: 14px;
  color: var(--color-dark);
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(167,32,32,0.12);
}

.form-textarea { resize: vertical; min-height: 100px; }

/* ─── MODALS ──────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}

.modal {
  background: white;
  border-radius: 20px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0,0,0,0.3);
}

.modal-lg { max-width: 800px; }
.modal-xl { max-width: 1000px; }

.modal-header {
  padding: 24px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-dark);
}

.modal-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #F3F4F6;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray);
  font-size: 16px;
  transition: background 0.2s;
}

.modal-close:hover { background: #E5E7EB; }

.modal-body { padding: 24px; }
.modal-footer {
  padding: 0 24px 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ─── CALENDAR ────────────────────────────────────────────────────────────── */
.calendar-grid {
  display: grid;
  /* minmax(0,1fr) en lugar de 1fr: permite que las columnas se encojan por
     debajo del ancho de su contenido, evitando el desbordamiento horizontal. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 100%;
}

/* Las celdas del calendario deben poder encogerse y contener su contenido. */
.calendar-day { min-width: 0; overflow: hidden; }
.calendar-post-chip { max-width: 100%; }
/* Contenedor de chips: en escritorio se apilan verticalmente (ancho completo). */
.calendar-day-chips {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-width: 0;
}

.calendar-day-header {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-gray);
  text-transform: uppercase;
  padding: 8px 0;
}

.calendar-day {
  min-height: 100px;
  background: white;
  border-radius: 12px;
  padding: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
}

.calendar-day:hover { border-color: var(--color-primary); }
.calendar-day.today { border-color: var(--color-primary); background: #FFF5F5; }
.calendar-day.other-month { background: #F9FAFB; opacity: 0.5; }

.calendar-day-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 4px;
}

.calendar-day.today .calendar-day-num {
  background: var(--color-primary);
  color: white;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-post-chip {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  cursor: pointer;
}

.chip-facebook { background: #1877F2; color: white; }
.chip-instagram { background: linear-gradient(135deg, #F58529, #DD2A7B); color: white; }
.chip-ad { background: var(--color-secondary); color: white; }
.chip-draft { background: #E5E7EB; color: var(--color-gray); }
/* Contenido IMPORTADO desde Meta: mismo color base + indicador (borde punteado ámbar). */
.calendar-post-chip.chip-imported {
  box-shadow: inset 0 0 0 1.5px #F59E0B;
  position: relative;
}

/* ─── NETWORK BADGES ──────────────────────────────────────────────────────── */
.network-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.badge-facebook { background: #E8F0FF; color: #1877F2; }
.badge-instagram { background: #FCEEFF; color: #C13584; }

/* ─── STATUS BADGES ──────────────────────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.status-draft { background: #F3F4F6; color: #6B7280; }
.status-scheduled { background: #EFF6FF; color: #3B82F6; }
.status-published { background: #ECFDF5; color: #10B981; }
.status-cancelled { background: #FEF2F2; color: #EF4444; }
.status-pending { background: #FFFBEB; color: #F59E0B; }
.status-in_progress { background: #EFF6FF; color: #3B82F6; }
.status-completed { background: #ECFDF5; color: #10B981; }
.status-active { background: #ECFDF5; color: #10B981; }
.status-overdue { background: #FEF2F2; color: #EF4444; }
.status-blocked { background: #FEF2F2; color: #EF4444; }
.status-paused { background: #F3F4F6; color: #6B7280; }
.status-gerente { background: #EDE9FE; color: #7C3AED; }
.status-owner { background: #FEF3C7; color: #D97706; }
.status-collaborator { background: #DBEAFE; color: #2563EB; }
.status-admin { background: #FEE2E2; color: #DC2626; }

/* ─── PRIORITY BADGES ─────────────────────────────────────────────────────── */
.priority-low { background: #F0FDF4; color: #22C55E; border: 1px solid #BBF7D0; }
.priority-medium { background: #FFFBEB; color: #F59E0B; border: 1px solid #FDE68A; }
.priority-high { background: #FFF7ED; color: #EA580C; border: 1px solid #FED7AA; }
.priority-urgent { background: #FEF2F2; color: #EF4444; border: 1px solid #FECACA; }

/* ─── KIRP AI PANEL ───────────────────────────────────────────────────────── */
.kirpai-panel {
  background: linear-gradient(135deg, #1E1C1C 0%, #3A2020 100%);
  border-radius: 16px;
  padding: 24px;
  color: white;
}

.kirpai-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.kirpai-logo {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary-dark));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
}

.kirpai-name { font-size: 18px; font-weight: 800; }
.kirpai-tagline { font-size: 12px; color: rgba(255,255,255,0.5); }

.kirpai-chat {
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 16px;
  min-height: 200px;
  max-height: 350px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.chat-message {
  margin-bottom: 16px;
  display: flex;
  gap: 10px;
}

.chat-message.user { flex-direction: row-reverse; }

.chat-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.chat-avatar.ai {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: white;
}

.chat-avatar.human { background: rgba(255,255,255,0.2); color: white; }

.chat-bubble {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
}

.chat-bubble.ai { background: rgba(255,255,255,0.12); color: white; border-radius: 4px 14px 14px 14px; }
.chat-bubble.human { background: var(--color-primary); color: white; border-radius: 14px 4px 14px 14px; }

.kirpai-input-area {
  display: flex;
  gap: 8px;
}

.kirpai-input {
  flex: 1;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 10px 14px;
  color: white;
  font-size: 14px;
  outline: none;
}

.kirpai-input::placeholder { color: rgba(255,255,255,0.4); }
.kirpai-input:focus { border-color: var(--color-primary); }


/* ─── PROGRESS BAR ────────────────────────────────────────────────────────── */
.progress-bar {
  height: 8px;
  background: #E5E7EB;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary-dark));
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* ─── TABS ────────────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  border-bottom: 2px solid #E5E7EB;
  margin-bottom: 24px;
  gap: 4px;
}

.tab {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
  border-radius: 8px 8px 0 0;
}

.tab:hover { color: var(--color-dark); background: #F9FAFB; }
.tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* ─── POSTS: tabla (escritorio/tablet) vs tarjetas (móvil) ─────────────────── */
.posts-table-view { display: block; }
.posts-cards-view { display: none; }

/* ─── TABLE ───────────────────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-gray);
  padding: 12px 16px;
  background: #F9FAFB;
  border-bottom: 1px solid #E5E7EB;
}

.data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #F3F4F6;
  font-size: 14px;
  color: var(--color-dark);
}

.data-table tr:hover td { background: #FAFAFA; }
.data-table tr:last-child td { border-bottom: none; }

/* ─── NETWORK CHECKBOXES ──────────────────────────────────────────────────── */
.network-selector {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.network-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 2px solid #E5E7EB;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.network-option:hover { border-color: var(--color-primary); }
.network-option.selected-facebook { border-color: #1877F2; background: #F0F5FF; }
.network-option.selected-instagram { border-color: #C13584; background: #FEF0FF; }

/* ─── SELECTOR DE TIPO DE CONTENIDO (ICONOS) ──────────────────────────────── */
.ctype-selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 640px) {
  .ctype-selector { grid-template-columns: repeat(2, 1fr); }
}
.ctype-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 14px 8px;
  border: 2px solid #E5E7EB;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
  background: #fff;
}
.ctype-card:hover {
  border-color: var(--ctype-color, #4A6FA5);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.ctype-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--ctype-color, #4A6FA5);
  background: color-mix(in srgb, var(--ctype-color, #4A6FA5) 12%, white);
  transition: all 0.18s ease;
}
.ctype-label { font-weight: 700; font-size: 13px; color: #374151; }
.ctype-desc { font-size: 11px; color: #9CA3AF; }
.ctype-card.ctype-selected {
  border-color: var(--ctype-color, #4A6FA5);
  background: color-mix(in srgb, var(--ctype-color, #4A6FA5) 7%, white);
}
.ctype-card.ctype-selected .ctype-icon {
  background: var(--ctype-color, #4A6FA5);
  color: #fff;
}
.ctype-card.ctype-selected .ctype-label { color: var(--ctype-color, #4A6FA5); }

/* ─── IMAGE UPLOAD ────────────────────────────────────────────────────────── */
.image-upload-area {
  border: 2px dashed #D1D5DB;
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.image-upload-area:hover {
  border-color: var(--color-primary);
  background: #FFF5F5;
}

.image-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.image-preview-item {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.image-preview-item img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ─── TOAST / ALERTS ─────────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: white;
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: 400px;
  animation: slideInRight 0.3s ease;
  border-left: 4px solid var(--color-primary);
}

.toast.success { border-color: var(--color-success); }
.toast.error { border-color: var(--color-error); }
.toast.warning { border-color: var(--color-warning); }

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ─── LOADING ─────────────────────────────────────────────────────────────── */
.loading-spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.page-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  flex-direction: column;
  gap: 16px;
  color: var(--color-gray);
}

.loader-ring {
  width: 48px; height: 48px;
  border: 4px solid #E5E7EB;
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* ─── EMPTY STATE ─────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 60px 24px;
  color: var(--color-gray);
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state h3 { font-size: 18px; font-weight: 700; color: var(--color-dark); margin-bottom: 8px; }
.empty-state p { font-size: 14px; max-width: 300px; margin: 0 auto 20px; }

/* ─── RESPONSIVE / MOBILE ─────────────────────────────────────────────────── */

/* Botón hamburguesa — siempre visible en móvil */
#mobile-menu-btn {
  display: none !important;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: #F3F4F6;
  border: none;
  cursor: pointer;
  color: #1E1C1C;
  font-size: 18px;
  flex-shrink: 0;
  transition: background 0.2s;
}
#mobile-menu-btn:hover { background: #E5E7EB; }

/* Overlay oscuro cuando el sidebar está abierto en móvil */
#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 99;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: fadeIn 0.2s ease;
}
#sidebar-overlay.visible { display: block; }

/* ── Panel de Notificaciones ────────────────────────────────────────────── */
#notif-panel {
  display: none;
  position: fixed;
  top: var(--header-height);
  right: 16px;
  width: 400px;
  max-width: calc(100vw - 32px);
  /* Limitar a la altura disponible de la ventana para que nunca se salga de
     pantalla; el listado interno hace scroll si hay muchas notificaciones. */
  max-height: calc(100dvh - var(--header-height) - 24px);
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.1);
  z-index: 200;
  overflow: hidden;
  flex-direction: column;
  animation: slideDown 0.2s ease;
  border: 1px solid #E5E7EB;
}
#notif-panel.visible { display: flex; }

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

.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #F3F4F6;
  flex-shrink: 0;
}
.notif-panel-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: #1E1C1C;
}
.notif-panel-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.notif-mark-all {
  font-size: 12px;
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s;
}
.notif-mark-all:hover { background: #FEF2F2; }
.notif-close-btn {
  width: 28px; height: 28px;
  background: #F3F4F6;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B7280;
  font-size: 14px;
  transition: background 0.2s;
}
.notif-close-btn:hover { background: #E5E7EB; color: #1E1C1C; }

#notif-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#notif-list::-webkit-scrollbar { width: 4px; }
#notif-list::-webkit-scrollbar-track { background: transparent; }
#notif-list::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 2px; }

.notif-item {
  display: flex;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #F9FAFB;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #F9FAFB; }
.notif-item.unread { background: #FFF8F7; }
.notif-item.unread:hover { background: #FEF2F2; }

.notif-item-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 2px;
}
.notif-icon-task    { background: #EFF6FF; color: #3B82F6; }
.notif-icon-success { background: #F0FDF4; color: #10B981; }
.notif-icon-warning { background: #FFFBEB; color: #F59E0B; }
.notif-icon-error   { background: #FEF2F2; color: #EF4444; }
.notif-icon-info    { background: #F3F4F6; color: #6B7280; }

.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 3px;
  /* Mostrar el título completo (varias líneas si hace falta) sin recortar. */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}
.notif-item-msg {
  font-size: 12px;
  color: #6B7280;
  line-height: 1.45;
  /* Mostrar el mensaje completo, respetando saltos de línea del backend
     (algunos mensajes incluyen \n con el comentario citado). */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.notif-item-time {
  font-size: 11px;
  color: #9CA3AF;
  margin-top: 4px;
  display: block;
}
.notif-unread-dot {
  width: 8px; height: 8px;
  background: var(--color-primary);
  border-radius: 50%;
  position: absolute;
  top: 18px;
  right: 14px;
  flex-shrink: 0;
}

/* Sangría derecha para que el punto de no-leído no se encime con el texto. */
.notif-item.unread .notif-item-body { padding-right: 14px; }

/* Aviso de que las notificaciones son clicables. */
.notif-panel-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  font-size: 11.5px;
  color: #92400E;
  background: #FFFBEB;
  border-bottom: 1px solid #FDE68A;
  line-height: 1.35;
  flex-shrink: 0;
}
.notif-panel-hint i { color: var(--color-primary); flex-shrink: 0; }

.notif-empty {
  padding: 40px 20px;
  text-align: center;
  color: #9CA3AF;
}
.notif-empty i { font-size: 32px; margin-bottom: 12px; display: block; }
.notif-empty p { font-size: 13px; }

/* Indicador del badge de notificaciones — mejorado */
#notif-badge {
  position: absolute;
  top: 6px; right: 6px;
  min-width: 18px; height: 18px;
  background: var(--color-primary);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  color: white;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid white;
  line-height: 1;
}

/* Botón de notificaciones — posicionamiento relativo */
#notif-btn {
  position: relative !important;
}

/* ─── ENCABEZADO DE TARJETAS (accionables/tareas) — layout responsive ──────── */
/* Desktop/tablet: texto a la izquierda (flexible), botones a la derecha. */
.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: nowrap;
}
.card-header-row-tight { margin-bottom: 0; }
.card-header-main {
  flex: 1 1 auto;
  min-width: 0;            /* permite que el texto se ajuste y haga wrap natural */
}
.card-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: flex-start;
}
.card-header-actions-col { flex-direction: column; align-items: stretch; }

/* ─── ENCABEZADO DE SECCIÓN CON FILTROS (título + selects) ─────────────────── */
.section-header-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.section-header-filters-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.section-header-filters-controls .form-select { width: auto; }

@media (max-width: 768px) {
  /* Sidebar: oculto por defecto, se desliza al abrir */
  #sidebar {
    transform: translateX(-100%);
    z-index: 100;
    box-shadow: none;
    width: min(280px, 84vw);
    padding-top: var(--safe-top);
    padding-left: var(--safe-left);
  }
  #sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.25);
  }

  /* Botón hamburguesa visible en móvil */
  #mobile-menu-btn {
    display: flex !important;
  }

  #main-content { margin-left: 0; }

  /* Header ajustado para móvil */
  #top-header {
    padding: 0 16px;
    gap: 10px;
  }
  .header-title {
    font-size: 16px;
  }

  /* Contenido con padding bottom para nav bar inferior + safe area */
  .page-content {
    padding: 16px;
    padding-left: max(16px, var(--safe-left));
    padding-right: max(16px, var(--safe-right));
    padding-bottom: calc(84px + var(--safe-bottom));
  }

  /* ── CALENDARIO EN MÓVIL ──
     7 columnas en una pantalla estrecha hacen que los chips de texto sean
     ilegibles y desborden. En móvil mostramos el grid compacto con los chips
     convertidos en PUNTOS de color (indicadores). Al tocar un día se abre el
     detalle (openDayView) con la lista completa legible. */
  .calendar-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
  }
  .calendar-day {
    min-height: 52px;
    padding: 4px 2px;
    font-size: 11px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  .calendar-day-num { font-size: 12px; margin-bottom: 4px; }
  /* Convertir cada chip en un punto de color (oculta el texto, conserva el
     color de fondo como indicador visual). Los puntos se agrupan en fila con
     salto de línea bajo el número del día. */
  .calendar-post-chip {
    width: 7px;
    height: 7px;
    padding: 0 !important;
    margin: 1px;
    border-radius: 50%;
    overflow: hidden;
    text-indent: -9999px;
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
    font-size: 0;
  }
  /* En móvil los puntos van en fila, centrados, con salto de línea. */
  .calendar-day-chips {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    width: auto;
  }
  /* El "+N más" se oculta en móvil (el detalle del día lo muestra todo). */
  .calendar-day-chips > div[style*="font-size:10px"] { display: none; }
  .calendar-day-header { font-size: 10px; padding: 6px 0; letter-spacing: -0.3px; }

  /* Cards y grids adaptables */
  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .card { padding: 16px; border-radius: 12px; }

  /* Modales en móvil */
  .modal-overlay { padding: 8px; align-items: flex-end; }
  .modal-box {
    width: 100%;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
    margin-bottom: 0;
  }
  .modal-lg { width: 100%; max-width: 100%; }

  /* Panel de notificaciones en móvil */
  #notif-panel {
    right: 8px;
    left: 8px;
    width: auto;
    top: calc(var(--header-height) + 4px);
    max-height: calc(100dvh - var(--header-height) - 80px);
    overflow: hidden;
  }

  /* ── POSTS EN MÓVIL: tarjetas en vez de tabla ──
     La tabla de 8 columnas es inservible en móvil. Mostramos tarjetas. */
  .posts-table-view { display: none !important; }
  .posts-cards-view { display: block !important; }

  /* ── TABLAS SCROLLEABLES EN MÓVIL ──
     Las tablas viven dentro de cards con `overflow:hidden` inline, lo que
     RECORTABA columnas (ej. "Teléfono"). Forzamos que la card que contiene una
     tabla permita scroll horizontal en lugar de recortar. */
  .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card:has(.data-table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .data-table { min-width: 560px; }
  /* La tabla se vuelve bloque scrolleable por si la card no soporta :has() */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }

  /* Timeline en móvil */
  .task-timeline-entry { padding-bottom: 16px; }

  /* Ocultar columnas no esenciales */
  .hide-mobile { display: none !important; }

  /* Botones más grandes en táctil */
  .btn { min-height: 36px; }

  /* Grids de 2 columnas en móvil */
  .grid-4-cols { grid-template-columns: 1fr 1fr !important; }
  .grid-3-cols { grid-template-columns: 1fr 1fr !important; }

  /* ── ENCABEZADO DE TARJETAS EN MÓVIL ──
     Apila verticalmente: el texto ocupa el ancho completo (se acaba el
     "una palabra por línea") y los botones quedan debajo, a ancho completo. */
  .card-header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .card-header-main { width: 100%; }
  .card-header-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
  }
  .card-header-actions .btn {
    width: 100%;
    justify-content: center;
  }
  /* Los botones de solo-icono (editar/eliminar) no necesitan ocupar toda la
     fila: van juntos en una fila compartida. */
  .card-header-actions .btn-icon {
    width: auto;
    flex: 1 1 0;
  }

  /* Encabezado de sección con filtros: título arriba, filtros abajo a ancho
     completo (cada select al 50% para que quepan los dos en una fila). */
  .section-header-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .section-header-filters-controls {
    width: 100%;
  }
  .section-header-filters-controls .form-select {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  /* ── FORMULARIOS EN MODALES: colapsar grids a menos columnas en móvil ──
     Los formularios dentro de modales usan estilos inline como
     `grid-template-columns:1fr 1fr`. En móvil esos campos quedan demasiado
     estrechos. Limitamos el alcance a `.modal-box` para no afectar grids de
     KPIs/dashboard. Se usa !important para ganar sobre el estilo inline. */
  .modal-box [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  .modal-box [style*="grid-template-columns: 1fr 1fr"]:not([style*="1fr 1fr 1fr"]) {
    grid-template-columns: 1fr !important;
  }
  /* Grids de 3 columnas (ej. campos de métricas) → 2 columnas en móvil */
  .modal-box [style*="grid-template-columns:1fr 1fr 1fr"],
  .modal-box [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Tarjetas de resumen (KPIs): de 4 columnas a 2 en móvil para que los
     números no queden comprimidos. */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* El monto de facturación se reduce en móvil para no desbordar la card. */
  .billing-amount { font-size: 34px; }
  .billing-card { padding: 22px; }

  /* ── COLAPSO GLOBAL DE GRIDS DE 2 COLUMNAS EN MÓVIL ──
     Layouts tipo "1fr 2fr" (editor de encuestas: Config | Preguntas),
     "2fr 1fr", "1fr 1fr", etc. deben apilarse a 1 columna en móvil para no
     desbordar horizontalmente. Cubre los patrones inline más comunes. */
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  [style*="grid-template-columns: 1fr 1fr"]:not([style*="1fr 1fr 1fr"]) {
    grid-template-columns: 1fr !important;
  }
  /* Grids de 3 columnas inline → 1 columna en móvil */
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   TABLET (769px – 1024px): SIDEBAR COLAPSADO A ICONOS
   En tablets el sidebar de 260px robaba demasiado espacio y cortaba el
   contenido. Aquí se colapsa a una barra estrecha de solo iconos (88px) que se
   EXPANDE al pasar el cursor / tocar, sin tapar el contenido permanentemente.
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Sidebar estrecho — solo iconos */
  #sidebar {
    width: var(--sidebar-width-tablet);
    z-index: 100;
  }
  #main-content {
    margin-left: var(--sidebar-width-tablet);
  }

  /* Estado colapsado: ocultar textos, centrar iconos */
  #sidebar .sidebar-logo-text { display: none; }
  #sidebar .nav-section-title { opacity: 0; height: 0; margin: 0; padding: 0; overflow: hidden; }
  #sidebar .nav-item { position: relative; justify-content: center; padding: 12px; }
  #sidebar .nav-text { display: none; }
  #sidebar .nav-item .nav-badge { position: absolute; top: 4px; right: 6px; margin: 0; }
  #sidebar .sidebar-header { padding: 20px 12px; }
  #sidebar .sidebar-logo { justify-content: center; }
  #sidebar .user-details { display: none; }
  #sidebar .user-info { justify-content: center; padding: 8px; }
  #sidebar .user-info .fa-chevron-right { display: none; }
  #sidebar .btn-logout { padding: 10px; font-size: 0; }
  #sidebar .btn-logout i { font-size: 14px; }

  /* Al pasar el cursor el sidebar se expande temporalmente y muestra todo */
  #sidebar:hover {
    width: var(--sidebar-width);
    box-shadow: 6px 0 28px rgba(0,0,0,0.35);
  }
  #sidebar:hover .sidebar-logo-text { display: block; }
  #sidebar:hover .nav-text { display: inline; }
  #sidebar:hover .nav-section-title { opacity: 1; height: auto; margin-bottom: 6px; padding: 0 8px; }
  #sidebar:hover .nav-item { justify-content: flex-start; padding: 10px 12px; }
  #sidebar:hover .nav-item .nav-badge { position: static; }
  #sidebar:hover .sidebar-logo { justify-content: flex-start; }
  #sidebar:hover .sidebar-header { padding: 24px 20px; }
  #sidebar:hover .user-info { justify-content: flex-start; padding: 10px; }
  #sidebar:hover .user-details { display: block; }
  #sidebar:hover .user-info .fa-chevron-right { display: inline; }
  #sidebar:hover .btn-logout { font-size: 12px; }

  /* Encabezado de tarjeta con más respiro en tablet */
  .card-header-actions { max-width: 50%; }

  /* ── COLAPSO DE GRIDS DE 2 COLUMNAS EN TABLET ──
     El editor de encuestas (1fr 2fr) y otros layouts anchos se cortaban en
     tablet. Aquí los colapsamos a 1 columna para que todo el contenido sea
     visible sin desbordamiento. */
  .page-content [style*="grid-template-columns:1fr 2fr"],
  .page-content [style*="grid-template-columns: 1fr 2fr"],
  .page-content [style*="grid-template-columns:2fr 1fr"],
  .page-content [style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Las tablas dentro de cards permiten scroll horizontal en tablet también. */
  .card:has(.data-table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .data-table { min-width: 0; }
}

/* ── Bottom Navigation Bar (solo móvil) ─────────────────────────────────── */
#bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(64px + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: white;
  border-top: 1px solid #E5E7EB;
  z-index: 90;
  align-items: center;
  justify-content: space-around;
  padding-left: max(8px, var(--safe-left));
  padding-right: max(8px, var(--safe-right));
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  color: #9CA3AF;
  font-size: 10px;
  font-weight: 600;
  min-width: 52px;
  border: none;
  background: none;
}
.bottom-nav-item i { font-size: 18px; }
.bottom-nav-item:hover,
.bottom-nav-item.active { color: var(--color-primary); }
.bottom-nav-item.active i {
  filter: drop-shadow(0 2px 6px rgba(230,58,46,0.4));
}

@media (max-width: 768px) {
  #bottom-nav { display: flex; }
}

/* ─── FINANCE MODULE ──────────────────────────────────────────────────────── */
.billing-card {
  background: linear-gradient(135deg, #1E1C1C 0%, #3A2020 100%);
  border-radius: 20px;
  padding: 28px;
  color: white;
  position: relative;
  overflow: hidden;
}

.billing-card::before {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(167,32,32,0.25) 0%, transparent 70%);
  top: -60px; right: -40px;
  border-radius: 50%;
}

.billing-amount {
  font-size: 42px;
  font-weight: 900;
  color: white;
}

.billing-label { font-size: 14px; color: rgba(255,255,255,0.6); }
.billing-date { font-size: 16px; font-weight: 600; color: white; margin-top: 4px; }

/* ─── ANIMATIONS ──────────────────────────────────────────────────────────── */
.fade-in { animation: fadeIn 0.3s ease; }

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

.slide-up { animation: slideUp 0.4s ease; }

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

/* ─── KIRP AI — MARKDOWN RENDERING ─────────────────────────────────────────── */
/* En fondo claro (chat lateral, modal) */
.kirp-response {
  font-size: 14px;
  line-height: 1.7;
  color: #1A1A2E;
}
.kirp-response h2 {
  font-size: 18px;
  font-weight: 800;
  color: #A72020;
  margin: 16px 0 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid #FEE2E2;
}
.kirp-response h3 {
  font-size: 16px;
  font-weight: 700;
  color: #374151;
  margin: 14px 0 6px;
}
.kirp-response h4 {
  font-size: 14px;
  font-weight: 700;
  color: #6B7280;
  margin: 12px 0 4px;
}
.kirp-response p {
  margin-bottom: 10px;
}
.kirp-response ul,
.kirp-response ol {
  padding-left: 20px;
  margin-bottom: 10px;
}
.kirp-response li {
  margin-bottom: 4px;
}
.kirp-response strong { font-weight: 700; color: #1A1A2E; }
.kirp-response em { font-style: italic; color: #374151; }
.kirp-response code {
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12px;
  font-family: 'Courier New', monospace;
  color: #A72020;
}
.kirp-response hr {
  border: none;
  border-top: 1px solid #E5E7EB;
  margin: 14px 0;
}

/* ─── KIRP AI — TEXTO SOBRE FONDO OSCURO / GRIS ────────────────────────────
   Cubrimos 3 escenarios para que los títulos markdown SIEMPRE sean legibles:
   1. .chat-bubble.ai .kirp-response  → markdown envuelto en .kirp-response
   2. .chat-bubble.ai.kirp-response   → la burbuja AI tiene la clase directa
   3. .chat-bubble.ai h2/h3/h4 ...    → markdown insertado SIN envoltura
   Antes el JS aplicaba color inline (#1A1A2E) a los títulos, lo que rompía
   estas reglas y dejaba los títulos en negro sobre fondo gris. Ya se eliminó
   el color inline en renderMarkdown(); estas reglas controlan el color. */
.chat-bubble.ai .kirp-response,
.chat-bubble.ai.kirp-response,
.kirp-msg-ai .kirp-response,
.kirp-dark-bg .kirp-response {
  color: rgba(255,255,255,0.92);
}
/* H2 — rojo claro de marca, legible sobre gris/oscuro */
.chat-bubble.ai .kirp-response h2,
.chat-bubble.ai.kirp-response h2,
.chat-bubble.ai h2,
.kirp-msg-ai .kirp-response h2,
.kirp-dark-bg .kirp-response h2 {
  color: #F87171 !important;
  border-bottom-color: rgba(248,113,113,0.3);
}
/* H3 — blanco casi puro */
.chat-bubble.ai .kirp-response h3,
.chat-bubble.ai.kirp-response h3,
.chat-bubble.ai h3,
.kirp-msg-ai .kirp-response h3,
.kirp-dark-bg .kirp-response h3 {
  color: #FFFFFF !important;
}
/* H4 — blanco atenuado */
.chat-bubble.ai .kirp-response h4,
.chat-bubble.ai.kirp-response h4,
.chat-bubble.ai h4,
.kirp-msg-ai .kirp-response h4,
.kirp-dark-bg .kirp-response h4 {
  color: rgba(255,255,255,0.78) !important;
}
.chat-bubble.ai .kirp-response strong,
.chat-bubble.ai.kirp-response strong,
.chat-bubble.ai strong,
.kirp-msg-ai .kirp-response strong,
.kirp-dark-bg .kirp-response strong {
  color: #FFFFFF;
}
.chat-bubble.ai .kirp-response em,
.chat-bubble.ai.kirp-response em,
.chat-bubble.ai em,
.kirp-msg-ai .kirp-response em,
.kirp-dark-bg .kirp-response em {
  color: rgba(255,255,255,0.75);
}
.chat-bubble.ai .kirp-response code,
.chat-bubble.ai.kirp-response code,
.chat-bubble.ai code,
.kirp-msg-ai .kirp-response code,
.kirp-dark-bg .kirp-response code {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
  color: #FCA5A5;
}
.chat-bubble.ai .kirp-response hr,
.chat-bubble.ai.kirp-response hr,
.chat-bubble.ai hr,
.kirp-msg-ai .kirp-response hr,
.kirp-dark-bg .kirp-response hr {
  border-top-color: rgba(255,255,255,0.12);
}

/* ─── KIRP TEAM — PANEL DE FEEDBACK / INSIGHTS ──────────────────────────── */
.kirp-feedback-panel {
  background: linear-gradient(135deg, #1E1C1C 0%, #2B2020 100%);
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
  border: 1px solid rgba(167,32,32,0.35);
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
}
.kirp-feedback-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.kirp-feedback-panel .panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
}
.kirp-feedback-panel .panel-title .kirp-badge {
  background: linear-gradient(135deg, #A72020, #8A1A1A);
  color: white;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.kirp-feedback-item {
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border-left: 3px solid rgba(167,32,32,0.55);
  transition: background 0.2s;
}
.kirp-feedback-item.pinned {
  border-left-color: #F59E0B;
  background: rgba(245,158,11,0.08);
}
.kirp-feedback-item .item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.kirp-feedback-item .item-author {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kirp-feedback-item .author-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #A72020, #8A1A1A);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}
.kirp-feedback-item .author-name {
  font-size: 12px;
  font-weight: 700;
  color: #F3F4F6;
}
.kirp-feedback-item .item-date {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}
.kirp-feedback-item .item-content {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
}
.kirp-feedback-item .item-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  justify-content: flex-end;
}
.kirp-feedback-item .item-actions button {
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 0.2s;
}
.kirp-feedback-item .item-actions button:hover {
  background: rgba(255,255,255,0.2);
  color: white;
}
.kirp-feedback-item .item-actions .btn-pin-active {
  color: #F59E0B;
}
.kirp-feedback-empty {
  text-align: center;
  padding: 24px;
  color: rgba(255,255,255,0.35);
  font-size: 13px;
}
.kirp-feedback-add-btn {
  background: rgba(167,32,32,0.15);
  border: 1px dashed rgba(167,32,32,0.4);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  color: #C94040;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
  margin-top: 8px;
}
.kirp-feedback-add-btn:hover {
  background: rgba(167,32,32,0.25);
  border-color: rgba(167,32,32,0.65);
}

/* ─── RECURSOS GRÁFICOS ─────────────────────────────────────────────────── */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.resource-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 2px solid transparent;
}
.resource-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  border-color: var(--color-primary);
}
.resource-card .resource-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #F3F4F6;
  display: block;
}
.resource-card .resource-thumb-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: #F3F4F6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  font-size: 32px;
}
.resource-card .resource-info {
  padding: 10px 12px;
}
.resource-card .resource-name {
  font-size: 12px;
  font-weight: 700;
  color: #1A1A2E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.resource-card .resource-meta {
  font-size: 11px;
  color: #9CA3AF;
}

/* ─── IMAGE PICKER MODAL ─────────────────────────────────────────────────── */
.image-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
  padding: 4px;
}
.picker-item {
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s, transform 0.2s;
  background: #F3F4F6;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.picker-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.picker-item:hover { border-color: var(--color-primary); transform: scale(1.03); }
.picker-item.selected { border-color: var(--color-primary); }
.picker-item.selected::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--color-primary);
  color: white;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}
.picker-item-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.55);
  color: white;
  font-size: 9px;
  padding: 2px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── UPLOAD ZONE ─────────────────────────────────────────────────────────── */
.upload-zone {
  border: 2px dashed #D1D5DB;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: #FAFAFA;
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--color-primary);
  background: #FFF5F5;
}
.upload-zone i { font-size: 28px; color: #9CA3AF; margin-bottom: 8px; }
.upload-zone.dragover i { color: var(--color-primary); }
.upload-zone p { font-size: 13px; color: #6B7280; }
.upload-zone .file-limit { font-size: 11px; color: #9CA3AF; margin-top: 4px; }

/* ─── PALETA BUFALOS GLOBAL OVERRIDE ─────────────────────────────────────── */
/* nav activo y badges usan el rojo oficial */
.nav-item.active { background: var(--color-primary); box-shadow: 0 4px 12px rgba(167,32,32,0.45); }
.nav-item .nav-badge { background: var(--color-primary); }
.stat-card { border-left-color: var(--color-primary); }
.calendar-day.today { border-color: var(--color-primary); background: #FDF2F2; }
.calendar-day.today .calendar-day-num { background: var(--color-primary); }
.chip-ad { background: var(--color-secondary); }
.tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.chat-bubble.human { background: var(--color-primary); }
.chat-avatar.ai { background: linear-gradient(135deg, var(--color-primary), var(--color-secondary-dark)); }
.toast { border-left-color: var(--color-primary); }
.loader-ring { border-top-color: var(--color-primary); }

/* Scrollbar en rojo oficial */
::-webkit-scrollbar-thumb { background: var(--color-primary); }

/* ─── KIRP AI — POSICIÓN VISIBLE ──────────────────────────────────────────── */
/* Asegura que el panel Kirp AI no quede enterrado al fondo */
.kirpai-panel-sticky {
  position: sticky;
  top: 80px;
}

/* ─── RECURSOS GRÁFICOS — SELECCIÓN MÚLTIPLE DESCARGA ───────────────────── */
.resource-card.selectable { cursor: pointer; position: relative; }
.resource-card.selectable .res-select-check {
  position: absolute;
  top: 8px; left: 8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.8);
  background: rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: white;
  transition: all 0.2s;
  z-index: 2;
}
.resource-card.selected { border-color: var(--color-primary); }
.resource-card.selected .res-select-check {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.resource-card.selected .res-select-check::after {
  content: '✓';
  font-weight: 900;
}

/* Barra acción selección múltiple */
#res-bulk-bar {
  position: fixed;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #1E1C1C;
  border: 1px solid rgba(167,32,32,0.4);
  border-radius: 50px;
  padding: 10px 24px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  z-index: 500;
  color: white; font-size: 14px; font-weight: 600;
  transition: opacity 0.2s, transform 0.2s;
}
#res-bulk-bar.hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(20px); }

/* ─── GERENTE — BADGE ROL ─────────────────────────────────────────────────── */
.status-gerente { background: #FFF7ED; color: #C2410C; }
.role-badge-gerente {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, #5B585D, #434147);
  color: white; padding: 3px 10px;
  border-radius: 20px; font-size: 11px; font-weight: 700;
}

/* ─── TASK TIMELINE ───────────────────────────────────────────────────────── */
.task-timeline-entry {
  position: relative;
  padding-bottom: 20px;
}
.task-timeline-entry:last-child {
  padding-bottom: 0;
}
.task-timeline-entry .timeline-line {
  position: absolute;
  left: 19px; top: 38px; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, rgba(167,32,32,0.3), #E5E7EB);
}

/* Task card hover en actionable detail */
.task-card-clickable {
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.task-card-clickable:hover {
  border-color: var(--color-primary) !important;
  box-shadow: 0 2px 8px rgba(167,32,32,0.12);
}

/* ─── LEYENDA META BUSINESS SUITE (formularios post/anuncio) ──────────────── */
.meta-notice {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  background: #EFF4FB;
  border: 1px solid #4A6FA5;
  border-left: 4px solid #4A6FA5;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #2B3F5C;
}
.meta-notice i {
  color: #4A6FA5;
  font-size: 15px;
}
.meta-notice strong {
  color: #1E2D45;
  font-weight: 700;
}

/* ─── TOGGLE SWITCH (módulo de tareas - "Mostrar todos") ─────────────────── */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  cursor: pointer;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #D1D5DB;
  border-radius: 34px;
  transition: background 0.25s;
}
.toggle-slider:before {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  left: 3px; bottom: 3px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.25s;
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--color-primary);
}
.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(22px);
}

/* ─── WIDGET DE MIS TAREAS EN DASHBOARD ─────────────────────────────────── */
.my-tasks-widget {
  background: white;
  border-radius: 16px;
  border: 1px solid #E5E7EB;
  overflow: hidden;
}
.my-tasks-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #F3F4F6;
}
.my-tasks-widget-item {
  padding: 12px 20px;
  border-bottom: 1px solid #F9FAFB;
  transition: background 0.15s;
}
.my-tasks-widget-item:last-child { border-bottom: none; }
.my-tasks-widget-item:hover { background: #FAFAFA; }

/* ─── KIRP AI — BOTÓN FLOTANTE (FAB) + PANEL EMERGENTE ─────────────────────── */
/* Botón flotante en la esquina inferior derecha (como el icono de notificaciones,
   pero para abrir el chat-agente de Kirp AI). Se oculta cuando hay un modal o
   panel de visualización abierto (vía la clase .kirp-fab-hidden aplicada por JS). */
#kirp-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 900;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary-dark));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 6px 24px rgba(167,32,32,0.45), 0 2px 8px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  animation: kirpFabIn 0.3s ease;
}
#kirp-fab:hover { transform: scale(1.08); box-shadow: 0 8px 30px rgba(167,32,32,0.55); }
#kirp-fab:active { transform: scale(0.96); }
#kirp-fab .kirp-fab-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  animation: kirpFabPulse 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes kirpFabPulse {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes kirpFabIn {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
/* Etiqueta flotante opcional junto al FAB */
#kirp-fab .kirp-fab-label {
  position: absolute;
  right: 72px;
  background: #1E1C1C;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
#kirp-fab:hover .kirp-fab-label { opacity: 1; }

/* Oculta el FAB (cuando hay un modal/panel abierto, o no aplica al contexto) */
.kirp-fab-hidden { display: none !important; }

/* Panel emergente del chat de Kirp AI */
#kirp-fab-panel {
  position: fixed;
  bottom: 96px;
  right: 24px;
  width: 400px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 130px);
  background: linear-gradient(135deg, #1E1C1C 0%, #3A2020 100%);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.5);
  z-index: 950;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: kirpPanelIn 0.25s ease;
}
#kirp-fab-panel.open { display: flex; }
@keyframes kirpPanelIn {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.kirp-fab-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.kirp-fab-panel-header .kirpai-logo { width: 38px; height: 38px; }
.kirp-fab-panel-header .kirp-fab-close,
.kirp-fab-panel-header .kirp-fab-reset {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.75);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  padding: 6px 9px;
  transition: background 0.15s;
}
.kirp-fab-panel-header .kirp-fab-close:hover,
.kirp-fab-panel-header .kirp-fab-reset:hover { background: rgba(255,255,255,0.18); }
.kirp-fab-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px 0;
  flex-shrink: 0;
}
.kirp-fab-chip {
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.kirp-fab-chip:hover { background: rgba(255,255,255,0.2); }
#kirp-fab-panel .kirpai-chat {
  flex: 1;
  margin: 12px 16px;
  min-height: 0;
  max-height: none;
}
#kirp-fab-panel .kirpai-input-area {
  padding: 0 16px 16px;
  flex-shrink: 0;
}

/* ── Responsive: tabletas ── */
@media (max-width: 900px) {
  #kirp-fab-panel { width: 360px; }
}
/* ── Responsive: celulares ── */
@media (max-width: 640px) {
  #kirp-fab {
    bottom: 80px;   /* por encima de la barra de navegación inferior móvil */
    right: 16px;
    width: 54px;
    height: 54px;
    font-size: 21px;
  }
  #kirp-fab .kirp-fab-label { display: none; }
  #kirp-fab-panel {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 88vh;
    max-height: 88vh;
    border-radius: 18px 18px 0 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   ORIGEN DE CONTENIDO (badges) + MÓDULO DE SINCRONIZACIÓN META
   ════════════════════════════════════════════════════════════════════════════ */
.source-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1.4;
  white-space: nowrap;
}
.source-badge i { font-size: 10px; }
.source-imported { background: #FEF3C7; color: #92400E; }
.source-kirp { background: #DBEAFE; color: #1E40AF; }

.metric-na { color: #9CA3AF; font-style: italic; font-size: 12px; }

.sync-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
}
.sync-chip i { font-size: 8px; }
.sync-chip-ok { background: #ECFDF5; color: #065F46; }
.sync-chip-error { background: #FEF2F2; color: #991B1B; }
.sync-chip-progress { background: #EFF6FF; color: #1E40AF; }
.sync-chip-idle { background: #F3F4F6; color: #6B7280; }

.sync-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.sync-stat-card {
  background: #fff;
  border: 1px solid #F3F4F6;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sync-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.sync-stat-value { font-size: 20px; font-weight: 800; color: #111827; line-height: 1.1; }
.sync-stat-label { font-size: 12px; color: #6B7280; margin-top: 2px; }

/* Filtros de origen (chips) en Posts/Anuncios */
.source-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.source-filter-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid #E5E7EB;
  background: #fff;
  color: #6B7280;
  cursor: pointer;
  transition: all .15s;
}
.source-filter-chip:hover { border-color: #C7D2FE; color: #4338CA; }
.source-filter-chip.active { background: #4A6FA5; border-color: #4A6FA5; color: #fff; }

/* ════════════════════════════════════════════════════════════════════════════
   MEJORAS RESPONSIVE GLOBALES (PWA / multi-dispositivo) — jun 2026
   ════════════════════════════════════════════════════════════════════════════ */

/* En pantallas muy anchas, centrar el contenido para que no se estire de más. */
@media (min-width: 1600px) {
  .page-content {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

/* Tablas siempre scrolleables horizontalmente (no solo en móvil) para que
   nunca rompan el layout ni queden cortadas por el menú. */
.table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Las imágenes y media nunca desbordan su contenedor. */
img, video, canvas, svg { max-width: 100%; height: auto; }
canvas { height: auto !important; }

/* FAB de Kirp AI respetando safe-area inferior en móvil con bottom-nav. */
@media (max-width: 640px) {
  #kirp-fab { bottom: calc(80px + var(--safe-bottom)); }
}

/* Modo standalone (instalado como PWA): pequeños ajustes visuales. */
@media (display-mode: standalone) {
  body { overscroll-behavior-y: none; }
}

/* Cuando el sidebar móvil está abierto, bloquear scroll del fondo. */
body.sidebar-locked { overflow: hidden; }

/* Asegurar que ninguna grilla con columnas fijas rebase en pantallas chicas. */
@media (max-width: 1024px) {
  .stats-grid,
  .sync-stats-grid,
  .resource-grid { width: 100%; }
}

/* Inputs/botones táctiles cómodos en cualquier dispositivo táctil. */
@media (pointer: coarse) {
  .btn, .nav-item, .bottom-nav-item, .form-input, .form-select { min-height: 40px; }
}