/* ==========================================================================
   CARGA DE PRECIOS  (módulo `precios-carga`)
   ==========================================================================
   🔴 ESTE ARCHIVO SE LLAMABA `precios-module.css` Y ASÍ PISÓ EL DE OTRO MÓDULO.
   `precios-module.css` es el de MATERIAL DE VENTA, cuyo id interno también es
   `precios`. Al crear un archivo con ese nombre para este módulo, Material de
   Venta se quedó sin estilos y sus solapas y botones aparecieron crudos.
   Este módulo se llama `precios-carga`, así que su CSS se llama igual.
   ==========================================================================
   La pantalla del administrativo (subir la lista mensual) y el paso del
   vendedor que elige el plan y ve el valor.

   🔵 Todo sale de las variables de `theme.css`: petróleo `--color-primary`,
   terracota `--color-accent`, bordes de tarjeta de 2px y las sombras del
   sistema. Ni un color escrito a mano — si mañana cambia la marca, cambia
   theme.css y esto acompaña solo.

   Antes el módulo no tenía CSS propio: los desplegables y el botón de
   "Seleccionar archivo" salían con el estilo crudo del navegador, que no se
   parece a ninguna otra pantalla del sistema.
   ========================================================================== */

/* 🔵 A TODO EL ANCHO, A PROPÓSITO.
   Acá lo que se mira son tablas: la grilla de precios tiene 8 columnas y 52
   filas. Con el panel angosto había que deslizar en horizontal para ver los
   planes de la derecha, que es justo lo que hay que comparar contra el PDF.
   El resto de los módulos son formularios y listas, donde una medida cómoda
   de lectura tiene sentido; este no. */
.precios-grilla-panel { width: 100%; max-width: none; }

.pg-intro {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0 0 1.3rem;
}

/* --- La tarjeta de carga ------------------------------------------------- */

.pg-caja {
  background: var(--color-surface);
  border: 2px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 1.2rem 1.3rem;
}

.pg-caja-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
}
.pg-caja-titulo .icon-svg { width: 18px; height: 18px; }

/* --- Los tres selectores de arriba --------------------------------------- */

/* Cinco campos: prepaga, mes y año arriba; tipo y zona abajo. La zona ocupa
   las dos columnas que le quedan libres, porque es la única de texto libre y
   con una sola columna no entra ni el nombre de una provincia larga. */
.pg-form {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.7fr 1.4fr 1.6fr;
  gap: 0.9rem 1rem;
}

/* Por debajo de 1250px los cinco campos en una fila quedan ilegibles: pasan a
   dos filas, y la zona —la única de texto libre— se queda con lo que sobra. */
@media (max-width: 1250px) {
  .pg-form { grid-template-columns: 2fr 1.5fr 1fr; }
  .pg-form .campo-zona { grid-column: 2 / -1; }
}

.pg-form .campo,
.pg-selector .campo { display: block; }

.pg-form .campo > span,
.pg-selector .campo > span {
  display: block;
  margin-bottom: 0.35rem;

  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* 🔴 EL `input` TAMBIÉN, NO SOLO EL `select`.
   La primera versión estilaba únicamente los desplegables, así que el campo
   de zona salía angosto, con el borde fino del navegador y la mitad del texto
   de ayuda cortado: al lado de los otros cuatro parecía un error. */
.pg-form select,
.pg-form input[type="text"],
.pg-selector select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.62rem 0.75rem;

  font-family: inherit;
  font-size: 0.93rem;
  color: var(--color-text);

  background: var(--form-campo-fondo);
  border: 1.5px solid var(--form-campo-borde);
  border-radius: var(--radius-sm);
}
.pg-form select,
.pg-selector select { cursor: pointer; }

.pg-form input[type="text"]::placeholder {
  color: var(--color-text-muted);
  opacity: 0.75;
}
.pg-form select:focus,
.pg-form input[type="text"]:focus,
.pg-selector select:focus {
  outline: none;
  border-color: var(--form-campo-foco);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.pg-selector select:disabled {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* --- El archivo ----------------------------------------------------------
   🔴 El `<input type="file">` crudo es lo que más desentonaba: cada navegador
   lo dibuja distinto y ninguno se parece al resto del sistema. Se esconde el
   control y se estiliza la etiqueta, que es la única forma de tener un botón
   propio sin JavaScript de por medio. */

.pg-archivo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-border);
}

.pg-archivo-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;

  padding: 0.62rem 1.1rem;

  background: var(--boton-fondo);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--boton-firma);
  margin-bottom: 7px;

  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.pg-archivo-btn:hover {
  background: var(--boton-fondo-hover);
  box-shadow: var(--boton-firma-hover);
}
.pg-archivo-btn .icon-svg { width: 16px; height: 16px; }
.pg-archivo input[type="file"] { display: none; }

.pg-nombre {
  font-size: 0.88rem;
  color: var(--color-text);
  font-weight: 600;
  word-break: break-all;
}
.pg-leyendo {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* --- La vista previa ------------------------------------------------------ */

.pg-previa {
  margin-top: 1.4rem;
  padding: 1.2rem 1.3rem;

  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}
.pg-previa h3 {
  margin: 0 0 0.8rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
}

.pg-total {
  margin: 1rem 0;
  padding: 0.75rem 0.95rem;

  background: var(--color-primary-soft);
  border-radius: var(--radius-sm);

  font-size: 1rem;
  color: var(--color-text);
}
.pg-total strong { font-size: 1.25rem; color: var(--color-primary); }

/* --- Las tablas ----------------------------------------------------------- */

.pg-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;

  background: var(--color-surface);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.pg-tabla th,
.pg-tabla td {
  padding: 0.55rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.pg-tabla thead th {
  background: var(--color-surface-alt);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.pg-tabla tbody tr:last-child td { border-bottom: none; }
.pg-precio { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.pg-nota {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* --- Listas cargadas ------------------------------------------------------ */

.pg-cargadas { margin-top: 1.8rem; }
.pg-cargadas h3 {
  margin: 0 0 0.7rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

/* Borrar es destructivo: va en terracota, el color que el sistema reserva
   para lo que no se puede deshacer. */
.pg-cargadas .btn-mini {
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent);
  background: var(--color-surface);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.pg-cargadas .btn-mini:hover:not(:disabled) {
  background: var(--color-accent);
  color: #fff;
}
.pg-cargadas .btn-mini:disabled { opacity: 0.55; cursor: default; }

/* --- El paso del vendedor: el valor encontrado ---------------------------
   Es LO ÚNICO que el vendedor tiene que mirar de ese paso, así que va grande
   y en petróleo. Debajo, chiquito, el renglón exacto de la lista del que
   salió: si el número lo sorprende, lo coteja contra el PDF sin preguntar. */

.pg-selector { margin-top: 1.1rem; }
.pg-selector .campo { margin-bottom: 1rem; }

.pg-precio-hallado {
  margin-top: 1.2rem;
  padding: 1.1rem 1.25rem;

  background: var(--color-primary-soft);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}
.pg-precio-hallado > span {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.pg-precio-hallado > strong {
  display: block;
  margin: 0.2rem 0 0.35rem;
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.pg-precio-hallado > small {
  display: block;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

@media (max-width: 800px) {
  .pg-form { grid-template-columns: 1fr; }
  .pg-archivo { flex-direction: column; align-items: stretch; }
  .pg-archivo-btn { justify-content: center; }
  .pg-tabla { font-size: 0.82rem; }
  .pg-precio-hallado > strong { font-size: 1.45rem; }
}

/* --- La verificación ------------------------------------------------------ */

.pg-chequeo {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;

  padding: 1rem 1.15rem;
  margin: 1.2rem 0;

  border: 2px solid;
  border-radius: var(--radius-md);
}
.pg-chequeo .icon-svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.pg-chequeo strong { display: block; font-size: 1rem; }
.pg-chequeo span { display: block; font-size: 0.85rem; margin-top: 0.15rem; }

.pg-chequeo-ok {
  background: var(--color-success-soft);
  border-color: var(--color-success);
  color: var(--color-success);
}
.pg-chequeo-mal {
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.pg-problemas {
  margin: 0.55rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  line-height: 1.5;
}
.pg-problemas li { margin-bottom: 0.25rem; }

.pg-verif-bloque { margin-top: 1.2rem; }

.pg-sub {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text);
}

.pg-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.pg-tab {
  padding: 0.48rem 0.9rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
}
.pg-tab-on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* La tabla con la forma del PDF. El encabezado y la primera columna quedan
   fijos: en la fila 40 hay que seguir sabiendo de qué categoría y de qué plan
   se trata, o compararla contra el papel es imposible. */
.pg-scroll {
  overflow: auto;
  max-height: 60vh;
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
}

.pg-grilla {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.81rem;
  background: var(--color-surface);
}
.pg-grilla th,
.pg-grilla td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.pg-grilla thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface-alt);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.pg-grilla .pg-cat {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  text-align: left;
  font-weight: 600;
}
.pg-grilla thead .pg-cat { z-index: 3; background: var(--color-surface-alt); }
.pg-grilla .pg-n { text-align: right; font-variant-numeric: tabular-nums; }

.pg-celda-mal {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-weight: 700;
}

/* --- El probador ---------------------------------------------------------- */

.pg-probador {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 2fr auto;
  gap: 0.7rem;
  align-items: end;
}
.pg-probador .campo { display: block; }
.pg-probador .campo > span {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.pg-probador select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.7rem;
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--form-campo-fondo);
  border: 1.5px solid var(--form-campo-borde);
  border-radius: var(--radius-sm);
}
.pg-resu {
  padding: 0.6rem 1rem;
  background: var(--color-primary-soft);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pg-fila-ver > td { background: var(--color-surface-warm); padding: 1rem 1.1rem; }
.pg-ver { border-color: var(--color-primary) !important; color: var(--color-primary) !important; }
.pg-ver:hover { background: var(--color-primary) !important; color: #fff !important; }

@media (max-width: 800px) {
  .pg-probador { grid-template-columns: 1fr; }
  .pg-resu { text-align: center; }
}

/* --- Corregir la vigencia de una lista ya cargada ------------------------- */

.pg-editar-box {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.8rem;
  align-items: end;
}
.pg-editar-box .campo { display: block; }
.pg-editar-box .campo > span {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.pg-editar-box select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.7rem;
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--color-surface);
  border: 1.5px solid var(--form-campo-borde);
  border-radius: var(--radius-sm);
}

.pg-editar { border-color: var(--color-primary) !important; color: var(--color-primary) !important; }
.pg-editar:hover { background: var(--color-primary) !important; color: #fff !important; }

@media (max-width: 700px) {
  .pg-editar-box { grid-template-columns: 1fr; }
}

/* --- El plan que viene de otro paso --------------------------------------
   En Premedic el plan se eligió antes (`pm_plan`), así que este paso no lo
   vuelve a preguntar: lo muestra. Se dibuja parecido a un campo pero SIN
   parecer editable, y con la nota de dónde salió — si no, el vendedor lo
   busca para cambiarlo y no entiende por qué no puede. */

.pg-plan-fijo {
  padding: 0.7rem 0.85rem;
  margin-bottom: 1rem;

  background: var(--color-surface-alt);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-sm);
}
.pg-plan-fijo > span {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.pg-plan-fijo > strong {
  display: block;
  margin: 0.15rem 0 0.2rem;
  font-size: 1.05rem;
  color: var(--color-text);
}
.pg-plan-fijo > small {
  display: block;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* --- Los filtros del listado ---------------------------------------------
   Aparecen solo cuando hay más de una lista cargada: con una sola, cuatro
   desplegables que no filtran nada son ruido.

   Y cada desplegable aparece solo si hay MÁS DE UN valor distinto. Si todas
   las listas son de la misma prepaga, el filtro de prepaga no se dibuja. */

.pg-filtros {
  display: flex;
  align-items: flex-end;
  gap: 0.7rem;
  flex-wrap: wrap;

  padding: 0.8rem 0.95rem;
  margin-bottom: 0.9rem;

  background: var(--color-surface-warm);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
}

.pg-filtros .campo { display: block; min-width: 150px; flex: 1 1 150px; }
.pg-filtros .campo > span {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.pg-filtros select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.65rem;

  font-family: inherit;
  font-size: 0.88rem;
  color: var(--color-text);

  background: var(--color-surface);
  border: 1.5px solid var(--form-campo-borde);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.pg-filtros select:focus {
  outline: none;
  border-color: var(--form-campo-foco);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

/* Limpiar va en terracota: es la acción que deshace, no una más del grupo. */
.pg-limpiar {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;

  padding: 0.5rem 0.8rem;

  background: var(--color-surface);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-sm);

  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent);
  cursor: pointer;
  white-space: nowrap;
}
.pg-limpiar:hover { background: var(--color-accent); color: #fff; }
.pg-limpiar .icon-svg { width: 14px; height: 14px; }

@media (max-width: 700px) {
  .pg-filtros { flex-direction: column; align-items: stretch; }
  .pg-filtros .campo { min-width: 0; }
  .pg-limpiar { justify-content: center; }
}

/* --- Listas cargadas: el lote mensual -------------------------------------
   Lo que se repite —prepaga, tipo y vigencia— vive en el encabezado, y cada
   renglón queda solo con lo que lo distingue: la zona y cuántos precios trajo.

   El color del filete superior es el de la prepaga, que el sistema ya usa en
   los chips de las ventas. Es la misma señal en los dos lados. */

/* 🔵 EL COLOR DE LA PREPAGA VIVE EN EL CHIP DEL NOMBRE, no en la tarjeta.
   Es el MISMO chip que el sistema ya usa en facturación y en seguimiento, así
   que no se inventa una señal nueva: se reusa la que el equipo tiene aprendida.
   La tarjeta queda neutra para que doce lotes en pantalla no se vuelvan un
   semáforo, y el color aparece donde se lo busca: en el nombre. */
.pg-lote {
  background: var(--color-surface);
  border: 3px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 0.8rem;
}

/* 🔵 EL GROSOR NO CAMBIA AL ABRIR, SOLO EL COLOR.
   Si el borde engordara al desplegarse, toda la tarjeta se correría un par de
   píxeles y las de abajo saltarían con cada clic. Se mantiene en 3px y lo que
   cambia es el color de la prepaga más el halo. */
.pg-lote-abierto {
  border-color: var(--lote-color, var(--color-primary));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lote-color, #1B5A7D) 14%, transparent);
}

/* El encabezado es el botón que abre y cierra. Ocupa el ancho completo para
   que no haya que apuntarle a la flechita. */
.pg-lote-cab {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;

  width: 100%;
  padding: 0.85rem 1.1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  text-align: left;
  font-family: inherit;
  cursor: pointer;

  background: var(--color-surface);
}
.pg-lote-cab:hover { background: var(--color-surface-warm); }
.pg-lote-cab:focus-visible { outline: 3px solid var(--color-primary); outline-offset: -3px; }

/* La línea inferior solo cuando está abierto: cerrado, separa de la nada. */
.pg-lote-abierto .pg-lote-cab { border-bottom-color: var(--color-border); }

.pg-lote-flecha {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}
.pg-lote-abierto .pg-lote-flecha { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .pg-lote-flecha { transition: none; }
}

/* El chip: el color de la prepaga, blanco encima, píldora. Igual que el de las
   ventas. `--lote-color` lo pone el render con el color real de la prepaga. */
.pg-lote-prep {
  display: inline-block;
  padding: 0.2rem 0.65rem;

  background: var(--lote-color, var(--color-primary));
  border-radius: 20px;

  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
}
.pg-lote-meta { font-size: 0.82rem; color: var(--color-text-muted); }
.pg-lote-tot {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.pg-lote-tot b { color: var(--color-text); font-variant-numeric: tabular-nums; }

.pg-lote-fila {
  display: grid;
  grid-template-columns: 1fr 130px 74px 110px auto;
  align-items: center;
  gap: 1rem;

  padding: 0.55rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
}
.pg-lote > .pg-lote-fila:last-child { border-bottom: none; }
.pg-lote-fila:hover { background: var(--color-primary-soft); }
.pg-lote-fila-on { background: var(--color-primary-soft); }

.pg-lote-zona { font-weight: 600; font-size: 0.94rem; color: var(--color-text); }

/* 🔵 LA BARRA NO ES DECORACIÓN: muestra el peso de cada lista dentro del lote.
   Una zona con la mitad de precios que otra puede ser más chica, o puede ser
   un archivo que entró incompleto. Sin la barra hay que comparar los números
   a mano, de a uno. */
.pg-lote-barra {
  height: 7px;
  background: var(--color-surface-alt);
  border-radius: 20px;
  overflow: hidden;
}
.pg-lote-barra i { display: block; height: 100%; opacity: 0.55; }

.pg-lote-n {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--color-text);
}

/* 🔵 LA FECHA DE CADA ZONA, no la del lote.
   Es el dato que dice si esa lista se recargó o sigue siendo la vieja. Va con
   hora porque una misma lista se sube varias veces en el mismo día mientras
   se prueba, y con solo el día las dos cargas se ven idénticas. */
.pg-lote-fecha {
  text-align: right;
  font-size: 0.76rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pg-lote-acc { display: flex; gap: 0.3rem; }
.pg-lote-acc .btn-mini {
  padding: 0.28rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-muted);
  cursor: pointer;
}
.pg-lote-acc .btn-mini:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.pg-lote-acc .pg-borrar:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.pg-lote-acc .btn-mini:disabled { opacity: 0.55; cursor: default; }

/* Lo que se despliega —la verificación o el cambio de mes— queda dentro del
   lote, con fondo tibio, para que se lea como parte de esa fila y no como un
   bloque suelto. */
.pg-lote-panel {
  padding: 1rem 1.1rem;
  background: var(--color-surface-warm);
  border-bottom: 1px solid var(--color-border);
}

@media (max-width: 760px) {
  .pg-lote-fila { grid-template-columns: 1fr auto; row-gap: 0.5rem; }
  .pg-lote-barra { display: none; }
  .pg-lote-fecha { text-align: left; grid-column: 1 / -1; }
  .pg-lote-acc { grid-column: 1 / -1; }
  .pg-lote-acc .btn-mini { flex: 1; text-align: center; }
  .pg-lote-tot { margin-left: 0; }
}

/* --- La cuota de Omint, integrante por integrante -------------------------
   El detalle no es un lujo: en una prepaga que cobra por persona, un total
   suelto no se puede verificar. Con el renglón de cada uno —su valor de lista,
   su descuento y por qué— el vendedor puede explicarle la cuota al cliente y
   detectar si a alguien le tomó la banda de edad equivocada. */

.pg-cuota { margin-top: 1.2rem; }

.pg-cuota .pg-tabla { font-size: 0.86rem; }
.pg-cuota .pg-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-cuota .pg-motivo { font-size: 0.78rem; color: var(--color-text-muted); }

.pg-cuota-tot {
  margin-top: 0.9rem;
  padding: 0.9rem 1.1rem;

  background: var(--color-primary-soft);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
}

.pg-cuota-linea {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin-bottom: 0.3rem;
}
.pg-cuota-linea b { color: var(--color-text); font-variant-numeric: tabular-nums; }

.pg-cuota-final {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;

  padding-top: 0.55rem;
  border-top: 1.5px solid var(--color-primary);
}
.pg-cuota-final span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.pg-cuota-final strong {
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .pg-cuota .pg-motivo { display: none; }
  .pg-cuota-final strong { font-size: 1.35rem; }
}

/* La fila de un integrante que se cotizó sin su regla de descuento. Se marca
   en la tabla porque el aviso de arriba dice CUÁL es el problema, pero no
   QUIÉN lo tiene: con cuatro integrantes hay que poder ubicarlo de un vistazo. */
.pg-cuota .pg-fila-alerta td {
  background: var(--color-accent-soft, #FBF0ED);
}
.pg-cuota .pg-fila-alerta .pg-motivo {
  color: var(--color-accent);
  font-weight: 600;
}

/* --- El contador de cápitas ----------------------------------------------
   Arriba de la tabla de la cuota. Es el control más rápido que tiene el
   vendedor: si cargó dos adultos y un hijo, acá tiene que decir 3.

   Un integrante que no se pudo cotizar quedaba afuera de la suma y el error
   solo se veía revisando renglón por renglón. Con el contador se ve solo. */

.pg-capitas {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  flex-wrap: wrap;

  padding: 0.55rem 0.9rem;
  margin-bottom: 0.8rem;

  background: var(--color-surface-warm);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.pg-capitas strong {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.pg-capitas span { font-size: 0.85rem; color: var(--color-text-muted); }

/* Cuando no coincide con lo cargado, deja de ser informativo y pasa a ser
   una alerta: significa que la cuota está incompleta. */
.pg-capitas-mal {
  background: var(--color-accent-soft, #FBF0ED);
  border-color: var(--color-accent);
}
.pg-capitas-mal strong { color: var(--color-accent); }
.pg-capitas-mal em {
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent);
}

/* Un guión solo, en la columna de descuento, se lee como "acá falta algo".
   Decir "sin desc." es la misma información pero afirmada, no omitida. */
.pg-cuota .pg-sin-desc { color: var(--color-text-muted); font-size: 0.78rem; }