/* ============================================================
   THEME PART 08 — ESPACIADO ÚNICO DE TODA LA APP (22-09-2026)
   ------------------------------------------------------------
   Regla del dueño: el mismo margen en todas las vistas.
   · --esp-pagina  margen exterior del contenido de cada vista.
   · --esp-seccion entre secciones DISTINTAS (cabecera ↔ indicadores
                   ↔ tablero, bloques diferentes…).
   · --esp-grupo   entre piezas de un MISMO conjunto (tarjetas de una
                   fila de indicadores, columnas del CRM, rejillas…):
                   se tienen que leer como un bloque.
   · --esp-control entre un control y lo que controla (selector de
                   fechas o pestañas → su contenido, título → tarjeta).
   Se carga el último para mandar sobre el resto.
   ============================================================ */
:root {
  --esp-pagina: 24px;
  --esp-seccion: 16px;
  --esp-grupo: 3px;
  --esp-control: 8px;
}
@media (max-width: 768px) {
  :root { --esp-pagina: 14px; }
}

/* 1 · Margen exterior: lo pone la raíz de cada vista; los envoltorios
   interiores ya no añaden el suyo (antes unos 24px, otros 32px). */
.view-section > :is([id$="Root"], #informesView, #crmAgendaHost):not(#funnelRoot) {
  padding: var(--esp-pagina) !important;
  box-sizing: border-box;
}
.view-section > * > :is(.cli-wrap, .crm-root, .fac-root, .ppt-wrap, .informes-wrap, .cont-wrap, .forms-root, .eq-wrap, .agenda-section) {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
#dashboardRoot > .planner-shell { padding: 0 !important; margin: 0 !important; }

/* 2 · Ritmo vertical entre las secciones de cada vista */
.view-section > * > :is(.cli-wrap, .crm-root, .fac-root, .ppt-wrap, .informes-wrap, .cont-wrap, .forms-root, .eq-wrap, .agenda-section, .planner-shell) > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.view-section > * > :is(.cli-wrap, .crm-root, .fac-root, .ppt-wrap, .informes-wrap, .cont-wrap, .forms-root, .eq-wrap, .agenda-section, .planner-shell) > * + * {
  margin-top: var(--esp-seccion) !important;
}
/* Título + subtítulo: van juntos */
.view-section .cli-title + .cli-sub { margin-top: var(--esp-grupo) !important; }
/* Control → su contenido */
.view-section :is(.bbdd-rango, .ppt-subtabs, .inf-tabs, .cont-bloque-h) + * { margin-top: var(--esp-control) !important; }
.bbdd-rango { margin-bottom: 0 !important; }

/* 3 · Conjuntos: piezas que se leen como un bloque */
.bbdd-kpis, .cli-grid, .kpi-row, .kpi-funnel, .inf-mini, .summary-row, .bottom-row, .com-grid,
.cont-kpis, .cont-stats, .cont-io-row, .cont-grid3, .clid-grid, .clid-grid4, .clid-kpis,
.templates-grid, .cita-grid, .members-list,
.crm-board, .crm-board .crm-column, .crm-column-header.crm-pipe, .crm-board .crm-column-body,
.wa-app, .wa-list {
  gap: var(--esp-grupo) !important;
}
.crm-board { --crm-gap: var(--esp-grupo); }
/* Cabecera del CRM (título + filtros) sin margen propio: lo da el ritmo */
.crm-root > .crm-header { margin: 0 !important; }

/* Agenda del CRM y agenda/gantt dentro de Proyectos: el «planner-shell»
   interior no añade relleno propio (el margen lo pone la vista). */
.view-section .planner-shell { padding: 0 !important; margin: 0 !important; }
#crmAgendaContainer > .agenda-section { margin-top: 0 !important; }