/*
 * Persa Monterrico — hoja de estilos propia (spec 041-rediseno-interfaz).
 *
 * Se carga DESPUÉS de app.min.css (tema INSPINIA precompilado, sin fuentes SCSS en el repo).
 * Nunca se edita el tema: todo se redefine acá vía variables CSS (--ins-*) o clases propias
 * con prefijo `pm-`. Referencia visual: design/rediseno-ui/png/01-fundamentos.png.
 * Contrato: specs/041-rediseno-interfaz/contracts/tokens.md y componentes.md.
 *
 * Secciones:
 *   1. Tokens (color, tipografía, espaciado, radios, sombras)
 *   2. Base (cuerpo, títulos, enlaces, foco)
 *   3. Controles (botones, campos, checks/radios)
 *   4. Shell (sidebar, barra superior, encabezado de página, mensajes, contenido)
 *   5. Componentes (estado, KPI, chips, filtros, tablas, acciones de fila, resumen, acción fija)
 *   6. Utilidades y puntos de quiebre
 */

/* ============================================================================
 * 1. Tokens
 * Mismo selector que usa el tema para el skin "modern" (y su variante de menú
 * oscuro): igual especificidad, más tarde en la cascada → gana sin !important.
 * ========================================================================== */
html[data-skin="modern"],
html[data-skin="modern"][data-menu-color="dark"] {
  /* Paleta con propósito (sin cambios de tono salvo el texto débil) */
  --pm-primario: #7c5cff;
  --pm-primario-rgb: 124, 92, 255;
  --pm-primario-enfasis: #694ed8;
  --pm-primario-presionado: #5640bd; /* hover/presionado del botón primario */
  --pm-primario-suave: #ece7ff;
  --pm-primario-suave-borde: #cbbeff;
  --pm-sidebar: #1c1f2b;
  --pm-sidebar-texto: #8495ab;
  --pm-texto-fuerte: #313a46;
  --pm-texto: #4c4c5c;
  /* Reemplaza #9BA6B7 solo como texto. #687082 y no el #6B7385 del PNG: ese da 4,44:1 sobre
     el fondo #F7F7F7 (AA exige 4,5); este da 4,97:1 sobre blanco y 4,64:1 sobre el fondo. */
  --pm-texto-debil: #687082;
  --pm-fondo: #f7f7f7;
  --pm-borde: #e7e9eb;
  --pm-borde-campo: #8a93a3; /* ≥ 3:1 contra blanco */
  --pm-exito: #13ca6d;
  --pm-advertencia: #f2c24c;
  --pm-peligro: #fb5858;
  --pm-peligro-rgb: 251, 88, 88;
  --pm-info: #35b9e1;
  --pm-secundario: #1c8de3;
  --pm-neutro: #a1a9b1;

  /* Espaciado (8 pt), radios y sombras */
  --pm-esp-1: 8px;
  --pm-esp-2: 16px;
  --pm-esp-3: 24px;
  --pm-esp-4: 32px;
  --pm-esp-6: 48px;
  --pm-esp-10: 80px;
  --pm-radio-control: 8px;
  --pm-radio-tarjeta: 12px;
  --pm-radio-pildora: 999px;
  --pm-sombra-elevado: 0 1px 2px rgba(49, 58, 70, 0.08), 0 2px 8px rgba(49, 58, 70, 0.06);
  --pm-sombra-superpuesto: 0 8px 24px rgba(49, 58, 70, 0.16);
  --pm-alto-control: 48px;
  --pm-foco: 0 0 0 4px rgba(124, 92, 255, 0.4);

  /* Redefinición de las variables del tema */
  --ins-primary: var(--pm-primario);
  --ins-primary-rgb: var(--pm-primario-rgb);
  --ins-primary-text-emphasis: var(--pm-primario-enfasis);
  --ins-primary-bg-subtle: var(--pm-primario-suave);
  --ins-primary-border-subtle: var(--pm-primario-suave-borde);
  --ins-link-color: var(--pm-primario-enfasis);
  --ins-link-color-rgb: 105, 78, 216;
  --ins-link-hover-color: var(--pm-primario-enfasis);
  --ins-body-color: var(--pm-texto);
  --ins-secondary-color: var(--pm-texto-debil);
  --ins-heading-color: var(--pm-texto-fuerte);
  --ins-body-bg: var(--pm-fondo);
  --ins-border-color: var(--pm-borde);
  --ins-border-radius: var(--pm-radio-control);
  --ins-border-radius-lg: var(--pm-radio-tarjeta);

  /* Tipografía: Poppins (ya cargada por el tema) solo Regular y Bold */
  --ins-font-sans-serif: "Poppins", sans-serif;
  --ins-body-font-size: 16px;
  --ins-body-line-height: 1.5;
  --ins-font-size-base: 16px;
  --ins-font-size-md: 14px;
  --ins-font-size-lg: 16px;
  --ins-font-weight-medium: 400;
  --ins-font-weight-semibold: 700;
  --ins-font-weight-bold: 700;

  /* Sidebar 240 / 72 px y menú */
  --ins-sidenav-width: 240px;
  --ins-sidenav-width-sm: 72px;
  --ins-sidenav-bg: var(--pm-sidebar);
  --ins-sidenav-border-color: var(--pm-sidebar);
  --ins-sidenav-item-color: #c3ccd8;
  --ins-sidenav-item-hover-color: #fff;
  --ins-sidenav-item-hover-bg: #2a2e3d;
  /* Énfasis y no primario (decisión 2026-11-02): blanco 14 px Bold sobre #7C5CFF da 4,35:1. */
  --ins-sidenav-item-active-bg: var(--pm-primario-enfasis);
  --ins-sidenav-item-active-color: #fff;
  --ins-sidenav-item-font-size: 14px;
  --ins-sidenav-item-font-weight: 400;
  --ins-sidenav-sub-item-font-size: 14px;
  --ins-sidenav-sub-item-font-weight: 400;
  --ins-sidenav-item-padding-y: 12px;
  --ins-sidenav-item-icon-size: 1.375rem;

  /* Barra superior */
  --ins-topbar-height: 64px;
  --ins-topbar-bg: #fff;
}

/* ============================================================================
 * 2. Base
 * ========================================================================== */
body {
  font-size: 16px;
  line-height: 24px;
  color: var(--pm-texto);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: var(--pm-texto-fuerte);
  font-weight: 700;
}

/* Escala de encabezados sobre la del tema, que achica h5/h6 a 13,5/11 px. */
h1,
.h1 {
  font-size: 28px;
  line-height: 36px;
}

h2,
.h2,
h3,
.h3 {
  font-size: 20px;
  line-height: 28px;
}

h4,
.h4,
h5,
.h5 {
  font-size: 16px;
  line-height: 24px;
}

h6,
.h6 {
  font-size: 14px;
  line-height: 20px;
}

.fw-semibold,
.fw-medium {
  font-weight: 700 !important;
}

.text-muted,
.text-secondary,
.form-text {
  color: var(--pm-texto-debil) !important;
}

a {
  color: var(--pm-primario-enfasis);
}

:focus-visible {
  outline: none;
  box-shadow: var(--pm-foco) !important;
}

.pm-monto,
.pm-cifra {
  font-variant-numeric: tabular-nums;
}

.pm-monto {
  text-align: right;
  white-space: nowrap;
}

.pm-enlace {
  color: var(--pm-primario-enfasis);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 400;
  background: none;
  border: 0;
  padding: 0;
}

.pm-enlace:hover {
  color: var(--pm-primario-enfasis);
  text-decoration-thickness: 2px;
}

/* ============================================================================
 * 3. Controles
 * ========================================================================== */
.btn {
  --ins-btn-font-weight: 700;
  font-weight: 700;
  border-radius: var(--pm-radio-control);
}

.btn:not(.btn-sm, .btn-xs, .btn-icon, .btn-link, .btn-close) {
  min-height: var(--pm-alto-control);
  padding: 0.6875rem 1.25rem;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pm-esp-1);
}

/* Botón primario sobre el énfasis y no sobre el primario (decisión de la spec 041, T072):
   texto blanco de 16 px sobre #7C5CFF da 4,35:1 y AA exige 4,5 para texto normal; sobre
   #694ED8 da 5,7:1. Hover/presionado/foco bajan a #5640BD (7,3:1). */
.btn-primary {
  --ins-btn-bg: var(--pm-primario-enfasis);
  --ins-btn-border-color: var(--pm-primario-enfasis);
  --ins-btn-color: #fff;
  --ins-btn-hover-bg: var(--pm-primario-presionado);
  --ins-btn-hover-border-color: var(--pm-primario-presionado);
  --ins-btn-hover-color: #fff;
  --ins-btn-active-bg: var(--pm-primario-presionado);
  --ins-btn-active-border-color: var(--pm-primario-presionado);
  --ins-btn-active-color: #fff;
  --ins-btn-disabled-bg: var(--pm-primario-enfasis);
  --ins-btn-disabled-border-color: var(--pm-primario-enfasis);
}

.btn-primary:focus-visible {
  background-color: var(--pm-primario-presionado);
}

/* Secundaria: contorno del primario (Exportar a Excel, Más filtros, Cobrar global) */
.btn-outline-primary,
.pm-btn-secundario {
  --ins-btn-color: var(--pm-primario-enfasis);
  --ins-btn-border-color: var(--pm-primario-enfasis);
  --ins-btn-bg: #fff;
  --ins-btn-hover-color: var(--pm-primario-enfasis);
  --ins-btn-hover-bg: var(--pm-primario-suave);
  --ins-btn-hover-border-color: var(--pm-primario-enfasis);
  --ins-btn-active-color: var(--pm-primario-enfasis);
  --ins-btn-active-bg: var(--pm-primario-suave);
  --ins-btn-active-border-color: var(--pm-primario-enfasis);
  border-width: 2px;
}

/* Peligro: contorno en la vista, relleno solo en el diálogo que confirma */
.btn-outline-danger {
  border-width: 2px;
  --ins-btn-color: #c53030;
  --ins-btn-border-color: var(--pm-peligro);
  --ins-btn-hover-bg: rgba(var(--pm-peligro-rgb), 0.08);
  --ins-btn-hover-color: #c53030;
  --ins-btn-hover-border-color: var(--pm-peligro);
}

.form-control,
.form-select {
  font-size: 16px;
  color: var(--pm-texto-fuerte);
  border-color: var(--pm-borde-campo);
  border-radius: var(--pm-radio-control);
}

.form-control:not(.form-control-sm, textarea),
.form-select:not(.form-select-sm) {
  min-height: var(--pm-alto-control);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--pm-primario);
  box-shadow: var(--pm-foco);
}

.form-control::placeholder {
  color: var(--pm-texto-debil);
  /* Campos como Patente fuerzan mayúsculas en el valor; la pista se lee en tipo de oración. */
  text-transform: none;
}

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--pm-peligro);
  border-width: 2px;
}

.invalid-feedback {
  color: #c53030;
  font-size: 14px;
  font-weight: 700;
}

.form-label,
.col-form-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--pm-texto-fuerte);
  margin-bottom: 6px;
}

.form-text {
  font-size: 14px;
}

/* Texto auxiliar: 13 px, el tamaño de ayuda y dato secundario de los mockups (el tema
   lo deja en 12 px, fuera de la escala). */
small,
.small {
  font-size: 13px;
}

/* Choices.js (includes/choices_js.html): mismo control que .form-select — cuerpo 16 px,
   alto 48 px, borde de campo >= 3:1. El tema lo dejaba en 13 px y 41 px. */
.choices {
  margin-bottom: 0;
  font-size: 16px;
}

.choices__inner {
  display: flex;
  align-items: center;
  min-height: var(--pm-alto-control);
  padding: 4px 12px;
  font-size: 16px;
  line-height: 24px;
  background: #fff;
  border: 1px solid var(--pm-borde-campo);
  border-radius: var(--pm-radio-control);
}

.choices[data-type*="select-one"] .choices__inner {
  padding-bottom: 4px;
}

.choices__list--single {
  padding: 0 24px 0 4px;
}

.choices__input,
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  font-size: 16px;
  line-height: 24px;
}

.is-focused .choices__inner,
.is-open .choices__inner {
  border-color: var(--pm-primario);
}

.form-check-input {
  width: 1.25em;
  height: 1.25em;
  border-color: var(--pm-borde-campo);
}

.form-check-input:checked {
  background-color: var(--pm-primario);
  border-color: var(--pm-primario);
}

.input-group-text {
  font-size: 16px;
  border-color: var(--pm-borde-campo);
  background: #fff;
  color: var(--pm-texto-debil);
}

/* Opciones grandes (radios con tarjeta: medio de pago) */
.pm-opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.pm-opcion {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--pm-borde-campo);
  border-radius: var(--pm-radio-control);
  background: #fff;
  cursor: pointer;
  margin: 0;
}

.pm-opcion:has(input:checked) {
  border: 2px solid var(--pm-primario);
  background: var(--pm-primario-suave);
  font-weight: 700;
}

.pm-opcion input {
  margin: 0;
}

/* ============================================================================
 * 4. Shell
 * ========================================================================== */

/* Marca "P" */
.logo-mark {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 8px;
  background: var(--pm-primario);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pm-marca {
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}

/* Sidebar */
.sidenav-menu .side-nav-title.pm-grupo {
  padding: 18px 12px 6px;
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: #9aa7b8;
}

.sidenav-menu .side-nav-item .side-nav-link {
  border-radius: var(--pm-radio-control);
  min-height: 44px;
}

.sidenav-menu .side-nav-item.active > .side-nav-link,
.sidenav-menu .side-nav-item > .side-nav-link.active {
  background: var(--pm-primario-enfasis);
  color: #fff;
  font-weight: 700;
}

/* Padre de un submenú (Cobrar, Pagos): solo el subítem activo va relleno; el padre
   marca la sección con texto blanco Bold, sin fondo (diseño 04 y página 10). */
.sidenav-menu .side-nav-item.active > .side-nav-link[data-bs-toggle="collapse"] {
  background: transparent;
  color: #fff;
  font-weight: 700;
}

.pm-insignia {
  margin-left: auto;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--pm-radio-pildora);
  background: var(--pm-peligro);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pm-sidebar-pie {
  margin: 12px;
  padding: 10px 12px;
  border: 1px solid #343a4c;
  border-radius: var(--pm-radio-control);
  color: #c3ccd8;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.pm-sidebar-pie:hover {
  color: #fff;
  background: #2a2e3d;
}

html[data-sidenav-size="condensed"] .pm-sidebar-pie span,
html[data-sidenav-size="condensed"] .side-nav-title.pm-grupo {
  display: none;
}

/* Barra superior */
.app-topbar {
  border-bottom: 1px solid var(--pm-borde);
}

.pm-cobrar-global .dropdown-menu {
  min-width: 220px;
  box-shadow: var(--pm-sombra-superpuesto);
}

.pm-cobrar-global .dropdown-item {
  padding: 10px 16px;
}

.pm-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pm-primario-suave);
  color: var(--pm-primario-enfasis);
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.pm-usuario-correo {
  color: var(--pm-texto-fuerte);
  font-size: 14px;
}

/* Contenido */
.content-page > .container-fluid {
  max-width: 1600px;
  padding-top: var(--pm-esp-4);
  padding-bottom: var(--pm-esp-6);
}

.pm-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pm-esp-2);
  margin-bottom: var(--pm-esp-3);
}

.pm-page-title {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  color: var(--pm-texto-fuerte);
  margin: 0;
}

.pm-page-subtitle {
  margin: 4px 0 0;
  color: var(--pm-texto);
  font-size: 16px;
}

.pm-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Mensajes (avisos con punto + texto) */
.pm-aviso {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 0;
  border-radius: var(--pm-radio-control);
  padding: 14px 48px 14px 16px;
  color: var(--pm-texto-fuerte);
  background: #fff;
  box-shadow: var(--pm-sombra-elevado);
}

.pm-aviso::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--pm-info);
}

.pm-aviso.alert-success::before {
  background: var(--pm-exito);
}

.pm-aviso.alert-warning::before {
  background: var(--pm-advertencia);
}

.pm-aviso.alert-danger,
.pm-aviso.alert-error {
  background: #fde8e8;
}

.pm-aviso.alert-danger::before,
.pm-aviso.alert-error::before {
  background: var(--pm-peligro);
}

/* Tarjetas */
.card {
  border-radius: var(--pm-radio-tarjeta);
  border: 1px solid var(--pm-borde);
  box-shadow: none;
}

.card-header {
  background: #fff;
  border-bottom: 1px solid var(--pm-borde);
}

/* `.card .card-title` iguala la especificidad de la regla del tema (15 px), que ganaba a `.card-title`. */
.card .card-title,
.card-title,
.card-header h4,
.card-header h5 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--pm-texto-fuerte);
}

.pm-tarjeta {
  background: #fff;
  border: 1px solid var(--pm-borde);
  border-radius: var(--pm-radio-tarjeta);
  padding: var(--pm-esp-3);
}

.pm-seccion-titulo {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--pm-texto-fuerte);
  margin: 0 0 var(--pm-esp-2);
}

/* Filtros heredados (includes/filter_card.html) */
.card .card-header .ti-filter {
  color: var(--pm-primario-enfasis);
}

/* ============================================================================
 * 5. Componentes
 * ========================================================================== */

/* Estado: punto + palabra; solo "Vencida" con fondo 16 % y negrita */
/* Paginación: 14 px como el resto de la tabla (el tema la deja en 13,008 px). */
.pagination .page-link {
  font-size: 14px;
}

/* Insignias heredadas (.badge de Bootstrap/INSPINIA): 13 px Bold, como la insignia de estado de
   la tabla en los mockups. El tema las deja en 0.75em (13,5 px dentro de una celda). */
.badge {
  font-size: 13px;
  font-weight: 700;
}

.pm-estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--pm-texto-fuerte);
  white-space: nowrap;
}

.pm-estado::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pm-neutro);
  flex: none;
}

.pm-estado--exito::before {
  background: var(--pm-exito);
}

.pm-estado--advertencia::before {
  background: var(--pm-advertencia);
}

.pm-estado--info::before {
  background: var(--pm-info);
}

/* Transferencia (método de pago): el azul "secundario" de contracts/tokens.md. */
.pm-estado--secundario::before {
  background: var(--pm-secundario);
}

.pm-estado--peligro::before {
  background: var(--pm-peligro);
}

.pm-estado--destacado {
  padding: 4px 12px;
  border-radius: var(--pm-radio-pildora);
  background: rgba(var(--pm-peligro-rgb), 0.16);
  font-weight: 700;
}

/* Franja KPI */
.pm-kpi {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: var(--pm-esp-3);
  align-items: start;
  background: #fff;
  border: 1px solid var(--pm-borde);
  border-radius: var(--pm-radio-tarjeta);
  padding: var(--pm-esp-3);
  margin-bottom: var(--pm-esp-3);
}

.pm-kpi__protagonista {
  padding-right: var(--pm-esp-3);
  border-right: 1px solid var(--pm-borde);
}

.pm-kpi__etiqueta {
  font-size: 14px;
  line-height: 20px;
  color: var(--pm-texto);
}

.pm-kpi__protagonista .pm-kpi__valor {
  font-size: 28px;
  line-height: 36px;
}

.pm-kpi__valor {
  font-size: 22px;
  line-height: 32px;
  font-weight: 700;
  color: var(--pm-texto-fuerte);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.pm-kpi__detalle {
  font-size: 13px;
  color: var(--pm-texto-debil);
}

/* Chips de estado */
.pm-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: var(--pm-esp-2);
}

.pm-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--pm-borde-campo);
  border-radius: var(--pm-radio-pildora);
  background: #fff;
  color: var(--pm-texto-fuerte);
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
}

.pm-chip:hover {
  border-color: var(--pm-primario);
  color: var(--pm-texto-fuerte);
}

.pm-chip--activo {
  border: 2px solid var(--pm-primario);
  background: var(--pm-primario-suave);
  color: var(--pm-primario-enfasis);
  font-weight: 700;
}

.pm-chip .pm-estado {
  font-size: 14px;
}

/* Filtros compactos */
.pm-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: var(--pm-esp-2);
}

.pm-filtros__busqueda {
  position: relative;
  flex: 1 1 320px;
}

.pm-filtros__busqueda .ti-search {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--pm-texto-debil);
  pointer-events: none;
}

.pm-filtros__busqueda .form-control {
  padding-left: 46px;
}

.pm-filtros__principal {
  flex: 0 1 240px;
  min-width: 200px;
}

/* Con un rango de fechas como selector principal, el texto elegido ("02/11/2026 –
   12/11/2026") más el botón de atajos no cabe en 240 px. */
.pm-filtros__principal:has(.pm-rango) {
  flex-basis: 300px;
  min-width: 260px;
}

/* Período del dashboard en la cabecera (vista 05): flechas que lo mueven un mes y el
   rango al centro. */
.pm-periodo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-periodo .pm-rango {
  width: 300px;
}

.pm-periodo__flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pm-alto-control);
  height: var(--pm-alto-control);
  border: 1px solid var(--pm-borde-campo);
  border-radius: var(--pm-radio-control);
  background: #fff;
  color: var(--pm-primario-enfasis);
  font-size: 20px;
  text-decoration: none;
}

.pm-periodo__flecha:hover {
  background: var(--pm-primario-suave);
}

.pm-periodo__flecha:focus-visible {
  outline: none;
  box-shadow: var(--pm-foco);
}

.pm-periodo__flecha.is-disabled {
  color: var(--pm-neutro);
  border-color: var(--pm-borde);
  background: var(--pm-fondo);
}

@media (max-width: 767.98px) {
  .pm-periodo {
    width: 100%;
  }

  .pm-periodo .pm-rango {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
}

/* Texto libre en una celda (motivo de una solicitud): hasta dos líneas y "…"; el
   texto completo queda en el title. */
.pm-col-motivo {
  min-width: 240px;
  max-width: 420px;
  white-space: normal;
}

.pm-motivo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Acciones del panel "Más filtros": siguen a los campos y, si el panel es más largo que
   la pantalla, quedan pegadas abajo mientras se recorre. */
.pm-filtros__acciones {
  position: sticky;
  bottom: calc(-1 * var(--bs-offcanvas-padding-y, 1rem));
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1rem 0;
  background: var(--bs-offcanvas-bg, var(--bs-body-bg));
}

.pm-rango .js-fecha-rango-btn {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* El rango abre un calendario, no una lista: sin la flecha de .form-select (los atajos ya
   tienen la suya en el botón partido de al lado). */
.form-select.js-fecha-rango-btn {
  background-image: none;
  padding-right: 16px;
}

/* Botón de atajos pegado al campo: mismo borde de campo, para que ambos se lean como un control. */
.js-fecha-rango-btn + .dropdown-toggle-split {
  --ins-btn-color: var(--pm-texto-fuerte);
  --ins-btn-border-color: var(--pm-borde-campo);
  --ins-btn-bg: #fff;
  --ins-btn-hover-color: var(--pm-primario-enfasis);
  --ins-btn-hover-bg: var(--pm-primario-suave);
  --ins-btn-hover-border-color: var(--pm-borde-campo);
  --ins-btn-active-color: var(--pm-primario-enfasis);
  --ins-btn-active-bg: var(--pm-primario-suave);
  --ins-btn-active-border-color: var(--pm-borde-campo);
  border-width: 1px;
  min-width: 48px;
}

/* flatpickr: el tema pesa días y semana con --ins-font-weight-semibold (700 en esta escala). */
.flatpickr-calendar {
  font-size: 14px;
}

.flatpickr-day,
span.flatpickr-weekday,
.flatpickr-current-month input.cur-year {
  font-size: 14px;
  font-weight: 400;
}

.flatpickr-day.today,
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  font-weight: 700;
}

.pm-filtros__contador {
  min-width: 22px;
  height: 22px;
  border-radius: var(--pm-radio-pildora);
  background: var(--pm-primario-enfasis);
  color: #fff;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

/* Tablas (todas, vía django_tables2/pm_tabla.html y las tablas Bootstrap existentes) */
.table {
  font-size: 14px;
  --ins-table-color: var(--pm-texto);
}

.table > thead > tr > th,
.table > thead th {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--pm-texto-fuerte);
  background: #fafafb;
  white-space: nowrap;
}

.table > thead th a {
  color: inherit;
  text-decoration: none;
}

.pm-tabla-contenedor {
  background: #fff;
  border: 1px solid var(--pm-borde);
  border-radius: var(--pm-radio-tarjeta);
  overflow: hidden;
}

.pm-tabla {
  margin: 0;
}

/* Filas de 64 px y encabezado de 44 px (diseño 03/06): celdas 14/20 con 12 px arriba y
   abajo; una celda de dos líneas mide 12 + 20 + 20 + 12. */
.pm-tabla > :not(caption) > * > * {
  padding: 12px;
  line-height: 20px;
  vertical-align: middle;
}

/* 16 px solo en los bordes de la tabla; entre columnas, 12 + 12 (diseño 03/06: sin
   scroll horizontal a 1360 px). */
.pm-tabla > :not(caption) > * > :first-child {
  padding-left: 16px;
}

.pm-tabla > :not(caption) > * > :last-child {
  padding-right: 16px;
}

/* Una fecha no se parte en dos líneas (duplicaría el alto de la fila): las columnas que
   la necesitan llevan `.pm-sin-salto` en su celda. */
.pm-tabla td.pm-sin-salto,
.pm-tabla td.pm-sin-salto > div {
  white-space: nowrap;
}

.pm-tabla tbody tr {
  border-color: var(--pm-borde);
}

.pm-tabla .pm-celda-principal {
  font-weight: 700;
  color: var(--pm-texto-fuerte);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-tabla .pm-celda-sub {
  font-size: 13px;
  color: var(--pm-texto-debil);
  white-space: nowrap;
}

.pm-paginacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--pm-borde);
  background: #fff;
}

.pm-paginacion .pagination {
  margin: 0;
  gap: 6px;
}

.pm-paginacion .page-link {
  min-width: 40px;
  height: 40px;
  border-radius: var(--pm-radio-control) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pm-primario-enfasis);
  border: 0;
}

.pm-paginacion .page-item.active .page-link {
  background: var(--pm-primario-enfasis);
  color: #fff;
}

.pm-paginacion .page-item--nav .page-link {
  border: 1px solid var(--pm-borde);
  padding: 0 14px;
}

.pm-vacio {
  padding: var(--pm-esp-6) var(--pm-esp-3);
  text-align: center;
  color: var(--pm-texto);
}

/* Acciones de fila: enlace + "⋯" */
.pm-acciones-fila {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  white-space: nowrap;
}

.pm-acciones-fila__mas {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--pm-radio-control);
  background: transparent;
  color: var(--pm-texto-fuerte);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.pm-acciones-fila__mas:hover {
  background: var(--pm-primario-suave);
}

.pm-acciones-fila .dropdown-menu {
  box-shadow: var(--pm-sombra-superpuesto);
  min-width: 220px;
}

.pm-acciones-fila .dropdown-item {
  padding: 10px 16px;
}

.pm-acciones-fila .dropdown-item.disabled,
.pm-acciones-fila .dropdown-item:disabled {
  color: var(--pm-texto-debil);
  white-space: normal;
}

/* Tarjetas móviles de listados */
.pm-tarjeta-fila {
  background: #fff;
  border: 1px solid var(--pm-borde);
  border-radius: var(--pm-radio-tarjeta);
  padding: var(--pm-esp-2);
  margin-bottom: 12px;
}

.pm-tarjeta-fila__cabecera {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.pm-tarjeta-fila__titulo {
  font-weight: 700;
  font-size: 16px;
  color: var(--pm-texto-fuerte);
  margin: 0;
}

.pm-tarjeta-fila__recuadro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  background: #f4f5f8;
  border-radius: var(--pm-radio-control);
  padding: 12px;
  margin: 12px 0;
}

.pm-tarjeta-fila__acciones {
  display: flex;
  gap: 8px;
}

.pm-tarjeta-fila__acciones .btn {
  flex: 1;
}

/* Panel de resumen */
.pm-resumen {
  background: #fff;
  border: 1px solid var(--pm-borde);
  border-radius: var(--pm-radio-tarjeta);
  padding: var(--pm-esp-3);
}

.pm-resumen__titulo {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  margin: 0 0 12px;
}

.pm-resumen__fila {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 14px;
}

.pm-resumen__fila dd,
.pm-resumen__fila .pm-monto {
  margin: 0;
  color: var(--pm-texto-fuerte);
}

.pm-resumen__separador {
  border-top: 1px solid var(--pm-borde);
  margin: 12px 0;
}

.pm-resumen__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-weight: 700;
  color: var(--pm-texto-fuerte);
}

.pm-resumen__total .pm-monto {
  font-size: 28px;
  line-height: 36px;
}

.pm-resumen__aviso,
.pm-contexto {
  background: var(--pm-primario-suave);
  border-radius: var(--pm-radio-control);
  padding: 12px;
  font-size: 14px;
  color: var(--pm-texto-fuerte);
  margin: 12px 0 16px;
}

.pm-resumen__acciones {
  display: grid;
  gap: 12px;
  justify-items: center;
}

.pm-resumen__acciones .btn {
  width: 100%;
}

@media (min-width: 1360px) {
  .pm-resumen--pegajoso {
    position: sticky;
    top: calc(var(--ins-topbar-height) + 24px);
  }
}

/* Acción fija abajo (móvil) */
.pm-accion-fija {
  display: none;
}

@media (max-width: 767.98px) {
  .pm-accion-fija {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--pm-borde);
    box-shadow: 0 -4px 16px rgba(49, 58, 70, 0.08);
  }

  .pm-accion-fija .btn {
    flex: 1;
  }

  .pm-accion-fija__total {
    font-weight: 700;
    color: var(--pm-texto-fuerte);
    line-height: 1.2;
  }

  .pm-accion-fija__total .pm-monto {
    font-size: 20px;
    text-align: left;
  }

  body.pm-con-accion-fija .content-page {
    padding-bottom: 96px;
  }

  .pm-oculto-movil {
    display: none !important;
  }
}

/* Pasos de un asistente */
.pm-pasos {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--pm-esp-3);
  font-size: 14px;
  color: var(--pm-texto-debil);
}

.pm-pasos li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-pasos li + li::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--pm-borde-campo);
}

.pm-pasos__numero {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--pm-borde-campo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.pm-pasos li[aria-current="step"] {
  color: var(--pm-texto-fuerte);
  font-weight: 700;
}

.pm-pasos li[aria-current="step"] .pm-pasos__numero,
.pm-pasos li.pm-pasos--hecho .pm-pasos__numero {
  background: var(--pm-primario-enfasis);
  border-color: var(--pm-primario-enfasis);
  color: #fff;
}

/* Observación plegable */
.pm-plegable > summary {
  list-style: none;
  cursor: pointer;
  color: var(--pm-primario-enfasis);
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  margin: 8px 0;
}

.pm-plegable > summary::-webkit-details-marker {
  display: none;
}

.pm-plegable[open] > summary {
  margin-bottom: 12px;
}

/* ============================================================================
 * 6. Utilidades y puntos de quiebre
 * ========================================================================== */

/* Tablet: KPI en 2 columnas; columnas no prioritarias ocultas */
@media (max-width: 1023.98px) {
  .pm-kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pm-kpi__protagonista {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 1px solid var(--pm-borde);
    padding: 0 0 var(--pm-esp-2);
  }

  .pm-col-secundaria {
    display: none;
  }
}

/* Móvil */
@media (max-width: 767.98px) {
  .content-page > .container-fluid {
    padding-top: var(--pm-esp-2);
  }

  .pm-page-title {
    font-size: 26px;
    line-height: 32px;
  }

  .pm-page-actions .pm-btn-secundario,
  .pm-page-actions .btn-outline-primary {
    display: none;
  }

  .pm-page-actions .btn-primary {
    display: none;
  }

  .pm-kpi {
    display: none;
  }

  .pm-kpi-movil {
    display: block !important;
  }
}

.pm-kpi-movil {
  display: none;
}

/* Grilla de formulario + panel de resumen */
.pm-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pm-esp-3);
  align-items: start;
}

@media (min-width: 1360px) {
  .pm-form-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}

@media (min-width: 1600px) {
  .pm-form-grid {
    grid-template-columns: 720px 340px;
    justify-content: center;
  }
}
.pm-page-subtitle:empty { display: none; }

/* Marca del sidebar: `.logo-lg` lo oculta el tema en modo condensado; el flex va en un
   hijo para no pisar ese display con una utilidad !important. */
.pm-logo-completo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Mensualidad a pagar (cobro de arriendo, paso 2) */
.pm-mensualidad {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--pm-radio-control);
  margin-bottom: 12px;
}

.pm-mensualidad__marca {
  font-size: 22px;
  line-height: 1.2;
}

.pm-mensualidad--elegida {
  border: 2px solid var(--pm-primario);
  background: var(--pm-primario-suave);
  color: var(--pm-texto-fuerte);
}

.pm-mensualidad--elegida .pm-mensualidad__marca {
  color: var(--pm-primario-enfasis);
}

.pm-mensualidad--bloqueada {
  border: 1px solid var(--pm-borde);
  background: #f4f5f8;
  color: var(--pm-texto);
}

/* Radios dentro de .pm-opcion: el input de Django llega envuelto sin label propio */
.pm-opcion input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--pm-primario);
  flex: none;
}

legend.form-label {
  font-size: 14px;
}

/* Detalle de la cuenta del cobro (paso 3) */
.pm-detalle-cobro {
  margin: 0;
}

.pm-detalle-cobro > div {
  display: grid;
  grid-template-columns: minmax(160px, 38%) 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--pm-borde);
}

.pm-detalle-cobro dt {
  font-weight: 400;
  color: var(--pm-texto);
}

.pm-detalle-cobro dd {
  margin: 0;
  color: var(--pm-texto-fuerte);
}

/* Filtros activos removibles */
.pm-filtros-activos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -4px 0 var(--pm-esp-2);
  font-size: 14px;
}

.pm-filtro-activo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--pm-radio-pildora);
  background: var(--pm-primario-suave);
  color: var(--pm-primario-enfasis);
  text-decoration: none;
}

/* En la tarjeta móvil la acción principal es el botón; del menú de la celda solo queda "⋯" */
.pm-tarjeta-fila__menu .pm-acciones-fila > .pm-enlace {
  display: none;
}

.pm-rango .btn-group > .form-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background-image: none;
}


/* ============================================================================
 * Inicio (spec 041, vista 02)
 * ========================================================================== */
.pm-selector-mes {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--pm-borde-campo);
  border-radius: var(--pm-radio-control);
  background: #fff;
  min-height: var(--pm-alto-control);
}

.pm-selector-mes__flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  color: var(--pm-primario-enfasis);
  font-size: 20px;
  text-decoration: none;
}

.pm-selector-mes__flecha.is-disabled {
  color: var(--pm-neutro);
}

.pm-selector-mes__nombre {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  font-weight: 700;
  color: var(--pm-texto-fuerte);
  border-left: 1px solid var(--pm-borde);
  border-right: 1px solid var(--pm-borde);
  min-width: 170px;
  justify-content: center;
}

.pm-cobros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--pm-esp-2);
}

.pm-cobro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--pm-borde);
  border-radius: var(--pm-radio-tarjeta);
  color: var(--pm-texto-fuerte);
  text-decoration: none;
  box-shadow: var(--pm-sombra-elevado);
  transition: border-color 0.15s ease;
}

.pm-cobro:hover,
.pm-cobro:focus-visible {
  border-color: var(--pm-primario);
  color: var(--pm-texto-fuerte);
}

.pm-cobro__icono {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--pm-primario-suave);
  color: var(--pm-primario-enfasis);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.pm-cobro__textos {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pm-cobro__titulo {
  font-weight: 700;
  font-size: 16px;
}

.pm-cobro__descripcion {
  font-size: 14px;
  color: var(--pm-texto-debil);
}

.pm-inicio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pm-esp-3);
  align-items: start;
}

@media (min-width: 1024px) {
  .pm-inicio-grid {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  }
}

.pm-recaudado {
  display: grid;
  gap: var(--pm-esp-3);
}

@media (min-width: 768px) {
  .pm-recaudado {
    grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.2fr);
  }
}

.pm-barras {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: grid;
  gap: 14px;
  font-size: 14px;
}

.pm-barra {
  height: 6px;
  border-radius: var(--pm-radio-pildora);
  background: #ecedf1;
  margin-top: 6px;
  overflow: hidden;
}

.pm-barra__relleno {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--pm-primario);
}

.pm-atencion {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}

.pm-atencion li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pm-atencion .pm-estado {
  min-width: 64px;
}

/* Anchos de barra 0–100 % (sin estilos inline). */
.pm-ancho-0 { width: 0%; }
.pm-ancho-1 { width: 1%; }
.pm-ancho-2 { width: 2%; }
.pm-ancho-3 { width: 3%; }
.pm-ancho-4 { width: 4%; }
.pm-ancho-5 { width: 5%; }
.pm-ancho-6 { width: 6%; }
.pm-ancho-7 { width: 7%; }
.pm-ancho-8 { width: 8%; }
.pm-ancho-9 { width: 9%; }
.pm-ancho-10 { width: 10%; }
.pm-ancho-11 { width: 11%; }
.pm-ancho-12 { width: 12%; }
.pm-ancho-13 { width: 13%; }
.pm-ancho-14 { width: 14%; }
.pm-ancho-15 { width: 15%; }
.pm-ancho-16 { width: 16%; }
.pm-ancho-17 { width: 17%; }
.pm-ancho-18 { width: 18%; }
.pm-ancho-19 { width: 19%; }
.pm-ancho-20 { width: 20%; }
.pm-ancho-21 { width: 21%; }
.pm-ancho-22 { width: 22%; }
.pm-ancho-23 { width: 23%; }
.pm-ancho-24 { width: 24%; }
.pm-ancho-25 { width: 25%; }
.pm-ancho-26 { width: 26%; }
.pm-ancho-27 { width: 27%; }
.pm-ancho-28 { width: 28%; }
.pm-ancho-29 { width: 29%; }
.pm-ancho-30 { width: 30%; }
.pm-ancho-31 { width: 31%; }
.pm-ancho-32 { width: 32%; }
.pm-ancho-33 { width: 33%; }
.pm-ancho-34 { width: 34%; }
.pm-ancho-35 { width: 35%; }
.pm-ancho-36 { width: 36%; }
.pm-ancho-37 { width: 37%; }
.pm-ancho-38 { width: 38%; }
.pm-ancho-39 { width: 39%; }
.pm-ancho-40 { width: 40%; }
.pm-ancho-41 { width: 41%; }
.pm-ancho-42 { width: 42%; }
.pm-ancho-43 { width: 43%; }
.pm-ancho-44 { width: 44%; }
.pm-ancho-45 { width: 45%; }
.pm-ancho-46 { width: 46%; }
.pm-ancho-47 { width: 47%; }
.pm-ancho-48 { width: 48%; }
.pm-ancho-49 { width: 49%; }
.pm-ancho-50 { width: 50%; }
.pm-ancho-51 { width: 51%; }
.pm-ancho-52 { width: 52%; }
.pm-ancho-53 { width: 53%; }
.pm-ancho-54 { width: 54%; }
.pm-ancho-55 { width: 55%; }
.pm-ancho-56 { width: 56%; }
.pm-ancho-57 { width: 57%; }
.pm-ancho-58 { width: 58%; }
.pm-ancho-59 { width: 59%; }
.pm-ancho-60 { width: 60%; }
.pm-ancho-61 { width: 61%; }
.pm-ancho-62 { width: 62%; }
.pm-ancho-63 { width: 63%; }
.pm-ancho-64 { width: 64%; }
.pm-ancho-65 { width: 65%; }
.pm-ancho-66 { width: 66%; }
.pm-ancho-67 { width: 67%; }
.pm-ancho-68 { width: 68%; }
.pm-ancho-69 { width: 69%; }
.pm-ancho-70 { width: 70%; }
.pm-ancho-71 { width: 71%; }
.pm-ancho-72 { width: 72%; }
.pm-ancho-73 { width: 73%; }
.pm-ancho-74 { width: 74%; }
.pm-ancho-75 { width: 75%; }
.pm-ancho-76 { width: 76%; }
.pm-ancho-77 { width: 77%; }
.pm-ancho-78 { width: 78%; }
.pm-ancho-79 { width: 79%; }
.pm-ancho-80 { width: 80%; }
.pm-ancho-81 { width: 81%; }
.pm-ancho-82 { width: 82%; }
.pm-ancho-83 { width: 83%; }
.pm-ancho-84 { width: 84%; }
.pm-ancho-85 { width: 85%; }
.pm-ancho-86 { width: 86%; }
.pm-ancho-87 { width: 87%; }
.pm-ancho-88 { width: 88%; }
.pm-ancho-89 { width: 89%; }
.pm-ancho-90 { width: 90%; }
.pm-ancho-91 { width: 91%; }
.pm-ancho-92 { width: 92%; }
.pm-ancho-93 { width: 93%; }
.pm-ancho-94 { width: 94%; }
.pm-ancho-95 { width: 95%; }
.pm-ancho-96 { width: 96%; }
.pm-ancho-97 { width: 97%; }
.pm-ancho-98 { width: 98%; }
.pm-ancho-99 { width: 99%; }
.pm-ancho-100 { width: 100%; }

/* Dashboard (spec 041, vista 05): cuatro indicadores en tarjetas separadas */
.pm-kpi-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--pm-esp-2);
  margin-bottom: var(--pm-esp-3);
}

.pm-kpi-tile {
  background: #fff;
  border: 1px solid var(--pm-borde);
  border-radius: var(--pm-radio-tarjeta);
  padding: 20px;
}

.pm-kpi-tile .scope-tag {
  margin-left: 6px;
  font-size: 13px;
  vertical-align: middle;
}

/* Páginas de cuenta fuera del shell (spec 041, vista 09) */
.pm-entrada {
  background: var(--pm-fondo);
  min-height: 100vh;
}

.pm-entrada__contenedor {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--pm-esp-3) var(--pm-esp-2);
}

.pm-entrada__marca {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  color: var(--pm-texto-fuerte);
  margin-bottom: var(--pm-esp-3);
}

.pm-entrada__marca .logo-mark {
  width: 40px;
  height: 40px;
  font-size: 18px;
}

.pm-entrada__tarjeta {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--pm-borde);
  border-radius: var(--pm-radio-tarjeta);
  padding: var(--pm-esp-4);
}

.pm-entrada__pie {
  margin-top: var(--pm-esp-3);
  font-size: 14px;
  color: var(--pm-texto-debil);
}

.pm-campo-clave {
  position: relative;
}

.pm-campo-clave .form-control {
  padding-right: 96px;
}

.pm-campo-clave__mostrar {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-size: 14px;
}

/* Indicador de pasos en móvil: números y solo el rótulo del paso actual */
@media (max-width: 767.98px) {
  .pm-pasos li:not([aria-current]) .pm-pasos__texto {
    display: none;
  }

  .pm-pasos li + li::before {
    width: 12px;
  }
}

/* Modal de detalle de un pago abierto desde su listado (specs 012/013): entre el
   modal-dialog (500 px) y el modal-lg (800 px) de Bootstrap. */
.pm-modal-detalle {
  max-width: 620px;
}


/* ---------------------------------------------------------------------------
 * Listados en < 768 px (diseño 03/06 · 360)
 * ------------------------------------------------------------------------- */
.pm-chips {
  scrollbar-width: none;
}

.pm-chips::-webkit-scrollbar {
  display: none;
}

/* "⋯" de la tarjeta: botón cuadrado de 48 px con borde, como "Ver" a su lado. */
.pm-tarjeta-fila__menu .pm-acciones-fila__mas {
  width: 48px;
  height: 48px;
  border: 1px solid var(--pm-borde);
  background: #fff;
}

/* Logo de la barra superior: solo bajo 1024 px (contracts/ui-shell.md), cuando el
   menú lateral deja de verse; en escritorio el logo vive en el menú. */
.app-topbar .pm-logo-topbar {
  display: none !important;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.pm-marca-topbar {
  font-size: 16px;
  font-weight: 700;
  color: var(--pm-texto-fuerte);
  white-space: nowrap;
}

@media (max-width: 1023.98px) {
  .app-topbar .pm-logo-topbar {
    display: inline-flex !important;
  }
}

/* En < 768 px la barra lleva menú, logo y usuaria (diseño 02/03/06 · 360): "+ Cobrar" no
   cabe y sigue a mano en el menú lateral ("Cobrar") y en la acción fija de cada pantalla. */
@media (max-width: 767.98px) {
  .app-topbar .pm-cobrar-global {
    display: none;
  }
}

@media (max-width: 767.98px) {
  /* Con cifra protagonista bajo el título, esa línea reemplaza al subtítulo. */
  body:has(.pm-kpi-movil) .pm-page-subtitle {
    display: none;
  }

  .pm-filtros {
    flex-wrap: nowrap;
  }

  .pm-filtros__busqueda {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Botón secundario con borde de 2 px: el relleno vertical baja 1 px por lado para
   mantener los 48 px (la regla de .btn de la sección 3 pone 11 px). */
.btn.pm-btn-secundario:not(.btn-sm, .btn-xs, .btn-icon) {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

/* Deja que un hijo flex se achique y corte su texto con "…" (tarjetas, cabeceras). */
.min-w-0 {
  min-width: 0;
}

/* Email del contacto: se corta con "…"; el completo queda en el title. */
.pm-tabla .pm-celda-email {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}