/* ==========================================================================
   PickME CRM & Centro de Mando - Estilos Móviles Dark Mode
   ========================================================================== */

:root {
  /* Paleta Oficial PickME */
  --bg-app: #0e0e10;
  --bg-surface: #171719;
  --bg-card: #1f1f23;
  --bg-card-hover: #29292e;
  --bg-input: #26262b;
  --border-color: #2e2e34;
  --border-active: #f08757;

  --text-main: #fefefe;
  --text-secondary: #a1a1aa;
  --text-dim: #71717a;

  /* Colores de Marca y Servicios */
  --orange-pickme: #f08757;
  --orange-peach: #fac4ab;
  --gray-pickme: #595956;
  --silver-pickme: #b4b4b4;
  --green-pickme: #177c25;
  --green-light: #b9d6c5;
  --blue-capacitacion: #4a90e2;

  /* Semáforos y Alertas — tonos propios, armoniosos con la paleta PickME */
  --status-green: #2d7d5a;    /* verde menta apagado — distinto del verde reclutamiento */
  --status-orange: #c47c3e;   /* ámbar tierra — distinto del naranja marca #f08757 */
  --status-red: #9e3040;      /* rojo vino — distinto del rojo saturado puro */
  --status-neutral: #595956;
  --status-paid: #383838;

  /* UI Tokens */
  --nav-height: 64px;
  --header-height: 56px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-elevated: 0 10px 30px rgba(0, 0, 0, 0.6);
}

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

input, textarea, select {
  user-select: text;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-app);
  color: var(--text-main);
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   Encabezado Superior
   ========================================================================== */
.app-header {
  height: var(--header-height);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  position: relative;
  z-index: 40;
  flex-shrink: 0;
}

.brand-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.header-title-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--orange-pickme);
  background: rgba(240, 135, 87, 0.12);
  padding: 3px 8px;
  border-radius: 6px;
}

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

.header-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.header-btn:active {
  background: var(--bg-card-hover);
  color: var(--text-main);
}

/* ==========================================================================
   Contenedor Principal de Vistas
   ========================================================================== */
.main-content {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.view-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 20px);
}

.view-section.active {
  display: flex;
}

/* ==========================================================================
   SECCIÓN 1: AGENDA / GOOGLE CALENDAR STYLE
   ========================================================================== */
.agenda-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.agenda-current-period {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
}

.agenda-view-indicator {
  font-size: 0.75rem;
  color: var(--orange-pickme);
  background: rgba(240, 135, 87, 0.12);
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
}

.agenda-nav-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-btn-round {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-btn-round:active {
  background: var(--orange-pickme);
  border-color: var(--orange-pickme);
}

/* Schedule List View */
.agenda-schedule-feed {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.agenda-day-group {
  display: flex;
  gap: 12px;
}

.agenda-day-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 46px;
  flex-shrink: 0;
  padding-top: 4px;
}

.agenda-day-name {
  font-size: 0.72rem;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-secondary);
}

.agenda-day-number {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.1;
}

.agenda-day-badge.today .agenda-day-number {
  background: var(--orange-pickme);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  margin-top: 2px;
}

.agenda-events-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Tarjeta de Cita en Agenda (Borde izquierdo según servicio, hora a la derecha) */
.agenda-event-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  border-left-width: 4px;
  border-left-style: solid;
  border-top: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
}

.agenda-event-card:active {
  transform: scale(0.98);
  background: var(--bg-card-hover);
}

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

.agenda-event-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agenda-event-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agenda-event-company {
  color: var(--text-secondary);
  font-weight: 500;
}

.agenda-event-service-tag {
  color: var(--text-dim);
  font-size: 0.74rem;
}

/* Pastilla de Hora en Borde Derecho */
.agenda-event-time-badge {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.service-pill {
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Service Pill Variants */
.pill-crm-web { background: rgba(240, 135, 87, 0.18); color: var(--orange-pickme); }
.pill-recruit { background: rgba(23, 124, 37, 0.18); color: #4ade80; }
.pill-cards { background: rgba(250, 196, 171, 0.2); color: var(--orange-peach); }
.pill-training { background: rgba(74, 144, 226, 0.18); color: var(--blue-capacitacion); }

/* Vistas de Calendario Rejilla (Mes, Día, 3 Días, Semana) */
.calendar-grid-container {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

/* Mes */
.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}

.cal-month-header {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dim);
  padding: 6px 0;
  text-transform: uppercase;
}

.cal-month-day {
  background: var(--bg-card);
  aspect-ratio: 1 / 1.1;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 2px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  position: relative;
  border: 1px solid transparent;
  cursor: pointer;
}

.cal-month-day.other-month {
  opacity: 0.3;
}

.cal-month-day.is-today {
  border-color: var(--orange-pickme);
  color: var(--text-main);
  background: rgba(240, 135, 87, 0.1);
}

.cal-dots-bar {
  display: flex;
  gap: 2px;
  margin-top: auto;
}

.cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

/* Rejilla Horaria para Día, 3 Días, Semana (Timegrid) */
.cal-timegrid-wrapper {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 20px;
}

.cal-timegrid-header-row {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card);
  position: sticky;
  top: 0;
  z-index: 10;
}

.cal-timegrid-gutter {
  width: 50px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-color);
}

.cal-timegrid-day-col-header {
  flex: 1;
  padding: 8px 4px;
  text-align: center;
  border-right: 1px solid var(--border-color);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cal-timegrid-day-col-header:last-child {
  border-right: none;
}

.cal-timegrid-day-col-header.is-today {
  color: var(--orange-pickme);
}

.cal-timegrid-day-num {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
}

.cal-timegrid-day-col-header.is-today .cal-timegrid-day-num {
  background: var(--orange-pickme);
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
}

.cal-timegrid-body {
  display: flex;
  flex-direction: column;
}

.cal-timegrid-hour-row {
  display: flex;
  min-height: 52px;
  border-bottom: 1px solid var(--border-color);
}

.cal-timegrid-hour-label {
  width: 50px;
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-dim);
  text-align: right;
  padding: 4px 6px 0 0;
  border-right: 1px solid var(--border-color);
}

.cal-timegrid-hour-cell {
  flex: 1;
  border-right: 1px solid var(--border-color);
  position: relative;
  padding: 2px;
  cursor: pointer;
  transition: background 0.15s;
}

.cal-timegrid-hour-cell:last-child {
  border-right: none;
}

.cal-timegrid-hour-cell:hover {
  background: rgba(255, 255, 255, 0.02);
}

.cal-grid-event-block {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  padding: 3px 6px;
  border-left-width: 3px;
  border-left-style: solid;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  cursor: pointer;
}

.cal-grid-event-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-grid-event-sub {
  font-size: 0.65rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   SECCIÓN 2: KANBAN TÁCTIL Y SWIPEABLE
   ========================================================================== */
.kanban-view-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Selector de Modo Dual: Desarrollo vs Suscripciones */
.kanban-mode-switcher {
  display: flex;
  background: var(--bg-surface);
  padding: 6px 12px;
  gap: 8px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.kanban-mode-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.kanban-mode-btn.active {
  background: rgba(240, 135, 87, 0.15);
  border-color: var(--orange-pickme);
  color: var(--orange-pickme);
}

/* Radar de Suscripciones */
.subscriptions-radar-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  overflow-y: auto;
  gap: 12px;
}

.sub-radar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.mrr-badge {
  font-size: 1.15rem;
  font-weight: 800;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.subscriptions-list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sub-card-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left-width: 4px !important;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-card);
}

.sub-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.sub-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 8px;
}

/* Tarjeta de Proyecto en Perfil de Cliente 360 */
.profile-project-card {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.profile-project-card:active {
  background: var(--bg-card-hover);
  border-color: var(--orange-pickme);
}

/* Pestañas Superiores de Columnas con Iconos Minimalistas */
.kanban-column-tabs {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  padding: 8px 10px;
  flex-shrink: 0;
  gap: 6px;
}

.kanban-tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px 6px 4px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.kanban-tab-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s;
}

.kanban-tab-badge {
  font-size: 0.68rem;
  font-weight: 800;
  background: var(--bg-card);
  color: var(--text-secondary);
  padding: 2px 7px;
  border-radius: 10px;
  margin-top: 5px;
  border: 1px solid var(--border-color);
}

.kanban-tab-btn.active {
  color: var(--orange-pickme);
  background: rgba(240, 135, 87, 0.1);
}

.kanban-tab-btn.active svg {
  transform: translateY(-1px) scale(1.12);
}

.kanban-tab-btn.active .kanban-tab-badge {
  background: var(--orange-pickme);
  color: #fff;
  border-color: var(--orange-pickme);
}

/* Contenedor Deslizable Horizontal (Swipe) */
.kanban-columns-slider {
  flex: 1;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.kanban-columns-slider::-webkit-scrollbar {
  display: none;
}

.kanban-column {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  gap: 14px;
}

.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border-color);
  margin-bottom: 2px;
}

.kanban-column-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.kanban-column-sla-badge {
  font-size: 0.7rem;
  color: var(--text-dim);
  background: var(--bg-card);
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.kanban-cards-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 20px;
}

/* Tarjeta Kanban */
.kanban-card {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 15px 16px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left-width: 5px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  /* border-right is SLA indicator — no transition so it stays solid */
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s, opacity 0.2s;
  position: relative;
}

.kanban-card:active {
  transform: scale(0.99);
}

.kanban-card.is-held {
  transform: scale(1.04) rotate(1deg);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7);
  background: var(--bg-card-hover);
  border-color: var(--orange-pickme);
  z-index: 50;
  opacity: 0.95;
}

.kanban-card.card-paid {
  opacity: 0.55;
  filter: grayscale(0.2);
}

.card-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.card-client-name {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.25;
}

.card-project-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.card-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.card-sla-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
}

.sla-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.card-actions-quick {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Botón Minimalista de Mensaje / Contacto Rápido */
.quick-wa-btn {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.quick-wa-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.2s;
}

.quick-wa-btn:hover {
  background: rgba(240, 135, 87, 0.12);
  color: var(--orange-pickme);
  border-color: var(--orange-pickme);
}

.quick-wa-btn:active {
  background: var(--orange-pickme);
  color: #ffffff;
  border-color: var(--orange-pickme);
  transform: scale(0.92);
}

.revision-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--orange-pickme);
  background: rgba(240, 135, 87, 0.15);
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(240, 135, 87, 0.3);
}

/* ==========================================================================
   SECCIÓN 3: DIRECTORIO DE CLIENTES
   ========================================================================== */
.client-directory-container {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-wrapper svg {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
  color: var(--text-dim);
}

.app-search-input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
}

.app-search-input:focus {
  border-color: var(--orange-pickme);
}

/* Chips de Filtros Alfabéticos Deslizables */
.filter-chips-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0 6px 0;
  -webkit-overflow-scrolling: touch;
}

.filter-chips-scroll::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  flex-shrink: 0;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.filter-chip.active {
  background: rgba(240, 135, 87, 0.15);
  border-color: var(--orange-pickme);
  color: var(--orange-pickme);
  font-weight: 700;
}

.client-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Tarjeta Compacta de Cliente */
.client-card-compact {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left-width: 4px !important;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s, background 0.15s;
}

.client-card-compact:active {
  transform: scale(0.98);
  background: var(--bg-card-hover);
}

.client-card-main-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-right: 10px;
}

.client-card-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.client-compact-name {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}

.client-compact-company {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.client-compact-tags-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.status-badge-compact {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text-secondary);
}

/* ==========================================================================
   SECCIÓN 4: DASHBOARDS
   ========================================================================== */
.dashboard-container {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#dash-view-general,
#dash-view-expenses {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.metrics-kpi-grid { gap: 14px !important;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kpi-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-weight: 600;
}

.kpi-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-main);
}

.kpi-sub {
  font-size: 0.72rem;
  color: #4ade80;
  font-weight: 600;
}

.kpi-sub.alert {
  color: var(--status-red);
}

.chart-card-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chart-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
}

.pipeline-funnel-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.funnel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
}

.funnel-name {
  width: 95px;
  color: var(--text-secondary);
  font-weight: 600;
}

.funnel-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--bg-input);
  border-radius: 4px;
  overflow: hidden;
}

.funnel-bar-fill {
  height: 100%;
  background: var(--orange-pickme);
  border-radius: 4px;
}

.funnel-count {
  width: 24px;
  text-align: right;
  font-weight: 700;
  color: var(--text-main);
}

/* ==========================================================================
   SECCIÓN 5: AJUSTES & PANEL DE CONTROL
   ========================================================================== */
.settings-container {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-btn {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s;
}

.settings-btn:active {
  background: var(--bg-card-hover);
  border-color: var(--orange-pickme);
}

.settings-btn.primary {
  background: var(--orange-pickme);
  color: #fff;
  border-color: var(--orange-pickme);
}

.settings-btn.primary:active {
  background: #d96535;
}

/* ==========================================================================
   BARRA DE NAVEGACIÓN INFERIOR (BOTTOM NAV BAR - 5 SECCIONES)
   ========================================================================== */
.bottom-nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(var(--nav-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: rgba(23, 23, 25, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 100;
}

.nav-item-btn {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 4px;
}

.nav-item-btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s;
}

.nav-item-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.nav-item-btn.active {
  color: var(--orange-pickme);
}

.nav-item-btn.active svg {
  transform: translateY(-2px);
}

/* ==========================================================================
   SPEED DIAL & BOTONES FLOTANTES DEL PULGAR
   ========================================================================== */
.speed-dial-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.speed-dial-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.speed-dial-menu {
  position: fixed;
  right: 18px;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 80px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  z-index: 160;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.speed-dial-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.speed-dial-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.speed-dial-label {
  background: var(--bg-surface);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: var(--shadow-card);
  white-space: nowrap;
}

.speed-dial-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-elevated);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.speed-dial-btn:active {
  transform: scale(0.9);
}

.speed-dial-btn.speed-dial-appointment {
  background: var(--orange-pickme);
  color: #fff;
}

.speed-dial-btn.speed-dial-new {
  background: #177c25;
  color: #fff;
}

.speed-dial-btn.speed-dial-exist {
  background: var(--orange-peach);
  color: #171719;
}

.floating-thumb-controls {
  position: fixed;
  right: 18px;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 170;
}

.fab-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-elevated);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s;
}

.fab-btn:active {
  transform: scale(0.92);
}

.fab-btn.fab-primary {
  background: var(--orange-pickme);
  color: #ffffff;
}

.fab-btn.fab-primary.open svg {
  transform: rotate(45deg);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fab-btn.fab-primary svg {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fab-btn.fab-secondary {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  width: 44px;
  height: 44px;
}

/* ==========================================================================
   PANEL LATERAL DERECHO (ESTILO GOOGLE CALENDAR)
   ========================================================================== */
.drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}

.drawer-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.side-drawer-right {
  position: fixed;
  top: 0;
  right: 0;
  width: 290px;
  max-width: 82vw;
  height: 100%;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-color);
  z-index: 210;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  overflow-y: auto;
}

.side-drawer-right.open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.drawer-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
}

.drawer-section-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.8px;
  margin: 14px 0 8px 6px;
}

.drawer-menu-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drawer-item-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.drawer-item-btn:active, .drawer-item-btn.active {
  background: rgba(240, 135, 87, 0.12);
  color: var(--orange-pickme);
  font-weight: 700;
}

.drawer-item-btn svg {
  width: 18px;
  height: 18px;
}

/* Filtros con Toggles */
.filter-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.filter-left-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 500;
}

.filter-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.filter-checkbox {
  accent-color: var(--orange-pickme);
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   MENÚS INFERIORES (BOTTOM SHEETS)
   ========================================================================== */
.sheet-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}

.sheet-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 70vh;
  max-height: 94vh;
  background: var(--bg-surface);
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
  border-top: 1px solid var(--border-color);
  box-shadow: var(--shadow-elevated);
  z-index: 310;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32, 1, 0.23, 1);
  display: flex;
  flex-direction: column;
  padding: 16px 20px calc(var(--safe-bottom) + 26px) 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.bottom-sheet.open {
  transform: translateY(0);
}

.sheet-handle {
  width: 44px;
  height: 5px;
  background: var(--border-color);
  border-radius: 3px;
  margin: 0 auto 18px auto;
  flex-shrink: 0;
  opacity: 0.9;
}

.sheet-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}

.sheet-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.25;
}

/* Formularios en Modales con Mayor Espacio y Legibilidad */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.form-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 2px;
}

.form-control {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.94rem;
  outline: none;
  transition: border-color 0.2s;
}

select.form-control {
  appearance: auto;
  background: var(--bg-card);
  color: var(--text-main);
}

select.form-control option {
  background: #1e1e2e;
  color: var(--text-main);
}

.form-control:focus {
  border-color: var(--orange-pickme);
}

/* Timeline en Bottom Sheet */
.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
  border-left: 2px solid var(--border-color);
  padding-left: 14px;
  margin-left: 6px;
}

.timeline-item {
  position: relative;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -19px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange-pickme);
}

.sheet-footer-actions {
  display: flex;
  gap: 12px;
  margin-top: auto;
}

.btn-modal {
  flex: 1;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.94rem;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  min-height: 48px;
}

.btn-modal.primary { background: var(--orange-pickme); color: #fff; }
.btn-modal.secondary { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); }
.btn-modal.success { background: var(--green-pickme); color: #fff; }
.btn-modal.warning { background: rgba(240, 135, 87, 0.18); color: var(--orange-pickme); border: 1px solid var(--orange-pickme); }

/* ==========================================================================
   PICKER DE PLANTILLAS DE WHATSAPP
   ========================================================================== */
.wa-template-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}

.wa-template-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.wa-template-item.selected {
  border-color: #25d366;
  background: rgba(37, 211, 102, 0.06);
}

.wa-template-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
}

.wa-template-preview {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.toast-notification {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: rgba(31, 31, 35, 0.95);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
  color: var(--text-main);
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 0.86rem;
  font-weight: 600;
  box-shadow: var(--shadow-elevated);
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.toast-notification.show {
  transform: translateX(-50%) translateY(0);
}

.toast-icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--orange-pickme);
  flex-shrink: 0;
}

/* ==========================================================================
   MINIMALIST SVG ICON HELPERS
   ========================================================================== */
.icon-svg-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -2px;
  flex-shrink: 0;
}

.icon-clock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -1px;
  flex-shrink: 0;
}

.btn-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.settings-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 6px;
  color: currentColor;
}

.filter-color-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

.filter-color-dot.dot-capacitacion { background: var(--blue-capacitacion); }
.filter-color-dot.dot-crm { background: var(--orange-pickme); }
.filter-color-dot.dot-recruit { background: #4ade80; }
.filter-color-dot.dot-cards { background: var(--orange-peach); }


/* Kanban Dynamic Header */

/* ==========================================================================
   NUEVAS MEJORAS UI/UX (JERARQUÍA, ACORDEONES, BOTONES)
   ========================================================================== */

/* 1. Jerarquía Visual y Tipografía (Kanban y Agenda) */
.card-title-main, .agenda-event-title {
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #ffffff !important;
  margin-bottom: 3px;
  line-height: 1.2;
}

.card-text-secondary, .agenda-event-meta, .agenda-event-company, .agenda-event-service-tag {
  font-weight: 400 !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 1.4;
}

/* 3. Acordeones Modales (Bottom Sheets) */
.custom-accordion {
  background: transparent;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}
.custom-accordion summary {
  padding: 14px 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-main);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.custom-accordion summary::-webkit-details-marker {
  display: none;
}
.custom-accordion summary::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: cover;
  opacity: 0.5;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.custom-accordion[open] summary::after {
  transform: rotate(180deg);
}
.custom-accordion-content {
  padding-bottom: 16px;
  padding-top: 4px;
}

/* 3. Resaltado Financiero */
.financial-total-box {
  background: rgba(255, 255, 255, 0.06);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.financial-total-box span {
  font-size: 0.85rem;
  font-weight: 600;
}
.financial-total-box b {
  font-size: 1.15rem;
  color: #ffffff;
}

/* 4. Botones y Accesibilidad */
.btn-wa-primary {
  background: rgba(37, 211, 102, 0.15) !important;
  color: #25D366 !important;
  border: 1px solid rgba(37, 211, 102, 0.3) !important;
  font-weight: 600 !important;
}

.btn-destructive {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #fb7185 !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  font-weight: 600 !important;
}




details.client-service-accordion[open] .acc-chevron { transform: rotate(180deg); transition: transform 0.2s; }
details.client-service-accordion .acc-chevron { transition: transform 0.2s; }

/* ==========================================================================
   FASE 2 — Checklist Drawer, Lock Screen, PIN Numpad
   ========================================================================== */

/* ---- Checklist Drawer (desliza desde la derecha) ---- */
.checklist-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 400;
}
.checklist-drawer-backdrop.open { display: block; }

.checklist-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 85%;
  max-width: 340px;
  height: 100%;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-color);
  z-index: 401;
  display: flex;
  flex-direction: column;
  padding: 20px 16px 24px;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
.checklist-drawer.open { transform: translateX(0); }

.checklist-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.checklist-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.checklist-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
}
.checklist-progress-fill {
  height: 100%;
  background: var(--orange-pickme);
  border-radius: 99px;
  transition: width 0.3s ease;
}
.checklist-progress-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.checklist-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.checklist-item:hover { background: rgba(255,255,255,0.04); }

.checklist-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--orange-pickme);
  cursor: pointer;
  flex-shrink: 0;
}

.checklist-item-label {
  font-size: 0.88rem;
  color: var(--text-main);
  flex: 1;
  line-height: 1.3;
}
.checklist-item-label.done {
  text-decoration: line-through;
  color: var(--text-dim);
}

.checklist-item-del {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.checklist-item:hover .checklist-item-del { opacity: 1; }

.checklist-add-btn {
  margin-top: 16px;
  background: none;
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 0.85rem;
  padding: 10px;
  width: 100%;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.checklist-add-btn:hover {
  border-color: var(--orange-pickme);
  color: var(--text-main);
}

/* Progreso en la tarjeta Kanban */
.card-checklist-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.card-checklist-track {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
}
.card-checklist-fill {
  height: 100%;
  background: var(--orange-pickme);
  border-radius: 99px;
}
.card-checklist-label {
  font-size: 0.68rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.card-checklist-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
}
.card-checklist-btn:hover { color: var(--orange-pickme); }

/* ---- Lock Screen ---- */
.lock-screen {
  position: fixed;
  inset: 0;
  background: var(--bg-app);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  display: none;
}
.lock-screen.visible { display: flex; }

.lock-logo {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--orange-pickme);
  letter-spacing: -1px;
  margin-bottom: 6px;
}
.lock-user-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 4px;
}
.lock-subtitle {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 28px;
  text-align: center;
}

.lock-form {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.lock-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  color: var(--text-main);
  font-size: 0.94rem;
  outline: none;
  text-align: center;
}
.lock-input:focus { border-color: var(--orange-pickme); }

.lock-pin-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.lock-pin-dots {
  display: flex;
  gap: 16px;
  margin: 8px 0;
}
.pin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  background: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.pin-dot.filled {
  background: var(--orange-pickme);
  border-color: var(--orange-pickme);
}

.lock-numpad {
  display: grid;
  grid-template-columns: repeat(3, 72px);
  gap: 12px;
  margin-top: 8px;
}
.numpad-key {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.numpad-key:active {
  background: var(--bg-card-hover);
  transform: scale(0.93);
}
.numpad-key.numpad-empty {
  background: transparent;
  border-color: transparent;
  pointer-events: none;
}
.numpad-key.numpad-del {
  font-size: 1.2rem;
  color: var(--text-secondary);
  background: transparent;
  border-color: transparent;
}

.lock-error {
  font-size: 0.8rem;
  color: var(--status-red);
  min-height: 18px;
  text-align: center;
  margin-top: 4px;
}

.lock-btn {
  margin-top: 16px;
  background: var(--orange-pickme);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  max-width: 320px;
}

/* Toggle Checkbox Switches */
.toggle-checkbox {
  appearance: none;
  width: 40px;
  height: 22px;
  background: rgba(255,255,255,0.1);
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  outline: none;
  transition: background 0.3s;
}
.toggle-checkbox::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.toggle-checkbox:checked {
  background: var(--orange-pickme);
}
.toggle-checkbox:checked::after {
  transform: translateX(18px);
}

/* ==========================================================================
   REVISIÓN UX/UI GLOBAL — PickME CRM
   Objetivo: Jerarquía tipográfica clara, respiración entre elementos,
   botones proporcionales, consistencia visual en toda la app.
   ========================================================================== */

/* ---- Header: Saludo alineado y tipografía refinada ---- */
.header-title {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.1px;
}

.brand-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* ---- Jerarquía tipográfica global de tarjetas ---- */
.card-title-main {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.25;
}

.card-text-secondary {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.3;
  margin-top: 2px;
}

/* ---- Kanban Cards: respiración y bordes más suaves ---- */
.kanban-card {
  padding: 14px 15px !important;
  border-radius: 13px !important;
  gap: 8px !important;
}

.kanban-cards-wrapper {
  gap: 12px !important;
}

.kanban-column {
  padding: 14px 14px !important;
  gap: 0 !important;
}

/* Header de columna más limpio */
.kanban-column-header {
  padding-bottom: 10px !important;
  margin-bottom: 12px !important;
}

.kanban-column-title {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1px;
  color: var(--text-secondary) !important;
  text-transform: uppercase;
  font-size: 0.72rem !important;
}

/* Badge de conteo de columna */
.kanban-tab-badge {
  font-size: 0.65rem !important;
  padding: 1px 6px !important;
  margin-top: 4px !important;
}

/* ---- Agenda: card refinada ---- */
.agenda-event-card {
  padding: 11px 13px !important;
  gap: 10px !important;
}

.agenda-event-title {
  font-size: 0.92rem !important;
}

.agenda-event-meta {
  font-size: 0.76rem !important;
  margin-top: 2px;
}

.agenda-schedule-feed {
  padding: 12px 14px !important;
  gap: 14px !important;
}

/* ---- Directorio de Clientes: alineación y respiración ---- */
.client-card-compact {
  padding: 11px 13px !important;
}

.client-compact-name {
  font-size: 0.92rem !important;
}

.client-compact-company {
  font-size: 0.76rem !important;
}

.client-directory-container {
  padding: 12px 14px !important;
  gap: 10px !important;
}

/* ---- KPIs Dashboard: valores más legibles ---- */
.kpi-card {
  padding: 13px 14px !important;
  gap: 3px !important;
}

.kpi-label {
  font-size: 0.7rem !important;
  letter-spacing: 0.4px;
}

.kpi-value {
  font-size: 1.35rem !important;
  line-height: 1.15;
}

.kpi-sub {
  font-size: 0.7rem !important;
  margin-top: 1px;
}

/* ---- Chart Cards: más espacio interno ---- */
.chart-card-box {
  padding: 14px 15px !important;
  gap: 10px !important;
  border-radius: var(--radius-md) !important;
}

.chart-title {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1px;
}

/* ---- Suscripciones Radar ---- */
.sub-card-item {
  padding: 11px 13px !important;
  gap: 6px !important;
}

.subscriptions-radar-view {
  padding: 12px 14px !important;
  gap: 10px !important;
}

/* ---- Bottom Sheets: tipografía interna ---- */
.sheet-title {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px;
}

/* Sección de encabezado de sheets: separación más limpia */
.sheet-header {
  padding-bottom: 14px !important;
  margin-bottom: 16px !important;
}

/* ---- Botones modales: proporciones correctas ---- */
.btn-modal {
  padding: 11px 16px !important;
  font-size: 0.88rem !important;
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1px;
}

/* ---- Settings: separación entre cards y tipografía interna ---- */
.settings-container {
  padding: 14px 14px !important;
  gap: 14px !important;
}

.settings-card {
  padding: 14px 15px !important;
  gap: 10px !important;
}

.settings-card-title {
  font-size: 0.88rem !important;
  letter-spacing: 0.1px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 2px;
}

.settings-btn {
  padding: 10px 13px !important;
  font-size: 0.84rem !important;
  border-radius: var(--radius-sm) !important;
}

.settings-btn-icon {
  color: var(--text-secondary);
}

/* ---- Nav Bar: labels más discretos ---- */
.nav-item-label {
  font-size: 0.63rem !important;
  letter-spacing: 0.3px;
}

/* ---- Drawer Lateral: respiración mejorada ---- */
.side-drawer-right {
  padding: 18px 14px !important;
}

.drawer-header {
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
}

.drawer-section-title {
  font-size: 0.7rem !important;
  margin: 12px 0 6px 4px !important;
  letter-spacing: 1px;
}

.drawer-item-btn {
  padding: 9px 10px !important;
  font-size: 0.84rem !important;
  border-radius: var(--radius-sm) !important;
  gap: 10px !important;
}

/* ---- Checklist Drawer: proporciones afinadas ---- */
.checklist-drawer {
  padding: 18px 15px 20px !important;
}

.checklist-drawer-header {
  margin-bottom: 14px !important;
}

.checklist-item {
  padding: 9px 4px !important;
  gap: 10px !important;
}

.checklist-item-label {
  font-size: 0.86rem !important;
}

.checklist-add-btn {
  font-size: 0.82rem !important;
  padding: 9px !important;
  margin-top: 14px !important;
}

/* ---- Lock Screen: proporciones más balanceadas ---- */
.lock-logo {
  font-size: 2rem !important;
  margin-bottom: 4px !important;
}

.lock-subtitle {
  font-size: 0.8rem !important;
  margin-bottom: 24px !important;
}

.numpad-key {
  width: 68px !important;
  height: 68px !important;
  font-size: 1.4rem !important;
}

.lock-numpad {
  gap: 10px !important;
}

/* ---- Pill de servicio: tamaño consistente ---- */
.service-pill {
  font-size: 0.65rem !important;
  padding: 2px 6px !important;
}

/* ---- FAB Button: sombra más sutil ---- */
.fab-btn {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

/* ---- Toast: tipografía ---- */
.toast-notification {
  font-size: 0.84rem !important;
  padding: 11px 16px !important;
  border-radius: var(--radius-md) !important;
}

/* ---- KPI Sub-labels de alerta: consistencia de color ---- */
.kpi-sub.alert {
  color: #c47c3e !important;
}

/* ---- Funnel Bars del dashboard: etiquetas más legibles ---- */
.funnel-name {
  font-size: 0.76rem !important;
  width: 90px !important;
}

.funnel-row {
  font-size: 0.76rem !important;
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 1: BARRA LATERAL
   ========================================================================== */
@media (min-width: 1024px) {
  /* 1. Transformar barra inferior en barra lateral izquierda */
  .bottom-nav-bar {
    top: 0 !important;
    left: 0 !important;
    width: 220px !important;
    height: 100vh !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-top: calc(var(--header-height) + 20px) !important;
    border-top: none !important;
    border-right: 1px solid var(--border-color);
    background: var(--bg-surface) !important;
  }
  
  /* 2. Alinear los botones en formato de lista */
  .nav-item-btn {
    flex-direction: row !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 52px !important;
    padding: 0 20px !important;
    gap: 16px !important;
    flex: none !important;
  }
  
  /* 3. Ajustar el texto de los botones */
  .nav-item-label {
    font-size: 0.95rem !important;
    display: block !important;
    letter-spacing: 0.2px !important;
  }

  /* 4. Recorrer el contenido y el encabezado a la derecha para que no se tapen */
  .main-content {
    margin-left: 220px !important;
  }
  .app-header {
    margin-left: 220px !important;
    width: calc(100% - 220px) !important;
  }
}

/* Tablet Vertical (Mini Barra de íconos) */
@media (min-width: 768px) and (max-width: 1023px) {
  .bottom-nav-bar {
    top: 0 !important;
    left: 0 !important;
    width: 80px !important;
    height: 100vh !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-top: calc(var(--header-height) + 20px) !important;
    border-top: none !important;
    border-right: 1px solid var(--border-color);
    background: var(--bg-surface) !important;
  }
  .nav-item-btn {
    width: 100% !important;
    height: 70px !important;
    flex: none !important;
    margin-bottom: 8px;
  }
  .main-content {
    margin-left: 80px !important;
  }
  .app-header {
    margin-left: 80px !important;
    width: calc(100% - 80px) !important;
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 2: LOGO Y BOTÓN FLOTANTE
   ========================================================================== */
@media (min-width: 1024px) {
  
  /* 5. Mover y adaptar el Header (Logo) a la Barra Lateral */
  .app-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 220px !important;
    height: 80px !important; /* Espacio superior en la barra */
    margin-left: 0 !important;
    border-bottom: none !important;
    background: transparent !important;
    z-index: 1001 !important;
  }
  
  /* Ocultamos el ícono de menú hamburguesa porque no se usa en PC */
  .header-actions {
    display: none !important;
  }
  
  /* Centramos el logo dentro del espacio asignado */
  .brand-wrapper {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
  }
  
  .brand-logo {
    max-width: 130px !important;
    height: auto !important;
  }

  /* Aprovechar el espacio que dejó el header arriba */
  body {
    padding-top: 0 !important;
  }
  .main-content {
    height: 100vh !important;
    padding-top: 20px !important;
  }

  /* 6. Convertir FAB (+) en Botón Normal en la base del Sidebar */
  .floating-thumb-controls {
    position: fixed !important;
    left: 20px !important;
    bottom: 24px !important;
    right: auto !important;
    width: 180px !important;
    height: 48px !important;
    z-index: 1001 !important;
  }

  .fab-btn {
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--radius-md) !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--orange-pickme) !important;
    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.25) !important;
    transition: transform 0.2s, background 0.2s !important;
  }

  .fab-btn:hover {
    background: #f0434f !important;
    transform: translateY(-2px) !important;
  }

  .fab-btn::after {
    content: "Nuevo Proyecto" !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    color: #ffffff !important;
  }

  #fab-add-icon {
    width: 18px !important;
    height: 18px !important;
    margin-bottom: 1px !important;
  }

  /* 7. Ajustar el menú desplegable (Speed Dial) para que salga a la izquierda */
  .speed-dial-menu {
    position: fixed !important;
    left: 20px !important;
    bottom: 84px !important; /* Justo arriba del nuevo botón */
    right: auto !important;
    align-items: flex-start !important; /* Alinear a la izquierda */
    z-index: 1002 !important;
  }

  /* Voltear los items para que el icono quede a la izquierda y texto a la derecha */
  .speed-dial-item {
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
    gap: 12px !important;
  }

  .speed-dial-label {
    margin-right: 0 !important;
    margin-left: 0 !important;
    font-size: 0.85rem !important;
    text-align: left !important;
  }
}

/* ==========================================================================
   ALINEACIÓN DEL LOGO CON ICONOS (PC)
   ========================================================================== */
@media (min-width: 1024px) {
  .brand-wrapper {
    justify-content: flex-start !important;
    padding-left: 20px !important; /* Exactamente el mismo padding que los botones */
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 3: DRAWERS LATERALES (BOTTOM SHEETS)
   ========================================================================== */
@media (min-width: 1024px) {
  
  /* Convertir menús inferiores en paneles laterales derechos */
  .bottom-sheet {
    top: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    right: 0 !important;
    width: 480px !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: 1px solid var(--border-color) !important;
    box-shadow: -15px 0 40px rgba(0,0,0,0.5) !important;
    
    /* Cambiar animación de abajo-arriba a derecha-izquierda */
    transform: translateX(100%) !important;
    transition: transform 0.35s cubic-bezier(0.32, 1, 0.23, 1) !important;
  }
  
  .bottom-sheet.open {
    transform: translateX(0) !important;
  }
  
  /* Ocultar la barrita gris de arrastrar */
  .sheet-handle {
    display: none !important;
  }

  /* Ajustar el fondo oscuro (backdrop) para escritorio */
  .sheet-backdrop.open {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(2px) !important;
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 4: KANBAN 5 COLUMNAS SIMULTÁNEAS
   ========================================================================== */
@media (min-width: 1024px) {
  
  /* 1. Ocultar la barra superior de iconos (pestañas) */
  .kanban-column-tabs {
    display: none !important;
  }

  /* 2. Transformar el slider en un contenedor de 5 columnas fluidas */
  .kanban-columns-slider {
    display: flex !important;
    overflow-x: auto !important; /* Por si la pantalla se hace muy pequeña */
    scroll-snap-type: none !important;
    gap: 16px !important;
    padding: 0 20px 20px !important;
  }

  /* 3. Ajustar cada columna para que comparta el ancho disponible */
  .kanban-column {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 250px !important; /* Para que las tarjetas no se aplasten demasiado */
    scroll-snap-align: none !important;
    padding: 16px 0 !important;
    
    /* Separador sutil entre columnas */
    border-right: 1px dashed rgba(255, 255, 255, 0.05);
    padding-right: 16px !important;
  }

  /* Quitar el borde derecho a la última columna */
  .kanban-column:last-child {
    border-right: none !important;
    padding-right: 0 !important;
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 5: ESTILO "ASPI" (CARRILES/BUCKETS Y SCROLLBARS)
   ========================================================================== */
@media (min-width: 1024px) {
  
  /* 1. Estilizar el scrollbar general (el horizontal de abajo) */
  .kanban-columns-slider::-webkit-scrollbar {
    height: 8px !important;
  }
  .kanban-columns-slider::-webkit-scrollbar-track {
    background: transparent !important;
  }
  .kanban-columns-slider::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
  }
  .kanban-columns-slider::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2) !important;
  }

  /* 2. Convertir las columnas en "Carriles" (Buckets) con fondo y bordes redondeados */
  .kanban-column {
    background: rgba(255, 255, 255, 0.03) !important; /* Fondo sutil oscuro */
    border-radius: 16px !important;
    padding: 16px !important;
    border-right: none !important; /* Quitamos la línea punteada */
    
    /* Altura definida para que el carril llegue hasta abajo */
    height: calc(100vh - 60px) !important; 
    
    /* Matar el scroll horizontal feo de Windows y permitir solo vertical limpio */
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* 3. Estilizar el scrollbar interno de cada carril */
  .kanban-column::-webkit-scrollbar {
    width: 4px !important;
  }
  .kanban-column::-webkit-scrollbar-track {
    background: transparent !important;
  }
  .kanban-column::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 6: ESCALADO PROPORCIONAL Y AJUSTES DE TARJETA
   ========================================================================== */
@media (min-width: 1024px) {
  
  /* 1. Reducir la fuente base global en PC un ~10%. 
     Como usamos la medida 'rem' en todo el CSS, esto reduce proporcionalmente 
     absolutamente todos los textos de la app al mismo tiempo. */
  html {
    font-size: 14.5px !important; 
  }

  /* 2. Optimizar el espacio interno de las tarjetas en PC para que quepa más texto */
  .kanban-card {
    padding: 12px !important;
  }

  /* 3. Prevenir que la información rompa la tarjeta si es muy larga */
  .card-title-main {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* Máximo 2 líneas para el título, luego puntos suspensivos */
    -webkit-box-orient: vertical !important;  
    overflow: hidden !important;
  }
  
  .card-text-secondary {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; /* Máximo 3 líneas para descripción */
    -webkit-box-orient: vertical !important;  
    overflow: hidden !important;
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 7: REESTRUCTURACIÓN INTERNA DE TARJETAS
   ========================================================================== */
@media (min-width: 1024px) {
  
  /* 1. Evitar corte del título del proyecto (que se vea completo) */
  .card-title-main {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    margin-bottom: 6px !important;
  }

  /* 2. Separar Nombre del Cliente y Negocio en dos líneas */
  .c-separator { display: none !important; }
  .c-name { 
    display: block !important; 
    font-weight: 600 !important;
  }
  .c-company { 
    display: block !important; 
    color: var(--text-dim) !important; 
    font-size: 0.85em !important; 
    margin-top: 2px !important; 
  }

  /* 3. Reordenar elementos dentro de la tarjeta usando Flexbox */
  .kanban-card {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Romper el contenedor superior para poder mover la fecha libremente */
  .card-top-row {
    display: contents !important; 
  }
  
  .card-title-container {
    order: 1;
    padding-right: 0 !important;
  }
  
  .card-project-desc {
    order: 2;
    margin-top: 10px !important;
  }
  
  /* El botón inferior de "Garantía/Etiquetas" si existe */
  .card-footer-row {
    order: 3;
    margin-top: 10px !important;
  }
  
  /* La barra de progreso de checklist (0/7) */
  .card-checklist-bar {
    order: 4;
    margin-top: 14px !important;
  }

  /* 4. Mover Fecha y Botón Checklist hasta abajo de la tarjeta */
  .card-top-actions {
    order: 5;
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255,255,255,0.05); /* Línea divisoria sutil */
    width: 100%;
    
    /* Poner la fecha a la izquierda y el botón a la derecha */
    flex-direction: row-reverse !important; 
    justify-content: space-between !important;
  }

  /* Hacer que el botón de checklist parezca más un "botón" en PC */
  .card-checklist-btn {
    background: rgba(255,255,255,0.06) !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    color: var(--orange-pickme) !important;
  }
  .card-checklist-btn:hover {
    background: rgba(255,255,255,0.1) !important;
  }
  
  /* Para que el usuario sepa que el botón abre algo, le añadimos texto en PC */
  .card-checklist-btn::after {
    content: "Checklist" !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    margin-left: 6px !important;
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 8: PULIDO DE BORDES Y SOMBRAS
   ========================================================================== */
@media (min-width: 1024px) {
  
  /* 1. Solucionar la "línea difuminada" (era la sombra del cajón oculto asomándose) */
  #view-directorio, #view-ajustes, .bottom-sheet {
    box-shadow: none !important;
  }
  #view-directorio.active, #view-ajustes.active, .bottom-sheet.open {
    box-shadow: -15px 0 40px rgba(0,0,0,0.6) !important;
  }

  /* 2. Efecto "Infinito" en las columnas (pegadas hasta abajo) */
  .kanban-columns-slider {
    padding-bottom: 0 !important; /* Eliminamos el aire inferior del tablero */
  }
  
  .kanban-column {
    border-radius: 16px 16px 0 0 !important; /* Redondeamos solo arriba */
    height: calc(100vh - 20px) !important; /* Bajamos el carril hasta el límite inferior del monitor */
    padding-bottom: 40px !important; /* Damos aire interno para que la última tarjeta no choque con el piso */
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 9: MICRO-TIPOGRAFÍA EN TARJETAS (MÁS LIMPIO)
   ========================================================================== */
@media (min-width: 1024px) {
  
  /* Título del Proyecto */
  .card-title-main {
    font-size: 0.82rem !important; /* Letra más fina */
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    line-height: 1.3 !important;
  }
  
  /* Nombre del Cliente */
  .c-name {
    font-size: 0.75rem !important;
  }
  
  /* Nombre del Negocio / Empresa */
  .c-company {
    font-size: 0.68rem !important;
  }
  
  /* Descripción del Proyecto */
  .card-project-desc {
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
    color: var(--text-secondary) !important;
  }
  
  /* Etiquetas inferiores (Progreso 0/7, Fecha) */
  .card-checklist-label, 
  .card-date-badge {
    font-size: 0.68rem !important;
  }
  
  /* Texto del botón Checklist */
  .card-checklist-btn::after {
    font-size: 0.68rem !important;
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 10: AJUSTE DE MONITORES Y EFECTO INFINITO REAL
   ========================================================================== */
@media (min-width: 1024px) {
  
  /* 1. Hacer que las 5 columnas quepan en cualquier tamaño de monitor sin salir de la pantalla */
  .kanban-columns-slider {
    gap: 10px !important; /* Reducimos el hueco entre columnas */
    padding: 0 12px 0 12px !important; /* Reducimos el margen de las orillas */
  }
  
  .kanban-column {
    min-width: 190px !important; /* Permitimos que las columnas se hagan más angostas si el monitor es pequeño */
    
    /* 2. Garantizar que el carril baje hasta el infinito sin cortes (forzamos que sea más alto que la pantalla) */
    height: 110vh !important; 
    padding-bottom: 15vh !important; /* Damos aire interno para poder scrollear hasta la última tarjeta */
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 11: RESTAURAR MENÚ CONTEXTUAL (OPCIONES)
   ========================================================================== */
@media (min-width: 1024px) {
  
  /* 1. Revivir el contenedor de acciones que ocultamos */
  .header-actions {
    display: flex !important;
    position: fixed !important;
    top: 24px !important;
    right: 24px !important;
    z-index: 1000 !important;
  }
  
  /* 2. Convertir el ícono hamburguesa en un verdadero Botón de Opciones */
  .header-actions .header-btn {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 8px 16px 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    transition: transform 0.2s, background 0.2s !important;
  }

  .header-actions .header-btn:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    transform: translateY(-2px) !important;
  }

  /* 3. Agregar texto descriptivo al lado del ícono */
  .header-actions .header-btn::after {
    content: "Opciones / Filtros" !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: var(--text-main) !important;
  }
  
  /* 4. Manejar la sombra del panel lateral derecho (para que no se fugue cuando está cerrado) */
  .side-drawer-right {
    box-shadow: none !important;
  }
  .side-drawer-right.open {
    box-shadow: -15px 0 40px rgba(0,0,0,0.6) !important;
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 12: FAB HAMBURGUESA FLOTANTE INFERIOR
   ========================================================================== */
@media (min-width: 1024px) {
  
  /* 1. Reubicar el contenedor a la esquina inferior derecha */
  .header-actions {
    top: auto !important;
    bottom: 24px !important;
    right: 24px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  
  /* 2. Transformar el botón rectangular en un círculo flotante perfecto */
  .header-actions .header-btn {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    justify-content: center !important;
    background: var(--bg-surface) !important; 
    border: 1px solid rgba(255,255,255,0.15) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6) !important;
  }

  .header-actions .header-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-3px) !important;
  }

  /* 3. Eliminar el texto "Opciones / Filtros" */
  .header-actions .header-btn::after {
    display: none !important;
    content: none !important;
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 13: DASHBOARD GRID LAYOUT
   ========================================================================== */
@media (min-width: 1024px) {
  
  #view-dashboards {
    background: var(--bg-body) !important;
    overflow-y: auto !important; 
    height: 100vh !important;
  }
  
  .dashboard-container {
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 32px 40px 60px 40px !important;
  }

  /* El contenedor principal de métricas lo hacemos un grid de 12 columnas */
  #dash-view-general {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important; /* Tarjetas de misma altura en cada fila */
  }

  /* ------------------ FILA 1: KPIs Financieros y Operativos ------------------ */
  
  /* KPIs Financieros (Ingresos, Gastos, Utilidad) -> Ocupan 7 columnas */
  #dash-view-general > .metrics-kpi-grid:nth-of-type(1) {
    grid-column: span 7 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 tarjetas lado a lado */
    gap: 20px !important;
  }
  
  /* Anulamos el span 2 que traía "Utilidad" en móvil para que quepan los 3 en línea */
  #dash-view-general > .metrics-kpi-grid:nth-of-type(1) .kpi-card {
    grid-column: span 1 !important;
    justify-content: center !important;
    padding: 24px 20px !important;
  }

  /* KPIs Operativos (Proyectos Activos, SLA) -> Ocupan 5 columnas */
  #dash-view-general > .metrics-kpi-grid:nth-of-type(2) {
    grid-column: span 5 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 2 tarjetas lado a lado */
    gap: 20px !important;
    margin-top: 0 !important; /* Quitamos el margen superior que traía de móvil */
  }
  
  #dash-view-general > .metrics-kpi-grid:nth-of-type(2) .kpi-card {
    justify-content: center !important;
    padding: 24px 20px !important;
  }

  /* ------------------ FILA 2: Embudo y Métricas Macro ------------------ */
  
  /* Gráfica 1: Embudo Kanban */
  #dash-view-general > .chart-card-box:nth-of-type(1) { 
    grid-column: span 8 !important; 
  }
  
  /* Gráfica 2: Métricas Macro Globales */
  #dash-view-general > .chart-card-box:nth-of-type(2) { 
    grid-column: span 4 !important; 
  }

  /* ------------------ FILA 3: Desempeño y Riesgos ------------------ */
  
  /* Gráfica 3: Top 3 Clientes */
  #dash-view-general > .chart-card-box:nth-of-type(3) { 
    grid-column: span 4 !important; 
  }
  
  /* Gráfica 4: Rendimiento por Servicio */
  #dash-view-general > .chart-card-box:nth-of-type(4) { 
    grid-column: span 4 !important; 
  }
  
  /* Gráfica 5: Índice de Morosidad */
  #dash-view-general > .chart-card-box:nth-of-type(5) { 
    grid-column: span 4 !important; 
  }

  /* Mejorar el tamaño y visibilidad de los contenedores de gráfica en PC */
  .chart-card-box {
    padding: 24px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 16px !important;
  }
  
  .chart-title {
    font-size: 1.05rem !important;
    margin-bottom: 20px !important;
    display: block !important;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 12px;
  }

  /* Agrandar un poco los valores de los KPIs para aprovechar el espacio */
  .kpi-value {
    font-size: 1.8rem !important;
    margin: 4px 0 !important;
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 14: NUEVOS KPIs DE CRECIMIENTO
   ========================================================================== */
@media (min-width: 1024px) {
  
  /* Hacemos que la nueva fila de 4 KPIs ocupe las 12 columnas completas y se divida en 4 */
  #dash-view-general > .metrics-kpi-grid:nth-of-type(3) {
    grid-column: span 12 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 4 tarjetas lado a lado */
    gap: 20px !important;
    margin-top: 0 !important;
  }
  
  #dash-view-general > .metrics-kpi-grid:nth-of-type(3) .kpi-card {
    justify-content: center !important;
    padding: 24px 20px !important;
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 15: CORRECCIÓN DE COLUMNAS APLASTADAS (DASHBOARD)
   ========================================================================== */
@media (min-width: 1024px) {
  
  /* Corregimos el error del selector. Como agregamos un 3er grid de KPIs, 
     las gráficas se desplazaron y el CSS anterior no las atrapó, provocando 
     que se amontonaran las 5 en una sola fila. Usaremos nth-child para ser exactos. */

  /* ------------------ FILA 3: Embudo y Métricas Macro ------------------ */
  
  /* Gráfica 1 (Hijo 4): Embudo Kanban */
  #dash-view-general > .chart-card-box:nth-child(4) { 
    grid-column: span 8 !important; 
  }
  
  /* Gráfica 2 (Hijo 5): Métricas Macro Globales */
  #dash-view-general > .chart-card-box:nth-child(5) { 
    grid-column: span 4 !important; 
  }

  /* ------------------ FILA 4: Desempeño y Riesgos (Listas) ------------------ */
  
  /* Gráfica 3 (Hijo 6): Top 3 Clientes */
  #dash-view-general > .chart-card-box:nth-child(6) { 
    grid-column: span 4 !important; 
  }
  
  /* Gráfica 4 (Hijo 7): Rendimiento por Servicio */
  #dash-view-general > .chart-card-box:nth-child(7) { 
    grid-column: span 4 !important; 
  }
  
  /* Gráfica 5 (Hijo 8): Índice de Morosidad */
  #dash-view-general > .chart-card-box:nth-child(8) { 
    grid-column: span 4 !important; 
  }

  /* Ajuste tipográfico extra para las listas de texto de la última fila */
  #dash-top-clients, #dash-service-revenue, #dash-late-clients {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 16: REORGANIZACIÓN SEMÁNTICA DE KPIs
   ========================================================================== */
@media (min-width: 1024px) {
  
  /* ------------------ FILA 1: Finanzas (5 tarjetas) ------------------ */
  #dash-view-general > .metrics-kpi-grid:nth-of-type(1) {
    grid-column: span 12 !important; /* Ocupa todo el ancho */
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important; /* 5 columnas iguales */
    gap: 16px !important;
  }
  
  /* Resetear el span 1 a las tarjetas internas */
  #dash-view-general > .metrics-kpi-grid:nth-of-type(1) .kpi-card {
    grid-column: span 1 !important;
    justify-content: center !important;
    padding: 24px 20px !important;
  }

  /* ------------------ FILA 2: Operaciones (4 tarjetas) ------------------ */
  #dash-view-general > .metrics-kpi-grid:nth-of-type(2) {
    grid-column: span 12 !important; /* Ocupa todo el ancho */
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 4 columnas iguales */
    gap: 16px !important;
    margin-top: 0 !important;
  }
  
  #dash-view-general > .metrics-kpi-grid:nth-of-type(2) .kpi-card {
    grid-column: span 1 !important;
    justify-content: center !important;
    padding: 24px 20px !important;
  }

  /* Eliminar la vieja regla del bloque 3 que ahora ya no existe (porque fusionamos todo en 2 bloques) */
  #dash-view-general > .metrics-kpi-grid:nth-of-type(3) {
    display: none !important; 
  }

  /* Reajustar los nth-child de las gráficas porque quitamos un div.metrics-kpi-grid del HTML */
  /* Gráfica 1 (Embudo) -> Ahora es el hijo 3 */
  #dash-view-general > .chart-card-box:nth-child(3) { grid-column: span 8 !important; }
  /* Gráfica 2 (Macro) -> Hijo 4 */
  #dash-view-general > .chart-card-box:nth-child(4) { grid-column: span 4 !important; }
  /* Gráfica 3, 4, 5 (Listas) -> Hijos 5, 6, 7 */
  #dash-view-general > .chart-card-box:nth-child(5) { grid-column: span 4 !important; }
  #dash-view-general > .chart-card-box:nth-child(6) { grid-column: span 4 !important; }
  #dash-view-general > .chart-card-box:nth-child(7) { grid-column: span 4 !important; }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 17: GRID MASONRY PARA AJUSTES
   ========================================================================== */
@media (min-width: 1024px) {
  
  #view-ajustes {
    background: var(--bg-body) !important;
    overflow-y: auto !important; 
    height: 100vh !important;
  }
  
  #view-ajustes .settings-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 32px 40px 60px 40px !important;
    /* Usamos CSS Columns para lograr un efecto Masonry y equilibrar las alturas */
    column-count: 2 !important;
    column-gap: 24px !important;
  }

  #view-ajustes .settings-card {
    break-inside: avoid !important; /* Evita que una tarjeta se parta a la mitad entre columnas */
    margin-bottom: 24px !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 16px !important;
    padding: 24px !important;
  }
  
  #view-ajustes .settings-card-title {
    font-size: 1.05rem !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 12px;
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 17.1: CORRECCIÓN DE MASONRY EN AJUSTES
   ========================================================================== */
@media (min-width: 1024px) {
  #view-ajustes .settings-container {
    display: block !important; /* Vital para anular el flexbox móvil y que column-count funcione */
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 32px 40px 60px 40px !important;
    column-count: 2 !important;
    column-gap: 24px !important;
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 18: DIRECTORIO DE CLIENTES EN GRID
   ========================================================================== */
@media (min-width: 1024px) {
  
  #view-clientes {
    background: var(--bg-body) !important;
    overflow-y: auto !important; 
    height: 100vh !important;
  }
  
  .client-directory-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 32px 40px 60px 40px !important;
  }

  /* Transformar la lista larga en un Grid de 3 columnas estilo Pinterest/Contactos */
  #client-directory-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }

  /* Ajustes sutiles a la tarjeta en versión Desktop para que luzca premium */
  .client-card-compact {
    margin-bottom: 0 !important; /* El gap del grid se encarga del espacio */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .client-card-compact:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4) !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 18.1: REORGANIZACIÓN DE TARJETA DE CLIENTE
   ========================================================================== */
@media (min-width: 1024px) {
  
  /* Permitimos que el contenido de la tarjeta baje a una segunda línea si no cabe */
  .client-card-compact {
    flex-wrap: wrap !important;
    padding: 16px 20px !important;
    gap: 16px !important;
  }
  
  /* Hacemos que el contenedor de los botones tome el 100% del ancho,
     empujándolo hacia abajo como una "fila de acciones" separada */
  .client-card-compact > div:last-child {
    flex-basis: 100% !important;
    justify-content: flex-end !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    padding-top: 14px !important;
    margin-top: 4px !important;
  }

  /* Reducimos el tamaño de la información principal un poquito para que respire */
  .client-compact-name {
    font-size: 1.05rem !important;
  }
  
  .client-compact-company {
    font-size: 0.8rem !important;
    margin-bottom: 6px !important;
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 18.2: REVERSIÓN A TARJETA COMPACTA
   ========================================================================== */
@media (min-width: 1024px) {
  
  /* Quitamos el forzado a múltiples líneas para volver al diseño de 1 sola fila */
  .client-card-compact {
    flex-wrap: nowrap !important;
    padding: 12px 14px !important;
  }
  
  /* Hacemos que los botones vuelvan a la derecha y no ocupen el 100% abajo */
  .client-card-compact > div:last-child {
    flex-basis: auto !important;
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 18.3: EXPANSIÓN DE DIRECTORIO Y TARJETAS
   ========================================================================== */
@media (min-width: 1024px) {
  
  /* Expandimos el contenedor para que no deje tanto espacio negro a los lados */
  .client-directory-container {
    max-width: 1600px !important; 
    padding: 32px 60px 60px 60px !important; /* Más aire a los lados si es ultra-wide, pero el grid se estirará más */
  }

  /* Le damos más "aire" interno a cada tarjeta para que respiren los textos */
  .client-card-compact {
    padding: 18px 24px !important;
    gap: 18px !important; /* Más separación entre logo, info y botones */
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 18.4: ALINEACIÓN DE DIRECTORIO Y AGENDA
   ========================================================================== */
@media (min-width: 1024px) {
  
  /* Ajustamos el padding izquierdo y derecho para que cuadre exacto con el Dashboard y no se vea tan metido */
  .client-directory-container {
    max-width: 1400px !important; 
    padding: 32px 40px 60px 40px !important; 
  }
}

/* ==========================================================================

/* ==========================================================================
   MODO ESCRITORIO — PASO 19 (FINAL): AGENDA DUAL-PANE LIMPIA
   ========================================================================== */
@media (min-width: 1024px) {
  
  /* Cuando Agenda está ACTIVA, cambiar a grid de 2 columnas */
  #view-agenda.active {
    display: grid !important;
    grid-template-columns: 360px 1fr !important;
    grid-template-rows: 60px 1fr !important;
    overflow: hidden !important;
  }
  
  #view-agenda .agenda-top-bar {
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
  }
  
  #view-agenda #agenda-feed-container {
    display: flex !important;
    flex-direction: column !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    overflow-y: auto !important;
    border-right: 1px solid var(--border-color) !important;
    padding: 16px 16px 80px 16px !important;
  }
  
  #view-agenda #agenda-grid-container {
    display: none !important;
  }
  
  #view-agenda #desktop-calendar-module {
    display: flex !important;
    flex-direction: column !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    overflow-y: auto !important;
    padding: 24px 40px 80px 40px !important;
    background: var(--bg-body) !important;
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 19B: COMPONENTES DEL CALENDARIO MENSUAL DESKTOP
   ========================================================================== */
@media (min-width: 1024px) {

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

  .dcal-month-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-main);
    text-transform: capitalize;
  }

  /* La cuadricula de 7 columnas */
  .dcal-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 8px;
    flex: 1;
  }

  .dcal-day-header {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-dim);
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .dcal-cell {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    min-height: 90px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    transition: background 0.15s;
    cursor: default;
  }

  .dcal-cell:hover {
    background: rgba(255, 255, 255, 0.05);
  }

  .dcal-cell.is-today {
    background: rgba(240, 135, 87, 0.06);
    border-color: rgba(240, 135, 87, 0.35);
  }

  .dcal-cell.is-empty {
    background: transparent !important;
    border-color: transparent !important;
    cursor: default;
  }

  .dcal-date-num {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    align-self: flex-end;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 4px;
    flex-shrink: 0;
  }

  .dcal-cell.is-today .dcal-date-num {
    background: var(--orange-pickme);
    color: #fff;
    font-weight: 700;
  }

  .dcal-events {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
    flex: 1;
  }

  .dcal-event-item {
    font-size: 0.65rem;
    padding: 3px 6px;
    border-radius: 4px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    font-weight: 600;
  }

  .dcal-event-item:hover {
    filter: brightness(1.15);
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 19C: CORRECCIONES UX PANEL IZQUIERDO AGENDA
   ========================================================================== */
@media (min-width: 1024px) {
  
  /* Panel izquierdo: NO overflow horizontal, contenido que se adapta */
  #view-agenda #agenda-feed-container {
    overflow-x: hidden !important;
  }
  
  /* Los grupos de día no deben exceder el ancho del panel */
  #view-agenda .agenda-day-group {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* La lista de eventos dentro de un grupo tampoco */
  #view-agenda .agenda-events-list {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* La tarjeta de evento: flex-wrap para que el badge de hora baje si no cabe */
  #view-agenda .agenda-event-card {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  /* La info (nombre + empresa) ocupa todo el ancho disponible */
  #view-agenda .agenda-event-info {
    flex: 1 !important;
    min-width: 0 !important; /* Permite que el texto se trunque en lugar de expandir */
  }
  
  /* Truncar nombre si es muy largo */
  #view-agenda .agenda-event-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* El servicio también que no haga overflow */
  #view-agenda .agenda-event-meta {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* El badge de la hora: siempre visible en su propio renglón si no hay espacio */
  #view-agenda .agenda-event-time-badge {
    flex-shrink: 0 !important;
  }
  
  /* Separador visual entre el panel izquierdo y el calendario */
  #view-agenda #agenda-feed-container {
    background: rgba(255,255,255,0.01) !important;
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 19D: AJUSTE PROPORCIONAL DE COLUMNAS Y TIPOGRAFÍA
   ========================================================================== */
@media (min-width: 1024px) {

  /* Más ancho para la lista, calendario más compacto */
  #view-agenda.active {
    grid-template-columns: 440px 1fr !important;
  }

  /* Quitar el badge de tiempo (ya no existe) */
  #view-agenda .agenda-event-time-badge {
    display: none !important;
  }

  /* Las tarjetas con el nuevo diseño vertical */
  #view-agenda .agenda-event-card {
    gap: 2px !important;
    padding: 8px 10px !important;
    margin-bottom: 6px !important;
  }
  
  /* Celdas del calendario más compactas */
  .dcal-cell {
    min-height: 75px !important;
    padding: 5px 6px !important;
  }
  
  .dcal-date-num {
    font-size: 0.78rem !important;
    width: 22px !important;
    height: 22px !important;
  }
  
  .dcal-day-header {
    font-size: 0.68rem !important;
  }
  
  .dcal-event-item {
    font-size: 0.6rem !important;
    padding: 2px 4px !important;
  }
  
  .dcal-grid {
    gap: 5px !important;
  }
}

/* ==========================================================================
   MODO ESCRITORIO — PASO 20: ELIMINAR "CAJAS" EN AGENDA Y KANBAN
   Filosofía: las tarjetas deben flotar libremente sobre el fondo.
   Los separadores son líneas verticales limpias, no contenedores.
   ========================================================================== */
@media (min-width: 1024px) {

  /* --- KANBAN: Quitar fondo de columna, poner línea vertical divisora --- */
  .kanban-column {
    background: transparent !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
    padding: 20px 20px 80px 20px !important;
  }
  
  /* La última columna no tiene borde a la derecha */
  .kanban-column:last-child {
    border-right: none !important;
  }

  /* El título de columna queda como "flotante" sobre el fondo, sin caja */
  .kanban-column-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
    background: transparent !important;
  }

  /* --- AGENDA: Quitar cajas de las celdas del calendario --- */
  .dcal-cell {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    min-height: 80px !important;
  }

  .dcal-cell.is-empty {
    border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  }
  
  /* Quitar borde derecho en última columna de cada fila del calendario */
  .dcal-cell:nth-child(7n) {
    border-right: none !important;
  }
  
  /* El today con apenas un toque de color, sin caja */
  .dcal-cell.is-today {
    background: rgba(240, 135, 87, 0.04) !important;
    border-right: 1px solid rgba(240, 135, 87, 0.15) !important;
    border-bottom: 1px solid rgba(240, 135, 87, 0.15) !important;
  }
  
  /* Headers del calendario también sin caja */
  .dcal-day-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    text-align: center !important;
    padding-bottom: 8px !important;
  }
  
  /* Quitar gap entre celdas para que las líneas conecten */
  .dcal-grid {
    gap: 0 !important;
  }
  
  /* El panel izquierdo de agenda: fondo transparente */
  #view-agenda #agenda-feed-container {
    background: transparent !important;
  }
}