/* ==========================================================================
   PideFácil · Sistema de diseño del backoffice (prefijo pf-)
   Lo carga Views/Shared/_Layout.cshtml, cuyo <body> lleva la clase pf-app,
   DESPUÉS de site.css (que sigue cargándose por las reglas suyas que aún se
   usan).
   Por eso lo nuevo va siempre por clases pf- propias y las piezas de Bootstrap
   solo cambian de aspecto dentro de un contenedor pf (pf-form, pf-field,
   pf-modal, pf-table): lo antiguo se sigue viendo igual.
   Reglas de uso (botones, ventanas, textos…) en el CLAUDE.md de la raíz,
   apartado "Sistema de diseño del backoffice". Si añades un componente,
   añádelo aquí con su comentario y apúntalo allí.

   1. Variables          5. Tablas            9. Librerías (DataTables, select2,
   2. Base               6. Formularios          SweetAlert2) y variables antiguas
   3. Armazón            7. Ventanas          10. Movimiento
   4. Componentes        8. Agentes           11. Móvil
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
:root {
  /* Tinta */
  --pf-ink: #132821;          /* texto */
  --pf-title: #2c3d18;        /* titulares */
  --pf-muted: #5c6a63;        /* texto secundario: ayudas, fechas, subtítulos */
  --pf-faint: #87928c;        /* solo iconos y textos de ejemplo en campos */

  /* Marca (verdes de pidefacil.es) */
  --pf-accent: #98b06a;       /* bordes de selección, barras */
  --pf-accent-ink: #557326;   /* verde de marca legible sobre blanco: antetítulos y enlaces */
  --pf-lime: #98d86b;         /* solo sobre el verde del menú: opción activa */
  --pf-btn: #b0c878;          /* botón principal */
  --pf-btn-hover: #bcd487;
  --pf-btn-ink: #06400a;
  --pf-dark: #4f6a33;         /* menú lateral y pestaña activa */
  --pf-dark-2: #435a29;
  --pf-dark-off: #6b7a5a;     /* verde oscuro apagado (botones antiguos desactivados) */
  --pf-side-ink: #f1f5ea;     /* opciones del menú */
  --pf-side-label: #e1e8d4;   /* títulos de grupo del menú */
  --pf-side-icon: #cfd9c1;    /* iconos del menú */
  --pf-soft: #eef3e3;         /* fondo de lo seleccionado */

  /* Fondos y líneas */
  --pf-bg: #f4f6f1;           /* fondo de trabajo, detrás de tarjetas y tablas */
  --pf-paper: #fcfbf6;        /* al pasar el ratón por filas y opciones */
  --pf-surface: #ffffff;      /* tarjetas, ventanas, cabecera */
  --pf-head: #f5f7f3;         /* fila de títulos de tabla */
  --pf-tile: #fafafa;         /* cajas de cifras dentro de una tarjeta (ficha del cliente en los agentes) */
  --pf-line: #e3e7e1;
  --pf-line-2: #edf0ec;
  --pf-line-strong: #d8ded5;  /* bordes de campos y botones */
  --pf-row-hover: #f8faf6;    /* fila de tabla al pasar el ratón */
  --pf-ref: #d3d9cf;          /* barra de referencia (gris) en las comparaciones */

  /* Estados. Rojo: hay que hacer algo. Naranja: espera. Verde: hecho. Azul: información extra */
  --pf-ok: #2f6a52;   --pf-ok-soft: #e9f4ec;
  --pf-bad: #b33f34;  --pf-bad-soft: #fae0dc;
  --pf-warn: #8a5300; --pf-warn-soft: #fdf1dc;
  --pf-info: #2c5a8a; --pf-info-soft: #e8f0f8;
  --pf-ok-mid: #3e8a63;       /* verde de "sube" en barras e iconos de lista */
  --pf-bad-line: #efc4bd;     /* borde del botón de eliminar */
  --pf-info-line: #c5d7ea;    /* borde de la "C" de comercial */

  /* Gráficas, en este orden fijo (comprobado con simulación de daltonismo: cada color se distingue
     de sus vecinos, también el último del primero en un anillo). "Otros": lo que no tiene categoría */
  --pf-chart-1: var(--pf-dark);
  --pf-chart-2: var(--pf-accent);
  --pf-chart-3: #4a7fc1;
  --pf-chart-4: #d9a441;
  --pf-chart-5: #8a63c2;
  --pf-chart-otros: var(--pf-faint);

  /* Tipografías de pidefacil.es */
  --pf-display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;  /* títulos y cifras */
  --pf-body: 'Outfit', -apple-system, 'Segoe UI', sans-serif;                  /* textos */
  --pf-ui: 'Nunito Sans', -apple-system, 'Segoe UI', sans-serif;               /* botones, menús, etiquetas */

  /* Forma (todo en múltiplos de 4 px) */
  --pf-r-sm: 8px;
  --pf-r: 12px;
  --pf-r-lg: 16px;
  --pf-shadow: 0 1px 2px rgba(19, 40, 33, .05);
  --pf-shadow-lg: 0 24px 65px rgba(29, 58, 48, .16);
  --pf-ring: 0 0 0 4px rgba(152, 176, 106, .18);
  --pf-focus: 3px solid rgba(152, 176, 106, .55);

  /* Armazón */
  --pf-side: 256px;           /* ancho del menú lateral: "Prospección" y "Próximamente" caben aunque el menú tenga barra de desplazamiento */
  --pf-top: 88px;             /* alto de la cabecera */

  /* Movimiento */
  --pf-dur-fast: 120ms;
  --pf-dur: 200ms;
  --pf-dur-slow: 280ms;
  --pf-ease: cubic-bezier(.2, .7, .2, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html { scroll-padding-top: calc(var(--pf-top) + 16px); }
body.pf-app {
  margin: 0;
  font-family: var(--pf-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--pf-ink);
  background: var(--pf-bg);
  -webkit-font-smoothing: antialiased;
  scrollbar-width: thin;                                   /* site.css esconde la barra de la página */
}
/* Color de las barras de site.css: en :root, que la barra de la página sale del html (en body solo llegaba a las de dentro) */
:root { --scrollbar-thumb-color: #c9d0c8; --scrollbar-thumb-hover-color: var(--pf-faint); }
body.pf-app::-webkit-scrollbar { display: block; }
.pf-app h1, .pf-app h2, .pf-app h3, .pf-app h4, .pf-app h5, .pf-app h6 { font-family: var(--pf-display); color: var(--pf-title); }
.pf-app td, .pf-num { font-variant-numeric: tabular-nums; }
.pf-page a:not(.pf-btn, .btn, .pf-card-link, .pf-menu-list a, .pf-tabs a) { color: var(--pf-accent-ink); }
.pf-muted { color: var(--pf-muted); }
.pf-empty { color: var(--pf-faint); white-space: nowrap; }
.pf-nowrap { white-space: nowrap; }
.pf-r { text-align: right; }
.pf-pos { color: var(--pf-ok); }
.pf-neg { color: var(--pf-bad); }
.pf-spacer { flex: 1; }
.pf-hidden { display: none !important; }
.pf-reserve { visibility: hidden !important; pointer-events: none !important; }   /* oculta sin mover lo de alrededor */
.pf-app :focus-visible { outline: var(--pf-focus); outline-offset: 2px; }

/* site.css pone todas las listas en fila en móvil: aquí vuelven a ser listas (sin pisar .nav, .pagination…) */
@media (max-width: 767.98px) {
  :where(body.pf-app) ul { display: block; }
}

/* --------------------------------------------------------------------------
   3. Armazón: menú lateral, cabecera y página
   -------------------------------------------------------------------------- */
.pf-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 1040;
  width: var(--pf-side);
  display: flex; flex-direction: column;
  background: var(--pf-dark);
  color: var(--pf-side-ink);
  font-family: var(--pf-ui);
  transition: transform var(--pf-dur) ease, width var(--pf-dur) ease;
}
.pf-brand { display: flex; align-items: center; height: var(--pf-top); padding: 0 22px; flex: none; }
.pf-brand img { width: 150px; height: auto; display: block; }

.pf-nav { flex: 1; overflow-y: auto; padding: 4px 12px 16px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.pf-nav-group { margin-top: 14px; }
.pf-nav-group:first-child { margin-top: 4px; }
.pf-nav-label { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--pf-side-label); padding: 0 12px 6px; }
.pf-nav a {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: 38px; padding: 0 10px 0 12px; margin-bottom: 2px;
  border-radius: 10px;
  color: var(--pf-side-ink); text-decoration: none;
  font-size: 14.5px; font-weight: 500;
  transition: background-color var(--pf-dur-fast) ease;
}
.pf-nav a > i { font-size: 17px; width: 18px; text-align: center; color: var(--pf-side-icon); flex: none; }
.pf-nav a > span:first-of-type { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.pf-nav a.is-active { background: rgba(255, 255, 255, .11); color: #fff; font-weight: 600; }
.pf-nav a.is-active > i { color: var(--pf-lime); }
.pf-nav a.is-active::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--pf-lime); }
.pf-nav-tag { margin-left: auto; flex: none; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; line-height: 1.2; }
.pf-nav-tag.is-available { border: 1px solid var(--pf-btn); color: var(--pf-side-ink); }       /* "Activar" */
.pf-nav-tag.is-soon { background: rgba(255, 255, 255, .12); color: var(--pf-side-ink); padding: 2px 6px; }   /* "Próximamente" o el mes en que llega ("Enero 2027") */
.pf-nav-tag.is-count { background: rgba(255, 255, 255, .92); color: var(--pf-dark); min-width: 22px; text-align: center; }

/* Soporte, justo encima de la cuenta (abre el panel de _Soporte): como una opción del menú */
.pf-help-nav { flex: none; border-top: 1px solid rgba(255, 255, 255, .1); padding: 8px 12px 0; }
.pf-help-nav button { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px 0 12px; border: 0; border-radius: 10px; background: none; color: var(--pf-side-ink); font: 500 14.5px var(--pf-ui); text-align: left; transition: background-color var(--pf-dur-fast) ease; }
.pf-help-nav button > i { font-size: 17px; width: 18px; text-align: center; color: var(--pf-side-icon); flex: none; }
.pf-help-nav button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.pf-help-nav + .pf-side-foot { border-top: 0; }

.pf-side-foot { flex: none; border-top: 1px solid rgba(255, 255, 255, .1); padding: 10px 12px; display: flex; align-items: center; gap: 6px; }
.pf-user { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; color: #fff; text-decoration: none; }
a.pf-user:hover, .pf-user.is-active { background: rgba(255, 255, 255, .08); color: #fff; }
.pf-user > span:last-child { min-width: 0; }   /* sin esto un nombre largo no se corta y se sale del menú */
.pf-user b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-user small { display: block; font-size: 12px; color: var(--pf-side-label); }
.pf-logout { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--pf-side-icon); text-decoration: none; font-size: 17px; }
.pf-logout:hover { background: rgba(255, 255, 255, .08); color: #fff; }
/* Cliente final: en lugar de la cuenta, "Cerrar sesión" abajo como una opción más del menú */
.pf-nav-pie { flex: none; overflow: visible; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 10px; padding-bottom: 10px; }

/* Menú encogido a solo iconos (escritorio): el botón .pf-fold, en el borde del menú, pone body.pf-side-mini y
   pf.js lo recuerda en el navegador. Los textos quedan ocultos a la vista pero no al lector de pantalla, y el
   nombre de cada opción sale al pasar el ratón (.pf-tip) */
.pf-fold { position: absolute; top: calc(var(--pf-top) / 2 - 14px); right: -14px; z-index: 3; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid var(--pf-line-strong); background: var(--pf-surface); color: var(--pf-dark); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(19, 40, 33, .15); cursor: pointer; font-size: 12px; }
.pf-fold:hover { background: var(--pf-soft); }
.pf-fold i { transition: transform var(--pf-dur) ease; }
@media (min-width: 992px) {
  body.pf-side-mini { --pf-side: 76px; }
  body.pf-side-mini .pf-fold i { transform: rotate(180deg); }
  body.pf-side-mini .pf-brand { padding: 0 0 0 21px; overflow: hidden; }
  body.pf-side-mini .pf-brand img { max-width: none; flex: none; clip-path: inset(0 118px 0 0); }   /* del logo, solo la mano */
  body.pf-side-mini .pf-nav { padding-left: 10px; padding-right: 10px; }
  body.pf-side-mini .pf-nav-label { display: flex; justify-content: center; height: 14px; padding: 0 0 6px; font-size: 0; }
  body.pf-side-mini .pf-nav-label::before { content: ""; width: 22px; height: 1px; background: rgba(255, 255, 255, .18); }
  body.pf-side-mini .pf-nav a, body.pf-side-mini .pf-help-nav button { justify-content: center; padding: 0; gap: 0; }
  body.pf-side-mini .pf-help-nav { padding: 8px 10px 0; }
  body.pf-side-mini .pf-nav a.is-active::before { left: -10px; }
  body.pf-side-mini :is(.pf-nav a > span:not(.pf-nav-tag), .pf-help-nav button > span, .pf-user > span:last-child) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* "Activar" y "Próximamente", un punto en la esquina del icono */
  body.pf-side-mini .pf-nav a > .pf-nav-tag { position: absolute; top: 7px; right: 10px; width: 9px; height: 9px; padding: 0; font-size: 0; }
  body.pf-side-mini .pf-side-foot { flex-direction: column; padding: 10px 8px; }
  body.pf-side-mini .pf-user { flex: none; justify-content: center; padding: 4px; }
}
.pf-tip { position: fixed; z-index: 1100; pointer-events: none; padding: 6px 10px; border-radius: var(--pf-r-sm); background: var(--pf-ink); color: #fff; font: 600 13px var(--pf-ui); white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); opacity: 0; transform: translate(-4px, -50%); transition: opacity var(--pf-dur-fast), transform var(--pf-dur-fast); }
.pf-tip.is-on { opacity: 1; transform: translate(0, -50%); }
.pf-tip::before { content: ""; position: absolute; left: -5px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left: 0; border-right-color: var(--pf-ink); }

.pf-topbar {
  position: fixed; top: 0; left: var(--pf-side); right: 0; z-index: 1030;
  height: var(--pf-top);
  display: flex; align-items: center; gap: 16px;
  padding: 0 32px;
  background: var(--pf-surface);
  border-bottom: 1px solid var(--pf-line);
  box-shadow: 0 1px 3px rgba(19, 40, 33, .04);
  transition: left var(--pf-dur) ease;
}
.pf-topbar .pf-burger { display: none; }
.pf-title { min-width: 0; }
.pf-title h1 { margin: 0; font: 800 26px/1.15 var(--pf-display); letter-spacing: -.01em; color: var(--pf-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-title p { margin: 6px 0 0; font-size: 14px; color: var(--pf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
/* Selector de rutas de PasComPan en la cabecera (en móvil no cabe: como antes, no sale) */
.pf-rutas { display: flex; align-items: center; gap: 8px; }
.pf-rutas .select2-container { min-width: 220px; max-width: 360px; }
.pf-rutas .select2-selection--multiple { max-height: 40px; overflow-y: auto; }   /* con muchas rutas elegidas no crece fuera de la cabecera */

.pf-main { padding: var(--pf-top) 0 0 var(--pf-side); min-height: 100dvh; transition: padding-left var(--pf-dur) ease; }
.pf-page { padding: 28px 32px 56px; width: 100%; }
.pf-page .container, .pf-page .container-fluid { max-width: none; padding-left: 0; padding-right: 0; }

/* Cliente final (FormularioPedido y su flujo): en la cabecera, el logo de su proveedor delante del título */
.pf-top-logo { flex: none; display: block; height: 44px; width: auto; max-width: 160px; object-fit: contain; }

/* Velo detrás del menú desplegado en móvil */
.pf-scrim { position: fixed; inset: 0; z-index: 1035; background: rgba(19, 40, 33, .32); opacity: 0; pointer-events: none; transition: opacity var(--pf-dur) ease; }

/* --------------------------------------------------------------------------
   4. Componentes
   -------------------------------------------------------------------------- */

/* Botones: todos en píldora. Uno solo principal por vista (lima); el resto, secundario o terciario.
   Eliminar va a la izquierda del pie y pide confirmación. Editar siempre con lápiz y texto. */
.pf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 8px 18px;
  border-radius: 999px; border: 1px solid transparent;
  font: 600 14px/1 var(--pf-ui);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--pf-dur-fast) ease, border-color var(--pf-dur-fast) ease, color var(--pf-dur-fast) ease;
}
.pf-btn i { font-size: 15px; color: inherit; }
.pf-btn-primary { background: var(--pf-btn); color: var(--pf-btn-ink); border-color: var(--pf-btn); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.pf-btn-primary:hover, .pf-btn-primary:focus { background: var(--pf-btn-hover); border-color: var(--pf-btn-hover); color: var(--pf-btn-ink); }
.pf-btn-secondary { background: var(--pf-surface); color: var(--pf-dark); border-color: var(--pf-line-strong); }
.pf-btn-secondary:hover, .pf-btn-secondary:focus { border-color: var(--pf-accent); background: var(--pf-paper); color: var(--pf-dark); }
.pf-btn-ghost { background: transparent; color: var(--pf-dark); padding-inline: 12px; }
.pf-btn-ghost:hover, .pf-btn-ghost:focus { background: var(--pf-soft); color: var(--pf-dark); }
.pf-btn-dark { background: var(--pf-dark); color: #fff; border-color: var(--pf-dark); }
.pf-btn-dark:hover, .pf-btn-dark:focus { background: var(--pf-dark-2); color: #fff; }
.pf-btn-danger { background: var(--pf-surface); color: var(--pf-bad); border-color: var(--pf-bad-line); }
.pf-btn-danger:hover, .pf-btn-danger:focus { background: var(--pf-bad-soft); color: var(--pf-bad); }
.pf-btn-danger-link { background: none; border-color: transparent; color: var(--pf-bad); padding-left: 4px; padding-right: 8px; }
.pf-btn-danger-link:hover, .pf-btn-danger-link:focus { background: var(--pf-bad-soft); color: var(--pf-bad); }
.pf-btn.is-selected { background: var(--pf-soft); border-color: var(--pf-accent); color: var(--pf-title); }   /* botón conmutable activo */
.pf-btn-sm { min-height: 32px; padding: 6px 14px; font-size: 13px; }
.pf-btn-sm i { font-size: 14px; }
.pf-btn-lg { min-height: 48px; padding: 0 24px; font-size: 15px; }
.pf-btn:disabled, .pf-btn[disabled], .pf-btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.pf-icon-btn { width: 34px; height: 34px; padding: 0; border-radius: 10px; background: transparent; border: 1px solid transparent; color: var(--pf-muted); display: inline-grid; place-items: center; cursor: pointer; font-size: 16px; text-decoration: none; }
.pf-icon-btn:hover, .pf-icon-btn[aria-expanded="true"] { background: var(--pf-soft); color: var(--pf-dark); }
.pf-link { border: 0; background: none; padding: 0; color: var(--pf-accent-ink); font: 600 13.5px var(--pf-ui); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* Etiquetas de estado */
.pf-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font: 600 12.5px/1.4 var(--pf-ui); white-space: nowrap; background: var(--pf-soft); color: var(--pf-dark); }
.pf-pill i { font-size: 12px; }
.pf-pill.is-ok { background: var(--pf-ok-soft); color: var(--pf-ok); }
.pf-pill.is-bad { background: var(--pf-bad-soft); color: var(--pf-bad); }
.pf-pill.is-warn { background: var(--pf-warn-soft); color: var(--pf-warn); }
.pf-pill.is-info { background: var(--pf-info-soft); color: var(--pf-info); }
.pf-pill.is-muted { background: var(--pf-line-2); color: var(--pf-muted); }
.pf-pill.is-brand { background: var(--pf-soft); color: var(--pf-accent-ink); }
.pf-pill.is-solid-bad { background: var(--pf-bad); color: #fff; }      /* fallido: lo único en rojo lleno */
/* "C" de comercial: lo ha hecho o escrito un comercial. Información extra, en azul */
.pf-c { display: inline-grid; place-items: center; width: 19px; height: 19px; margin-left: 7px; border-radius: 50%; background: var(--pf-info-soft); color: var(--pf-info); box-shadow: inset 0 0 0 1px var(--pf-info-line); font: 800 11px/1 var(--pf-ui); vertical-align: 1px; cursor: help; flex: none; }
.pf-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--pf-accent); flex: none; }

/* Tarjetas */
.pf-card { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-r); box-shadow: var(--pf-shadow); }
.pf-card-pad { padding: 20px 22px; }
.pf-card h3, .pf-card-title { font: 700 17px/1.2 var(--pf-display); color: var(--pf-title); margin: 0 0 4px; }
.pf-card-sub { color: var(--pf-muted); font-size: 13.5px; margin: 0 0 16px; }
.pf-card > .pf-card-title + :not(.pf-card-sub) { margin-top: 16px; }   /* tarjeta sin subtítulo: el mismo aire (no en una cabecera ni en una barra) */
.pf-card-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
/* Cabecera de tarjeta: título (y subtítulo) a la izquierda y un dato breve a la derecha.
   Con pf-card-pad va encima de una tabla pegada a la tarjeta */
.pf-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.pf-card-head .pf-card-title { margin: 0; }
.pf-card-head .pf-card-sub { margin: 4px 0 0; }
.pf-card-head.pf-card-pad { margin: 0; border-bottom: 1px solid var(--pf-line); }
/* Columna de tarjetas. minmax(0, 1fr): una tabla ancha dentro no ensancha la página en móvil */
.pf-stack { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.pf-grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-grid-3 { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Encabezados dentro de la página */
.pf-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.pf-app .pf-section-title { font: 700 12.5px var(--pf-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--pf-muted); margin: 26px 0 12px; }   /* también en un h2/h3 */
.pf-app .pf-section-title:first-child { margin-top: 0; }
.pf-section-title .pf-count { margin-left: 6px; letter-spacing: 0; }
.pf-eyebrow { font: 700 12px var(--pf-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--pf-accent-ink); }

/* Selector de vista (pestañas): cambia lo que se ve. Distinto de un filtro */
.pf-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; display: inline-flex; gap: 4px; padding: 4px; background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: 999px; }
.pf-tabs button, .pf-tabs a { flex: none; border: 0; background: none; padding: 7px 16px; border-radius: 999px; font: 600 14px var(--pf-ui); color: var(--pf-muted); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; transition: background-color var(--pf-dur) ease, color var(--pf-dur) ease; }
.pf-tabs button:hover, .pf-tabs a:hover { color: var(--pf-dark); }
.pf-tabs .is-active, .pf-tabs .is-active:hover { background: var(--pf-dark); color: #fff; }
.pf-count { font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--pf-line-2); color: var(--pf-muted); font-weight: 700; }
.pf-tabs .is-active .pf-count { background: var(--pf-accent); color: var(--pf-title); }

/* Filtros (chips): reducen lo que se ve. Activo en verde suave con su marca */
.pf-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-filters-sep { width: 1px; height: 22px; background: var(--pf-line-strong); margin: 0 2px; }
.pf-chip {
  position: relative; height: 36px; padding: 0 14px; border: 1px solid var(--pf-line-strong); background: var(--pf-surface); border-radius: 999px;
  color: var(--pf-dark); font: 600 13.5px var(--pf-ui); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; white-space: nowrap;
}
.pf-chip:hover { border-color: var(--pf-accent); background: var(--pf-paper); }
.pf-chip i { color: var(--pf-muted); }
.pf-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pf-chip.is-active, .pf-chip:has(input:checked) { background: var(--pf-soft); border-color: var(--pf-accent); color: var(--pf-title); }
.pf-chip.is-active i, .pf-chip:has(input:checked) i { color: var(--pf-accent-ink); }
.pf-chip.is-active .pf-count, .pf-chip:has(input:checked) .pf-count { background: var(--pf-accent); color: var(--pf-title); }
.pf-chip:has(input:focus-visible) { outline: var(--pf-focus); outline-offset: 2px; }

/* Cifras destacadas */
.pf-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pf-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-kpi { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-r); box-shadow: var(--pf-shadow); padding: 16px 18px; min-width: 0; }
/* Etiqueta, cifra y línea gris ocupan 3 filas que comparten las cifras de al lado (subgrid):
   si una etiqueta pasa a dos líneas, las cifras siguen alineadas */
.pf-kpi { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.pf-kpi small { display: block; font: 700 11.5px var(--pf-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--pf-muted); }
.pf-kpi b { display: block; font: 800 clamp(20px, 1.5vw + 5px, 27px)/1.1 var(--pf-display); color: var(--pf-title); margin: 8px 0 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }   /* encoge para que 667.840,66 € quepa en 4 columnas */
.pf-kpi b.is-bad { color: var(--pf-bad); }
.pf-kpi span { display: block; font: 500 13px var(--pf-body); color: var(--pf-muted); }
.pf-kpi span.pf-pos { color: var(--pf-ok); }     /* la línea de debajo, en verde si sube */
.pf-kpi span.pf-neg { color: var(--pf-bad); }    /* y en rojo si baja */
@media (min-width: 1200px) { .pf-kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Tarjetas de persona (los comerciales en los agentes): tantas por fila como quepan, como mucho 3 (con 4 se
   cargaba demasiado), una en el móvil. .pf-vcard va con .pf-card y puede ser un <button>. De arriba abajo: quién
   es y cómo va (la única etiqueta de color, en .pf-vcard-top), cuánto (.pf-vcard-main), su cartera (pf-mixbar) y la acción */
.pf-vcards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(320px, calc((100% - 32px) / 3))), 1fr)); }
.pf-vcard { display: flex; flex-direction: column; gap: 16px; height: 100%; padding: 18px 20px 16px; cursor: pointer; transition: border-color var(--pf-dur-fast) ease; animation: pf-in var(--pf-dur-slow) var(--pf-ease) backwards; }
button.pf-vcard { width: 100%; min-width: 0; margin: 0; font: inherit; color: var(--pf-ink); text-align: left; }
.pf-vcard > :last-child { margin-top: auto; }   /* la acción, siempre abajo */
@media (hover: hover) {
  .pf-vcard:hover { border-color: var(--pf-accent); }
  .pf-vcard:hover .pf-vcard-cta i { transform: translateX(3px); }
}
.pf-vcard-top { display: flex; align-items: center; gap: 12px; }
.pf-vcard-top > .pf-pill { align-self: flex-start; flex: none; padding: 4px 10px; font-size: 13px; }
.pf-vcard-top .pf-avatar { width: 40px; height: 40px; font-size: 14px; background: var(--pf-soft); color: var(--pf-dark); }
.pf-vcard-who { display: block; flex: 1; min-width: 0; }
.pf-vcard-who b { display: block; font: 700 16px/1.2 var(--pf-body); color: var(--pf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-vcard-who small { display: block; font-size: 13px; color: var(--pf-muted); }
.pf-vcard-trend { align-self: flex-start; padding: 4px 10px; font-size: 13px; }
.pf-vcard-main { display: block; }
.pf-vcard-main b { display: block; margin: 0 0 4px; font: 800 32px/1.05 var(--pf-display); letter-spacing: -.015em; color: var(--pf-title); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-vcard-main small { display: block; font-size: 13px; color: var(--pf-muted); }
.pf-vcard-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Persona en una línea: avatar, nombre y una línea gris (p. ej. la cabecera de la cartera de un comercial) */
.pf-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pf-person > div { min-width: 0; }
.pf-person .pf-avatar { background: var(--pf-soft); color: var(--pf-dark); }
.pf-person b { display: block; font: 700 16px/1.2 var(--pf-body); color: var(--pf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-person small { display: block; font-size: 13px; color: var(--pf-muted); }

/* Cabecera en tarjeta: Volver, de quién es (.pf-person) y sus acciones, en un bloque blanco (p. ej. la cartera de un
   comercial en los agentes) */
.pf-head-card { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; padding: 14px 18px; background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-r); box-shadow: var(--pf-shadow); }
.pf-vcard-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 700 13.5px var(--pf-ui); color: var(--pf-dark); }
.pf-vcard-cta i { transition: transform var(--pf-dur-fast) ease; }

/* Barra de reparto en grupos (cada tramo lleva su tamaño en style="flex: N") y su leyenda.
   Verde: suben. Gris: igual. Rojo suave: bajan */
.pf-mixbar { display: flex; gap: 2px; height: 8px; margin-bottom: 10px; border-radius: 999px; overflow: hidden; background: var(--pf-line-2); }
.pf-mixbar span { min-width: 4px; }
.pf-mixlegend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--pf-muted); }
.pf-mixlegend li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pf-mixlegend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.pf-mixlegend b { font-weight: 600; color: var(--pf-ink); }
.pf-mixbar .is-ok, .pf-mixlegend .is-ok { background: var(--pf-accent); }
.pf-mixbar .is-muted, .pf-mixlegend .is-muted { background: var(--pf-line-strong); }
.pf-mixbar .is-bad, .pf-mixlegend .is-bad { background: var(--pf-bad); opacity: .6; }

/* Personas */
.pf-avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--pf-accent); color: var(--pf-title); font: 800 13px var(--pf-ui); }
.pf-assignee { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.pf-assignee .pf-avatar { width: 26px; height: 26px; font-size: 10.5px; background: var(--pf-soft); color: var(--pf-dark); }

/* Avisos */
.pf-hint { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--pf-r); background: var(--pf-paper); border: 1px dashed var(--pf-line-strong); color: var(--pf-muted); font-size: 14px; }
.pf-hint i { font-size: 18px; color: var(--pf-accent); }
.pf-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--pf-r); background: var(--pf-info-soft); color: var(--pf-info); font-size: 14px; }
.pf-alert > i { font-size: 17px; line-height: 1.3; }
.pf-alert.is-bad { background: var(--pf-bad-soft); color: var(--pf-bad); }
.pf-alert.is-warn { background: var(--pf-warn-soft); color: var(--pf-warn); }
.pf-alert.is-ok { background: var(--pf-ok-soft); color: var(--pf-ok); }
.pf-alert-action { align-items: center; flex-wrap: wrap; }      /* aviso con su botón al lado (baja si no cabe) */
.pf-alert-action > span { flex: 1 1 220px; }
/* Ayuda "ⓘ" junto a un texto (con el tooltip de Bootstrap). Va con la última palabra en un .pf-nowrap */
.pf-help { border: 0; background: none; padding: 0 2px; margin-left: 2px; border-radius: 4px; color: var(--pf-faint); font-size: 12px; line-height: 1; vertical-align: 1px; cursor: help; }
.pf-help:hover, .pf-help:focus-visible { color: var(--pf-accent-ink); }

/* Lista de filas dentro de una tarjeta: título y una frase a la izquierda y sus botones a la derecha
   (en móvil, debajo y a todo el ancho). Cualquier otro hijo, como un formulario, se separa igual.
   <div class="pf-list"><div class="pf-list-item"><div class="pf-list-text"><b>Título</b><p>Frase.</p></div>
   <div class="pf-list-actions"><button class="pf-btn pf-btn-secondary">…</button></div></div></div> */
.pf-list > * { padding: 14px 0; }
.pf-list > * + * { border-top: 1px solid var(--pf-line-2); }
.pf-list > :first-child { padding-top: 0; }
.pf-list > :last-child { padding-bottom: 0; }
.pf-list-item { display: flex; align-items: center; gap: 12px 16px; }
.pf-list-text { flex: 1; min-width: 0; }
.pf-list-text > b { display: block; font: 600 14.5px var(--pf-ui); color: var(--pf-ink); }
.pf-list-text > p { margin: 2px 0 0; font-size: 13.5px; color: var(--pf-muted); }
.pf-list-actions { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.pf-empty-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 16px; color: var(--pf-muted); font-size: 14.5px; text-align: center; }
.pf-empty-box > i { font-size: 30px; color: var(--pf-accent); }
.pf-empty-box b { font: 800 18px var(--pf-display); color: var(--pf-title); }
.pf-success { text-align: center; padding: 28px 10px; }
.pf-success .pf-check { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px; background: var(--pf-soft); color: var(--pf-dark); display: grid; place-items: center; font-size: 30px; }
.pf-success h3 { font: 800 22px var(--pf-display); margin: 0 0 8px; }
.pf-success p { color: var(--pf-muted); margin: 0 auto; max-width: 360px; }
.pf-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 1100; background: var(--pf-dark); color: #fff; padding: 12px 18px; border-radius: 12px; font: 600 14px var(--pf-ui); box-shadow: var(--pf-shadow-lg); opacity: 0; transition: opacity var(--pf-dur) ease, transform var(--pf-dur) ease; pointer-events: none; }
.pf-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Menú de "más acciones" (⋯). Lo abre pf.js con data-pf-menu */
.pf-menu { position: relative; display: inline-block; }
.pf-menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 1050; min-width: 210px;
  background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: 12px; box-shadow: var(--pf-shadow-lg);
  padding: 6px; display: none; text-align: left;
}
.pf-menu.is-open .pf-menu-list { display: block; }
.pf-menu-list button, .pf-menu-list a { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 10px; border: 0; background: none; border-radius: 8px; font: 500 14px var(--pf-ui); color: var(--pf-ink); text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; }
.pf-menu-list button i, .pf-menu-list a i { color: var(--pf-muted); width: 16px; }
.pf-menu-list button:hover, .pf-menu-list a:hover { background: var(--pf-soft); color: var(--pf-ink); }
.pf-menu-list .is-danger, .pf-menu-list .is-danger i { color: var(--pf-bad); }

/* Lista de datos (etiqueta · valor) */
.pf-dl { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; margin: 0; font-size: 14.5px; }
.pf-dl dt { color: var(--pf-muted); font: 600 13px var(--pf-ui); }
.pf-dl dd { margin: 0; }

/* Barra de comparación (etiqueta · barra · cifra). Gris = referencia, verde = sube, rojo = baja */
.pf-kbar { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12.5px; }
.pf-kbar + .pf-kbar { margin-top: 6px; }
.pf-kbar small { color: var(--pf-muted); font: 600 11.5px var(--pf-ui); }
.pf-kbar span { height: 10px; border-radius: 999px; background: var(--pf-line-2); overflow: hidden; }
.pf-kbar span i { display: block; height: 100%; border-radius: inherit; background: var(--pf-ref); }
.pf-kbar.is-up span i { background: var(--pf-ok-mid); }
.pf-kbar.is-down span i { background: var(--pf-bad); }
.pf-kbar b { font: 700 12.5px var(--pf-ui); color: var(--pf-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   5. Tablas
   Las de DataTables se pintan solas con "9. Librerías". Aquí: las piezas de
   dentro de las celdas, el buscador propio y las tablas simples (pf-table).
   -------------------------------------------------------------------------- */
.pf-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--pf-line); flex-wrap: wrap; }
.pf-toolbar > .pf-card-title { margin: 0; }   /* título dentro de la barra, alineado con el buscador */
.pf-toolbar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pf-search { position: relative; flex: 0 1 340px; min-width: 200px; }
.pf-search > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--pf-faint); font-size: 14px; pointer-events: none; }
.pf-search input { width: 100%; height: 38px; border-radius: 999px; border: 1px solid var(--pf-line-strong); background: var(--pf-bg); padding: 0 14px 0 36px; font: 400 14px var(--pf-body); color: var(--pf-ink); }
.pf-search input:focus { outline: none; border-color: var(--pf-accent); box-shadow: var(--pf-ring); background: var(--pf-surface); }
.pf-search input::placeholder { color: var(--pf-faint); }

.pf-cell-main { font-weight: 600; color: var(--pf-ink); }
.pf-cell-sub { display: block; font-size: 12.5px; color: var(--pf-muted); font-weight: 400; margin-top: 2px; }
.pf-code { font: 500 13px var(--pf-ui); color: var(--pf-muted); }
.pf-phone { white-space: nowrap; color: var(--pf-muted); font-size: 13.5px; }
.pf-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }

/* Tabla simple (con o sin .table de Bootstrap): cabecera en mayúsculas, cifras a la derecha */
table.pf-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 14px; color: var(--pf-ink); background: var(--pf-surface); }
table.pf-table > thead > tr > th { background: var(--pf-head); color: var(--pf-muted); font: 700 12px/1.2 var(--pf-ui); letter-spacing: .04em; text-transform: uppercase; padding: 11px 16px; border-bottom: 1px solid var(--pf-line); white-space: nowrap; vertical-align: middle; text-align: left; }
table.pf-table > tbody > tr > td { padding: 11px 16px; border-bottom: 1px solid var(--pf-line-2); vertical-align: middle; background: var(--pf-surface); box-shadow: none; }
table.pf-table > tbody > tr:last-child > td { border-bottom: 0; }
table.pf-table > tbody > tr:hover > td { background: var(--pf-row-hover); }
table.pf-table .pf-r { text-align: right; white-space: nowrap; }
.pf-table-wrap { overflow-x: auto; border: 1px solid var(--pf-line); border-radius: 12px; background: var(--pf-surface); }
.pf-card > .pf-table-wrap { border: 0; border-radius: 0 0 var(--pf-r) var(--pf-r); }   /* pegada a su tarjeta, sin doble borde */
.pf-app :is(table.pf-table, table.dataTable) > thead > tr > th.pf-th-wrap { white-space: normal; }   /* cabecera larga en dos líneas */
/* Para ver las tablas simples como tarjetas en móvil, igual que las de DataTables: table.pf-table.pf-table-cards
   y data-label en cada celda que deba leerse "etiqueta · valor" (las demás ocupan la línea: título, botones) */

/* --------------------------------------------------------------------------
   6. Formularios. Etiqueta encima, "(opcional)" en los opcionales y la ayuda
   debajo en gris. Los campos de Bootstrap toman este aspecto dentro de
   .pf-form o .pf-field.
   -------------------------------------------------------------------------- */
.pf-form { display: grid; gap: 14px; }
.pf-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }   /* un texto largo (p. ej. en un select2) no ensancha el campo */
.pf-field > label, .pf-label { display: block; margin: 0; color: var(--pf-muted); font: 600 13px var(--pf-ui); }
.pf-field textarea { min-height: 90px; resize: vertical; }
.pf-field-help { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0 0; font-size: 13px; color: var(--pf-muted); }
.pf-field.is-disabled { opacity: .45; pointer-events: none; }
.pf-optional { color: var(--pf-muted); font-weight: 400; }
.pf-error { color: var(--pf-bad); font-size: 13px; }

:is(.pf-form, .pf-field) .form-control,
:is(.pf-form, .pf-field) .form-select { border-radius: 10px; border: 1px solid var(--pf-line-strong); background-color: var(--pf-surface); min-height: 40px; font: 400 14.5px var(--pf-body); color: var(--pf-ink); box-shadow: none; }
:is(.pf-form, .pf-field) .form-control:focus,
:is(.pf-form, .pf-field) .form-select:focus { border-color: var(--pf-accent); box-shadow: var(--pf-ring); }
:is(.pf-form, .pf-field) .form-control[readonly],
:is(.pf-form, .pf-field) .form-control:disabled,
:is(.pf-form, .pf-field) .form-select:disabled { background-color: var(--pf-head); color: var(--pf-muted); }
:is(.pf-form, .pf-field) .form-control::placeholder { color: var(--pf-faint); }
:is(.pf-form, .pf-field) .form-check-input { width: 18px; height: 18px; border-color: var(--pf-line-strong); }
:is(.pf-form, .pf-field) .form-check-input:checked { background-color: var(--pf-dark); border-color: var(--pf-dark); }
:is(.pf-form, .pf-field) .form-check-input:focus { box-shadow: var(--pf-ring); border-color: var(--pf-accent); }
:is(.pf-form, .pf-field) .form-check-label { color: var(--pf-ink); font: 400 14.5px var(--pf-body); }
:is(.pf-form, .pf-field) .text-danger, :is(.pf-form, .pf-field) .field-validation-error { color: var(--pf-bad) !important; font-size: 13px; }
.pf-field > [data-valmsg-for]:empty, .pf-field > .pf-error:empty { display: none; }   /* el error vacío no deja hueco */

/* Teléfono con prefijo (intl-tel-input): a lo ancho y el prefijo con el gris de los campos (9 px = los 10
   del campo menos su borde). Sin tocar su ancho: el plugin lo mide para dejar sitio al número */
:is(.pf-form, .pf-field) .iti { display: block; width: 100%; }
.pf-app .iti--separate-dial-code .iti__selected-flag { background-color: var(--pf-head); border-radius: 9px 0 0 9px; }

/* Campo pequeño dentro de una tabla o una barra */
.pf-input-sm { height: 34px; padding: 0 10px; border: 1px solid var(--pf-line-strong); border-radius: var(--pf-r-sm); background: var(--pf-surface); color: var(--pf-ink); font: 400 14px var(--pf-body); }
.pf-input-sm:focus { outline: none; border-color: var(--pf-accent); box-shadow: var(--pf-ring); }

/* Desplegable compacto dentro de una tabla (p. ej. el comercial de cada cliente), con el borde siempre a la
   vista para que se vea que se puede cambiar. Va con .form-select de Bootstrap, que pone la flecha */
select.form-select.pf-inline-select {
  width: auto; max-width: 200px; min-height: 32px;
  padding: 4px 30px 4px 10px;
  border-color: var(--pf-line-strong); border-radius: 999px;
  background-color: var(--pf-surface); background-position: right 10px center;
  font: 400 14px var(--pf-body); color: var(--pf-ink);
  text-overflow: ellipsis; cursor: pointer;
}
select.form-select.pf-inline-select:focus { border-color: var(--pf-accent); box-shadow: var(--pf-ring); }

/* Varios campos del mismo dato que se añaden y se quitan (teléfonos, formatos…): campo, opciones y quitar */
.pf-list-inputs { display: grid; gap: 8px; }
.pf-list-input { display: flex; align-items: center; gap: 8px; }
.pf-list-input > .form-control { flex: 1; min-width: 0; }

/* Casilla con su texto al lado, en línea (p. ej. "Por defecto" en una fila de la lista) */
.pf-inline-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: 600 13px var(--pf-ui); color: var(--pf-muted); white-space: nowrap; cursor: pointer; }
.pf-inline-check .form-check-input { margin: 0; flex: none; }

/* Contador con − y + (p. ej. la hora de los recordatorios) */
.pf-stepper { display: inline-flex; align-items: center; justify-self: start; border: 1px solid var(--pf-line-strong); border-radius: 999px; background: var(--pf-surface); overflow: hidden; }
.pf-stepper button { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--pf-dark); font-size: 15px; cursor: pointer; }
.pf-stepper button:hover { background: var(--pf-soft); }
.pf-stepper input { width: 64px; padding: 0; border: 0; background: none; text-align: center; font: 700 15px var(--pf-body); color: var(--pf-ink); cursor: default; }
.pf-stepper :focus-visible { outline-offset: -3px; }   /* dentro del contorno: el overflow lo recortaría */

/* Periodo: Desde · Hasta · Aplicar */
.pf-periodo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-periodo .pf-btn { min-height: 40px; }   /* a la altura de las fechas */

/* Fecha con su etiqueta dentro del borde: <label class="pf-date"><span>Desde</span><input type="date" …></label>.
   Toda la caja abre el calendario, no solo su icono (pf.js) */
.pf-date { display: inline-flex; align-items: center; gap: 8px; height: 40px; margin: 0; padding: 0 8px 0 12px; border: 1px solid var(--pf-line-strong); border-radius: 10px; background: var(--pf-surface); cursor: pointer; }
.pf-date:hover { border-color: var(--pf-accent); }
.pf-date:focus-within { border-color: var(--pf-accent); box-shadow: var(--pf-ring); }
.pf-date > span { font: 600 13px var(--pf-ui); color: var(--pf-muted); white-space: nowrap; }
.pf-date input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; font: 400 14.5px var(--pf-body); color: var(--pf-ink); cursor: pointer; }
.pf-date input:focus, .pf-app .pf-date input:focus-visible { outline: none; }   /* el foco lo marca la caja */
.pf-date input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }
.pf-field input[type="date"], .pf-field input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }   /* también abre el calendario entero (pf.js) */

/* Opciones en píldora (radio o casilla escondidos) */
.pf-choice { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-choice label { margin: 0; }
.pf-choice input { position: absolute; opacity: 0; pointer-events: none; }
.pf-choice span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--pf-line-strong); background: var(--pf-surface); font: 600 13.5px var(--pf-ui); color: var(--pf-dark); cursor: pointer; }
.pf-choice input:checked + span { background: var(--pf-dark); border-color: var(--pf-dark); color: #fff; }
.pf-choice input:focus-visible + span { outline: var(--pf-focus); outline-offset: 2px; }
.pf-choice input:disabled + span { opacity: .45; cursor: default; }
.pf-choice.pf-choice-sm { gap: 6px; }                                   /* más pequeñas, dentro de una tabla */
.pf-choice.pf-choice-sm span { padding: 5px 11px; font-size: 13px; }

/* Interruptor (casilla con aspecto de interruptor). Texto a la izquierda */
.pf-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; font: 600 14px var(--pf-ui); color: var(--pf-ink); cursor: pointer; }
.pf-switch small { display: block; font: 400 13px var(--pf-body); color: var(--pf-muted); margin-top: 2px; }
.pf-switch input { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: 999px; background: var(--pf-line-strong); position: relative; cursor: pointer; transition: background var(--pf-dur-fast); flex: none; margin: 0; border: 0; }
.pf-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--pf-surface); transition: left var(--pf-dur-fast); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.pf-switch input:checked { background: var(--pf-dark); }
.pf-switch input:checked::after { left: 19px; }
.pf-switch input:disabled { opacity: .45; cursor: not-allowed; }
.pf-switch.is-inline { display: inline-flex; vertical-align: middle; }   /* sin texto, en una celda: solo responde el interruptor */

/* --------------------------------------------------------------------------
   7. Ventanas: modal de Bootstrap con la clase pf-modal en el div.modal.
   Tamaños: modal-sm 480 · normal 560 · modal-lg 920 px. Pie: eliminar a la
   izquierda (pf-btn-danger-link + pf-spacer), Cancelar y la principal a la derecha.
   -------------------------------------------------------------------------- */
/* El color también sin .show: al cerrar la ventana se quita .show y, mientras se desvanecía, salía el verde de site.css */
body.pf-app .modal-backdrop { background-color: var(--pf-ink); }
body.pf-app .modal-backdrop.show { opacity: .38 !important; }
.pf-modal .modal-content { border: 0; border-radius: 18px; box-shadow: var(--pf-shadow-lg); font-family: var(--pf-body); color: var(--pf-ink); }
.pf-modal .modal-header { align-items: flex-start; gap: 12px; padding: 22px 24px 16px; border-bottom: 1px solid var(--pf-line); }
.pf-modal .modal-title { margin: 2px 0 0; font: 800 22px/1.15 var(--pf-display); color: var(--pf-title); }
.pf-modal .modal-header p { margin: 6px 0 0; color: var(--pf-muted); font-size: 14px; }
.pf-modal .modal-header .btn-close { margin: 0 0 0 auto; flex: none; padding: 10px; border-radius: 10px; background-size: 12px; opacity: .6; filter: none; align-self: flex-start; }
.pf-modal .modal-header .btn-close:hover { opacity: 1; background-color: var(--pf-soft); }
.pf-modal .modal-body { padding: 18px 24px; }
.pf-modal .modal-footer { justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--pf-line); }   /* site.css los reparte (space-between) */
.pf-modal .modal-footer > * { margin: 0; }
@media (min-width: 576px) {
  .pf-modal .modal-dialog { max-width: 560px; }
  .pf-modal .modal-dialog.modal-sm { max-width: 480px; }
  .pf-modal .modal-dialog.modal-lg { max-width: 640px; }   /* en tableta, hasta que caben los 920 */
}
@media (min-width: 992px) {
  .pf-modal .modal-dialog.modal-lg { max-width: 920px; }
}

/* Panel lateral que sale por la derecha (Soporte en el menú, "Me interesa" en los agentes): offcanvas de Bootstrap
   (div.offcanvas.offcanvas-end.pf-drawer, se abre con data-bs-toggle="offcanvas"). Cabecera como la de las ventanas,
   el cuerpo se desplaza y el botón de enviar va al final, a todo el ancho (.pf-drawer-enviar). En el móvil, a toda
   la pantalla */
.offcanvas-backdrop { background-color: var(--pf-ink); }
.offcanvas-backdrop.show { opacity: .38; }
.pf-drawer { font-family: var(--pf-body); color: var(--pf-ink); }
.pf-drawer.offcanvas-end { width: min(440px, 100vw); border-left: 0; box-shadow: -24px 0 60px rgba(0, 0, 0, .18); }
.pf-drawer-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 14px; border-bottom: 1px solid var(--pf-line); }
.pf-drawer-head h2 { margin: 2px 0 0; font: 800 21px/1.15 var(--pf-display); color: var(--pf-title); }
.pf-drawer-head .btn-close { margin: 0 0 0 auto; flex: none; padding: 10px; border-radius: 10px; background-size: 12px; opacity: .6; filter: none; }   /* site.css la pinta de rojo */
.pf-drawer-head .btn-close:hover { opacity: 1; background-color: var(--pf-soft); }
.pf-drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px 24px; }
.pf-drawer-intro { margin: 0; color: var(--pf-muted); font-size: 14px; }
.pf-drawer-enviar { width: 100%; }

/* --------------------------------------------------------------------------
   8. Agentes no contratados y próximos: imagen del agente, presentación y botón "Me interesa", que abre el
   formulario en el panel lateral (.pf-drawer)
   -------------------------------------------------------------------------- */
/* Centrado en la página: la imagen a la izquierda y el texto a la derecha. Por debajo de 992 px, una columna:
   primero el texto y debajo la imagen */
.pf-gem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; max-width: 1180px; margin: 0 auto; padding: 12px 0 24px; }
@media (min-width: 992px) {
  .pf-gem { min-height: calc(100dvh - var(--pf-top) - 84px); align-content: center; }   /* 84: márgenes de .pf-page */
}
.pf-gem-media img { display: block; width: 100%; height: auto; }
.pf-gem-brand { display: flex; align-items: center; gap: 12px; font: 700 18px var(--pf-display); color: var(--pf-title); flex-wrap: wrap; }
.pf-gem-icon { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--pf-line); background: var(--pf-surface); display: grid; place-items: center; box-shadow: var(--pf-shadow); }
.pf-gem-icon i { font-size: 22px; color: var(--pf-accent-ink); }
.pf-gem h2 { font: 800 clamp(28px, 3vw, 38px)/1.1 var(--pf-display); color: var(--pf-title); margin: 22px 0 12px; letter-spacing: -.01em; }
.pf-gem-lead { font-size: 17px; line-height: 1.55; color: var(--pf-ink); margin: 0 0 22px; max-width: 620px; }
.pf-gem-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.pf-gem-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.pf-gem-list i { color: var(--pf-ok-mid); font-size: 17px; line-height: 1.2; flex: none; }
.pf-gem-list b { color: var(--pf-title); font-weight: 600; }
.pf-gem-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 28px; }
.pf-gem-actions > span:not(.pf-pill) { color: var(--pf-muted); font-size: 14.5px; }

/* --------------------------------------------------------------------------
   9. Librerías y variables antiguas
   -------------------------------------------------------------------------- */

/* Variables de site.css con los colores nuevos, para los .css y .js que aún las usan */
body.pf-app {
  --verde-suave-1: var(--pf-soft);
  --verde-texto-boton: var(--pf-accent);
  --verde-oscuro: var(--pf-dark);
  --verde-oscuro-disabled: var(--pf-dark-off);
  --gris-oscuro: var(--pf-muted);
  --color-rojo: var(--pf-bad);
}

/* DataTables 2 (integración Bootstrap 5): la tabla va en una tarjeta; arriba el buscador en píldora a la izquierda y
   las acciones de la lista ("Nuevo …", .pf-dt-acciones, las coloca datatables.base.js) a la derecha; abajo "Ver 10"
   junto a cuántos hay y las páginas */
.pf-app .dt-container { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-r); box-shadow: var(--pf-shadow); }
.pf-app .dt-container > .row { margin: 0; align-items: center; }
.pf-app .dt-container > .row > * { padding: 0; }
.pf-app .dt-container > .row:first-child { padding: 12px 14px; border-bottom: 1px solid var(--pf-line); gap: 10px; margin-top: 0 !important; }
.pf-app .dt-container > .row:first-child > .dt-layout-start { flex: 0 1 340px; margin-right: auto !important; }
.pf-app .dt-container > .row:first-child > .dt-layout-end { margin-left: auto !important; }
.pf-dt-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.pf-app .dt-container > .dt-layout-table ~ .row > .dt-layout-start { display: flex; align-items: center; gap: 14px; }
.pf-app .dt-container > .dt-layout-table ~ .row > .dt-layout-start > * { margin-right: 0; }   /* el hueco es el gap; DataTables le sumaba 1em */
.pf-app .dt-container .dt-length + .dt-info { padding-left: 14px !important; border-left: 1px solid var(--pf-line); }   /* "Ver 10 | 1-10 de 22" */
.pf-app .dt-container > .row.dt-layout-table { margin-top: 0 !important; }
.pf-app .dt-container > .row.dt-layout-table > * { overflow-x: auto; }
/* Pie (cuántos hay y páginas): la fila después de la tabla. No :last-child, que DataTables pone detrás un div vacío (.dt-autosize) */
.pf-app .dt-container > .dt-layout-table ~ .row { padding: 10px 14px; border-top: 1px solid var(--pf-line); gap: 10px; margin-top: 0 !important; }
.pf-app .dt-search { width: 100%; }
.pf-app .dt-search.borde-giratorio { overflow: visible; border-radius: 0; }      /* site.css le pone un borde de colores que gira */
.pf-app .dt-search.borde-giratorio::before { display: none; }
.pf-app .dt-search.borde-giratorio .inner { margin: 0; }
.pf-app .dt-search .input-group { position: relative; flex-wrap: nowrap; max-width: none; margin: 0; }
.pf-app .dt-search .input-group .input-group-text { position: absolute; left: 0; top: 0; bottom: 0; height: auto; z-index: 5; background: none; border: 0; padding: 0 0 0 14px; color: var(--pf-faint); }
.pf-app .dt-search .input-group .form-control { width: 100%; min-width: 0; height: 38px; margin: 0 !important; border-radius: 999px !important; border: 1px solid var(--pf-line-strong); background: var(--pf-bg); padding: 0 14px 0 36px; font: 400 14px var(--pf-body); color: var(--pf-ink); }
.pf-app .dt-search .input-group .form-control:focus { background: var(--pf-surface); border-color: var(--pf-accent); box-shadow: var(--pf-ring); }
.pf-app .dt-length { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pf-app .dt-length label { margin: 0; color: var(--pf-muted); font: 600 13px var(--pf-ui); }
.pf-app .dt-length select.form-select { width: auto; margin-right: 0; min-height: 34px; padding-top: 4px; padding-bottom: 4px; border-radius: 999px; border-color: var(--pf-line-strong); font: 600 13px var(--pf-ui); }
.pf-app .dt-info { font: 500 13px var(--pf-ui); color: var(--pf-muted); padding: 0 !important; }
.pf-app .dt-paging .pagination { margin: 0; gap: 4px; }
.pf-app .dt-paging .page-link { border-radius: 999px !important; border: 1px solid transparent; min-width: 34px; height: 34px; display: grid; place-items: center; padding: 0 10px; color: var(--pf-dark); font: 600 13px var(--pf-ui); background: none; box-shadow: none !important; }
.pf-app .dt-paging .page-link:hover, .pf-app .dt-paging .page-link:focus { background: var(--pf-soft); color: var(--pf-dark); }
.pf-app .dt-paging .page-item.active .page-link { background: var(--pf-dark); border-color: var(--pf-dark); color: #fff; }
.pf-app .dt-paging .page-item.disabled .page-link { color: var(--pf-faint); background: none; }
.pf-app .dt-processing.card { border: 1px solid var(--pf-line); border-radius: 12px; box-shadow: var(--pf-shadow-lg); font: 600 14px var(--pf-ui); color: var(--pf-muted); }
.pf-app .dt-processing > div > div { background: var(--pf-accent) !important; }
.pf-app table.dataTable { margin: 0 !important; border-collapse: separate; border-spacing: 0; width: 100% !important; font-size: 14px; color: var(--pf-ink); }
.pf-app table.dataTable > thead { visibility: visible !important; }
.pf-app table.dataTable > thead > tr > th { background: var(--pf-head); color: var(--pf-muted); font: 700 12px/1.2 var(--pf-ui); letter-spacing: .04em; text-transform: uppercase; padding: 11px 16px; border-top: 0; border-bottom: 1px solid var(--pf-line); white-space: nowrap; vertical-align: middle; }
.pf-app table.dataTable > thead .dt-column-order { opacity: .5; }
.pf-app table.dataTable > tbody > tr > td { padding: 11px 16px; border-bottom: 1px solid var(--pf-line-2); vertical-align: middle; box-shadow: none !important; background-color: var(--pf-surface) !important; }
.pf-app table.dataTable > tbody > tr:last-child > td { border-bottom: 0; }
.pf-app table.dataTable > tbody > tr:hover > td { background-color: var(--pf-row-hover) !important; }
.pf-app table.dataTable td.dt-empty { color: var(--pf-muted); padding: 32px 16px; text-align: center; }
.pf-app table.dataTable .pf-r { text-align: right; }   /* site.css alinea a la izquierda las columnas de números y fechas */
/* site.css pinta por id (y así gana) la barra y la cabecera de estas tablas con el verde antiguo */
.pf-app :is(#tablaClientes_wrapper, #tablaComerciales_wrapper, #tablaPedidos_wrapper, #tablaProductos_wrapper) > .row:first-child { background-color: transparent; padding: 12px 14px; border-radius: 0; margin-bottom: 0; }
.pf-app :is(#tablaClientes, #tablaComerciales, #tablaPedidos, #tablaProductos, #tablaEstadisticasProveedores, #tablaEstadisticasComerciales) > thead > tr > th { background-color: var(--pf-head); }

/* select2 dentro de un campo pf (la lista desplegable va aparte, al final del body) */
:is(.pf-field, .pf-topbar) .select2-container--default .select2-selection--single,
:is(.pf-field, .pf-topbar) .select2-container--default .select2-selection--multiple { min-height: 40px; border-radius: 10px; border: 1px solid var(--pf-line-strong); font: 400 14.5px var(--pf-body); }
:is(.pf-field, .pf-topbar) .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; color: var(--pf-ink); padding-left: 12px; }
:is(.pf-field, .pf-topbar) .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }
:is(.pf-field, .pf-topbar) .select2-container--default .select2-selection--single .select2-selection__clear { height: 38px; margin-right: 26px; color: var(--pf-faint); font-size: 18px; font-weight: 400; }   /* la "×" de allowClear, centrada */
:is(.pf-field, .pf-topbar) .select2-container--default.select2-container--focus .select2-selection--multiple,
:is(.pf-field, .pf-topbar) .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--pf-accent); box-shadow: var(--pf-ring); }
:is(.pf-field, .pf-topbar) .select2-container--default .select2-selection--multiple .select2-selection__choice { border: 0; border-radius: 999px; background: var(--pf-soft); color: var(--pf-dark); font: 600 12.5px var(--pf-ui); }
.pf-app .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--pf-soft); color: var(--pf-ink); }

/* SweetAlert2 (avisos y confirmaciones de toda la app) */
.pf-app .swal2-popup { border-radius: 18px; font-family: var(--pf-body); color: var(--pf-ink); padding-bottom: 1.4em; }
.pf-app .swal2-title { font: 800 21px/1.25 var(--pf-display); color: var(--pf-title); }
.pf-app .swal2-html-container { font-size: 15px; color: var(--pf-ink); }
.pf-app .swal2-actions { gap: 10px; }
.pf-app .swal2-styled { margin: 0; border-radius: 999px !important; min-height: 40px; padding: 8px 20px; font: 600 14px var(--pf-ui); box-shadow: none !important; }
.pf-app .swal2-styled.swal2-confirm { background: var(--pf-btn) !important; color: var(--pf-btn-ink) !important; }
.pf-app .swal2-styled.swal2-confirm:hover { background: var(--pf-btn-hover) !important; }
.pf-app .swal2-styled.swal2-cancel, .pf-app .swal2-styled.swal2-deny { background: var(--pf-surface) !important; color: var(--pf-dark) !important; border: 1px solid var(--pf-line-strong) !important; }
/* Confirmar algo que no se puede deshacer (eliminar): Swal.fire({ …, customClass: { confirmButton: 'pf-swal-danger' } }) */
.pf-app .swal2-styled.swal2-confirm.pf-swal-danger { background: var(--pf-bad) !important; color: #fff !important; }
.pf-app .swal2-styled.swal2-confirm.pf-swal-danger:hover { filter: brightness(.92); }

/* --------------------------------------------------------------------------
   10. Movimiento: entrada suave de lo que aparece. Se apaga con "reducir movimiento"
   -------------------------------------------------------------------------- */
@keyframes pf-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pf-kpi, .pf-gem { animation: pf-in var(--pf-dur-slow) var(--pf-ease) backwards; }
.pf-kpi:nth-child(2) { animation-delay: 40ms; }
.pf-kpi:nth-child(3) { animation-delay: 80ms; }
.pf-kpi:nth-child(n+4) { animation-delay: 120ms; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }   /* una vuelta: un indicador de carga infinito a 1 ms parpadearía */
}

/* --------------------------------------------------------------------------
   11. Móvil y tableta: menú desplegable, zonas de toque de 44 px, tablas como
   tarjetas y ventanas desde abajo
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .pf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-gem { gap: 32px; }
}
@media (max-width: 991.98px) {
  :root { --pf-top: 64px; }
  .pf-sidebar { transform: translateX(-100%); }
  .pf-sidebar.is-open { transform: none; box-shadow: 24px 0 60px rgba(0, 0, 0, .25); }
  .pf-scrim.is-open { opacity: 1; pointer-events: auto; }   /* solo aquí: al girar a más ancho no se queda tapando la página */
  .pf-topbar { left: 0; padding: 0 12px 0 8px; gap: 8px; }
  .pf-topbar .pf-burger { display: inline-grid; width: 44px; height: 44px; font-size: 22px; color: var(--pf-ink); }
  .pf-fold { display: none; }
  .pf-title h1 { font-size: 19px; }
  .pf-title p { font-size: 12px; margin-top: 2px; }
  .pf-main { padding-left: 0; }
  .pf-top-logo { height: 36px; max-width: 120px; }
  .pf-page { padding: 16px 14px 72px; }
  .pf-grid-2, .pf-grid-3 { grid-template-columns: 1fr; }
  .pf-gem { grid-template-columns: 1fr; gap: 24px; padding-top: 4px; }
  .pf-gem-info { order: -1; }
  .pf-gem-media img { max-width: 520px; margin: 0 auto; }
  .pf-filters-sep { display: none; }
  .pf-dl { grid-template-columns: 1fr; gap: 2px; }
  .pf-dl dd { margin-bottom: 10px; }
}
@media (max-width: 767.98px) {
  .pf-btn { min-height: 44px; }
  .pf-btn-sm { min-height: 44px; padding: 8px 16px; }
  .pf-icon-btn { width: 44px; height: 44px; }
  .pf-tabs button, .pf-tabs a { min-height: 44px; }
  .pf-chip { height: 44px; }
  .pf-choice span { min-height: 44px; }
  .pf-nav a, .pf-help-nav button { min-height: 44px; }
  .pf-gem-actions > .pf-btn { flex: 1 1 100%; }
  .pf-top-actions .pf-btn { padding: 0 16px; }
  .pf-rutas { display: none; }
  .pf-kpi b { font-size: clamp(16px, 5vw, 21px); }   /* 1.234.567,89 € cabe en media pantalla de 360 px */
  .pf-vcard-main b { font-size: 28px; }
  .pf-search { flex: 1 1 100%; }
  .pf-toolbar-end { margin-left: 0; width: 100%; }
  .pf-toolbar-end > .pf-btn { flex: 1; }   /* "Nueva ruta", "Nuevo administrador": a lo ancho, como en las tablas de DataTables */
  .pf-stepper button { width: 44px; height: 44px; }
  .pf-input-sm { height: 44px; }
  select.form-select.pf-inline-select { min-height: 44px; }
  .pf-list-item { flex-direction: column; align-items: stretch; }
  .pf-list-actions > .pf-btn { flex: 1; }
  .pf-switch.is-inline { min-width: 44px; min-height: 44px; justify-content: center; }
  .pf-inline-check { min-height: 44px; }
}

/* Solo en pantalla: al imprimir en A4 vertical la página también mide menos de 768 px */
@media screen and (max-width: 767.98px) {
  /* Tablas de DataTables como tarjetas: cada celda "etiqueta · valor" (la etiqueta la pone
     datatables.base.js). No se aplica si la tabla usa Responsive (dtr-inline) */
  .pf-app .dt-container > .row:first-child > :is(.dt-layout-start, .dt-layout-end) { flex: 1 1 100%; }
  .pf-app .dt-container > .row:first-child > .dt-layout-end:not(:has(.pf-dt-acciones)) { display: none !important; }   /* sin acciones, sin hueco */
  .pf-dt-acciones > .pf-btn { flex: 1; }
  .pf-app .dt-container .dt-length { display: none !important; }   /* en el móvil no se cambia cuántos por página */
  .pf-app .dt-container .dt-length + .dt-info { padding-left: 0 !important; border-left: 0; }
  .pf-app table.dataTable:not(.dtr-inline) > thead { display: none; }
  .pf-app table.dataTable:not(.dtr-inline), .pf-app table.dataTable:not(.dtr-inline) > tbody { display: block; width: 100% !important; }
  .pf-app table.dataTable:not(.dtr-inline) > tbody > tr { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-bottom: 1px solid var(--pf-line); }
  .pf-app table.dataTable:not(.dtr-inline) > tbody > tr > td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 !important; border: 0 !important; text-align: right; background-color: transparent !important; min-height: 24px; }
  .pf-app table.dataTable:not(.dtr-inline) > tbody > tr > td[data-label]::before { content: attr(data-label); color: var(--pf-muted); font: 600 12.5px var(--pf-ui); text-align: left; flex: none; max-width: 45%; }
  .pf-app table.dataTable:not(.dtr-inline) > tbody > tr > td:first-child { display: block; text-align: left; font-weight: 600; font-size: 15px; }
  .pf-app table.dataTable:not(.dtr-inline) > tbody > tr > td:first-child::before { display: none; }
  .pf-app table.dataTable:not(.dtr-inline) > tbody > tr > td.dt-empty { justify-content: center; }
  .pf-app table.dataTable:not(.dtr-inline) > tbody > tr > td.dt-empty::before { display: none; }
  .pf-app table.dataTable:not(.dtr-inline) > tbody > tr > td:has(> .pf-row-actions) { padding-top: 8px !important; }
  .pf-app table.dataTable:not(.dtr-inline) > tbody > tr > td:has(> .pf-row-actions)::before { display: none; }
  .pf-app table.dataTable .pf-row-actions { justify-content: stretch; flex-wrap: wrap; width: 100%; }
  .pf-app table.dataTable .pf-row-actions > .pf-btn { flex: 1; }
  .pf-app .dt-container > .dt-layout-table ~ .row { flex-direction: column; align-items: center; }
  .pf-app .dt-container > .dt-layout-table ~ .row > * { margin: 0 !important; }

  /* Tablas simples (table.pf-table.pf-table-cards) como tarjetas: las celdas con data-label son
     "etiqueta · valor"; las demás ocupan la línea entera (el título de la tarjeta, opciones, botones) */
  table.pf-table.pf-table-cards > thead { display: none; }
  table.pf-table.pf-table-cards, table.pf-table.pf-table-cards > tbody { display: block; width: 100%; }
  table.pf-table.pf-table-cards > tbody > tr { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--pf-line); }
  table.pf-table.pf-table-cards > tbody > tr:last-child { border-bottom: 0; }
  table.pf-table.pf-table-cards > tbody > tr > td { display: block; padding: 0; border: 0; background: transparent; text-align: left; }
  table.pf-table.pf-table-cards > tbody > tr > td[data-label] { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 24px; text-align: right; }
  table.pf-table.pf-table-cards > tbody > tr > td[data-label]::before { content: attr(data-label); flex: none; max-width: 45%; text-align: left; color: var(--pf-muted); font: 600 12.5px var(--pf-ui); }
  table.pf-table.pf-table-cards > tbody > tr > td:has(> .pf-row-actions) { padding-top: 6px; }
  table.pf-table.pf-table-cards .pf-cell-main { font-size: 15px; }
  table.pf-table.pf-table-cards .pf-row-actions { justify-content: stretch; flex-wrap: wrap; }
  table.pf-table.pf-table-cards .pf-row-actions > .pf-btn { flex: 1; }
  /* Las que no pasan a tarjetas, con menos relleno para que quepa el texto (p. ej. las líneas de Ver pedido) */
  table.pf-table:not(.pf-table-cards) > thead > tr > th, table.pf-table:not(.pf-table-cards) > tbody > tr > td { padding: 10px 8px; }

  /* Ventanas desde abajo, a todo el ancho */
  .pf-modal .modal-dialog { margin: 0; min-height: 100%; display: flex; align-items: flex-end; max-width: none; }
  .pf-modal .modal-content { border-radius: 18px 18px 0 0; max-height: 92dvh; overflow: hidden; }
  .pf-modal .modal-body { overflow-y: auto; }
  .pf-modal .modal-header, .pf-modal .modal-body, .pf-modal .modal-footer { padding-left: 16px; padding-right: 16px; }
  .pf-modal .modal-footer > .pf-btn { flex: 1; }
  .pf-modal .modal-footer > .pf-spacer { display: none; }
  .pf-modal .modal-footer > :is(.pf-btn-danger-link, form:has(> .pf-btn-danger-link)) { order: 1; flex: 1 1 100%; }   /* eliminar, en su propia línea debajo (también dentro de su form) */
  .pf-modal .modal-footer > form > .pf-btn-danger-link { width: 100%; }
}

/* Al imprimir, sin menú ni botones de la cabecera: el título y la página */
@media print {
  body.pf-app { background: var(--pf-surface); }
  .pf-sidebar, .pf-scrim, .pf-topbar .pf-burger, .pf-top-actions { display: none !important; }
  .pf-topbar { position: static; height: auto; padding: 0 0 12px; border: 0; box-shadow: none; }
  .pf-main, .pf-page { padding: 0; }
}