/* ============================================================
   PAGOS
   Estilos propios del módulo. Lo que aquí se define vivía escrito
   a mano en cada etiqueta del formulario, dentro del JavaScript
   que lo construye.
   ============================================================ */

/* ── Selector de meses y años ─────────────────────────────────
   Un botón que despliega un panel de casillas. Abierto o cerrado es
   estado, así que lo lleva una clase: el JavaScript se limita a
   ponerla y quitarla. */

.pago-selector {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.pago-selector-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    padding: 5px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}

/* Al corregir la fecha de un pago ya registrado se señala el campo
   que hay que revisar. */
.pago-selector-btn.con-error {
    border: 2px solid #dc2626;
    background: #fef2f2;
}

.pago-selector-flecha {
    font-size: 8px;
}

.pago-selector-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d1d5db;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.pago-selector-panel.abierto {
    display: block;
}

/* Abierto, el panel se despega del formulario y flota sobre él.
   Dentro del cuerpo del formulario quedaba cortado por su borde y
   había que bajar con la rueda para ver los últimos meses. Y no se
   arreglaba haciendo el formulario más alto: su máximo es el 90% de
   la pantalla y ya lo alcanzaba, así que no tenía dónde crecer.
   Flotando no depende de que quepa dentro.

   La posición y el ancho los pone _ubicarPanelSelector(), que los
   mide desde el botón: fijo a la pantalla, el panel ya no hereda ni
   la posición ni el ancho de su contenedor. */
.pago-selector-panel.abierto {
    position: fixed;
    left: auto;
    right: auto;
    z-index: 10001;
}

/* Cada fila es una etiqueta que envuelve su casilla, de modo que
   pulsar en cualquier punto de la fila la marca.

   En móvil el sistema da a toda etiqueta el formato de un rótulo de
   campo: 14px, negrita y margen inferior para separarse del campo
   que lleva debajo. Estas filas no rotulan nada, son la fila en sí,
   y aquella regla es global y con !important, así que no queda otra
   que responderle en los mismos términos. */
.pago-opcion {
    display: flex !important;
    align-items: center;
    gap: 6px !important;
    margin: 0 !important;
    padding: 3px 8px;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    cursor: pointer;
}

/* Misma razón: en móvil el sistema agranda toda casilla a 22px como
   zona cómoda para el dedo. Aquí la zona pulsable es la fila entera,
   y una casilla de ese tamaño estiraba las doce filas hasta dejar la
   lista sin caber. */
.pago-opcion input[type="checkbox"] {
    flex-shrink: 0;
    width: 13px !important;
    height: 13px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Cabecera del panel: marca o desmarca el año entero. */
.pago-opcion.es-cabecera {
    padding: 5px 8px;
    background: #0a2463;
    color: #fff;
    font-weight: 600 !important;
    border-bottom: 2px solid #d1d5db;
}

/* Con varios años seleccionados el panel se parte en grupos, uno por
   año, cada uno con su propia cabecera. */
.pago-grupo-anio {
    padding: 4px 8px;
    background: #0a2463;
    color: #fff;
    border-bottom: 1px solid #1e3a8a;
}

.pago-grupo-anio .pago-opcion {
    padding: 0;
    font-size: 10px !important;
    font-weight: 700 !important;
}

.pago-opcion.es-de-grupo {
    padding-left: 16px;
}

/* Meses que no se pueden cobrar. El motivo lo dice el distintivo. */
.pago-opcion.esta-pagado {
    opacity: 0.5;
    text-decoration: line-through;
}

.pago-opcion.esta-cubierto {
    opacity: 0.6;
}

.pago-distintivo {
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 3px;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
}

.pago-distintivo.es-pagado   { background: #059669; }
.pago-distintivo.es-abono    { background: #d97706; }
.pago-distintivo.es-cubierto { background: #0284c7; cursor: default; }
.pago-distintivo.es-combo    { background: #7c3aed; cursor: help; }
.pago-distintivo.es-suspendido { background: #64748b; cursor: help; }
.pago-distintivo.es-parcial    { background: #b45309; cursor: help; }


/* ── Aviso de servicio sin cobrar ─────────────────────────────
   Aparece tras registrar un pago cuando un servicio del combo quedó
   fuera, para preguntar qué hacer con esos meses. */

.susp-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.5);
}

.susp-modal {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.susp-modal-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #0a2463;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.susp-modal-body {
    padding: 14px 16px;
    font-size: 12px;
    color: #374151;
    line-height: 1.5;
}

.susp-modal-body p {
    margin: 0 0 8px;
}

/* Lo que pasa si no se hace nada. Es la consecuencia real de cerrar
   sin decidir, y sin decirla la pregunta parece opcional. */
.susp-modal-nota {
    padding: 7px 10px;
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    color: #92400e;
    font-size: 11px;
}

.susp-modal-campos {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--tabla-linea, #e5e7eb);
}

.susp-modal-campos label {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 600;
    color: #0a2463;
}

.susp-modal-campos input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-family: inherit;
    font-size: 12px;
}

.susp-modal-campos small {
    display: block;
    color: #6b7280;
    font-size: 10px;
    line-height: 1.4;
}

.susp-modal-pie {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    background: #f8fafc;
    border-top: 1px solid var(--tabla-linea, #e5e7eb);
}


/* ── Suspensiones de una unidad ───────────────────────────────
   Comparte cabecera y caja con el modal de arriba. Solo cambia lo
   que aquel no necesitaba: más ancho para el listado, botón de
   cerrar y una lista que puede crecer más que la pantalla. */

.susp-modal-ancho {
    max-width: 620px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
}

.susp-modal-ancho .susp-modal-body {
    overflow-y: auto;
}

.susp-modal-unidad {
    font-weight: 500;
    font-size: 11px;
    opacity: 0.75;
}

.susp-modal-x {
    margin-left: auto;
    border: 0;
    background: none;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    padding: 0 2px;
}

.susp-modal-x:hover {
    opacity: 1;
}

.susp-titulo {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.susp-titulo + * + .susp-titulo,
.susp-vacio + .susp-titulo {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--tabla-linea, #e5e7eb);
}

.susp-vacio {
    margin: 0;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 6px;
    color: #6b7280;
    font-style: italic;
}

.susp-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    margin-bottom: 6px;
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
}

.susp-item-datos {
    flex: 1;
    min-width: 0;
}

.susp-item-titulo {
    font-weight: 700;
    color: #0a2463;
}

.susp-item-periodo {
    margin-left: 6px;
    font-weight: 500;
    color: #b45309;
}

.susp-item-motivo {
    margin-top: 2px;
}

.susp-item-pie {
    margin-top: 2px;
    font-size: 10px;
    color: #6b7280;
}

.susp-item-anular {
    flex-shrink: 0;
    border: 1px solid #fca5a5;
    background: #fff;
    color: #dc2626;
    border-radius: 4px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.susp-item-anular:hover {
    background: #fee2e2;
}

.susp-form label {
    display: block;
    margin-bottom: 3px;
    font-weight: 600;
    color: #374151;
}

.susp-form select,
.susp-form input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-family: inherit;
    font-size: 12px;
}

.susp-form small {
    display: block;
    margin: -6px 0 10px;
    color: #6b7280;
    font-size: 10px;
    line-height: 1.4;
}

.susp-form-fila {
    display: flex;
    gap: 10px;
}

.susp-form-fila > div {
    flex: 1;
}

.susp-req {
    color: #dc2626;
}

.susp-form-btn {
    width: 100%;
    margin-top: 4px;
}

/* El acceso desde la rejilla del Estado de Cuenta. Queda apagado
   hasta que el puntero entra en la fila: es una acción poco
   frecuente y no debe competir con los meses. */
.ec-susp-btn {
    margin-left: 6px;
    color: #f59e0b;
    cursor: pointer;
    opacity: 0.35;
    transition: opacity 0.15s;
}

tr:hover .ec-susp-btn,
.ec-susp-btn:hover {
    opacity: 1;
}


/* ── Historial de Pagos: reparto de columnas ──────────────────
   El concepto es con diferencia el texto más largo y se llevaba el
   ancho que necesitan las columnas de fecha, que acababan partiendo
   la hora en dos líneas. Acotarlo se lo devuelve.

   Sin media query: en teléfono manda el reparto propio que hay en
   css/responsive/pagos/mobile.css. */

/* ── Celdas del Historial de Pagos ────────────────────────────
   Cada celda fijaba su propio tamaño —10px, y 9px la de registro—, así que la
   tabla se quedaba fuera del estándar de 12px por más que se ajustara la hoja.
   Aquí solo va lo propio de cada columna: el tamaño lo pone .data-table. */

#viewActivo .pago-enlace-recibo {
    color: #0a2463;
    text-decoration: underline;
    cursor: pointer;
}

/* Quién registró el pago: dato de apoyo bajo la fecha. */
#viewActivo .col-fregistro small {
    color: #6b7280;
    font-size: var(--tabla-texto-secundario);
}

/* Botón para corregir la fecha, junto a ella. Va pequeño y en gris: acompaña
   al dato, no compite con los botones de acción del final de la fila. */
#viewActivo .btn-editar-fecha {
    margin-left: 4px;
    padding: 1px 4px;
    font-size: 8px;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    cursor: pointer;
    background: #f3f4f6;
    color: #374151;
    vertical-align: middle;
}

/* ── Fecha de registro: completa aquí, plegada en el teléfono ─
   La celda trae las dos versiones y cada hoja enseña la suya. Aquí manda la
   completa; el ojo se esconde. En css/responsive/pagos/mobile.css es al revés.

   Se hace con dos elementos y no plegando uno solo porque el navegador ya no
   deja gobernar con display el contenido de un <details> cerrado: Chrome lo
   oculta por dentro, la regla no llegaba y la fecha desaparecía del
   escritorio dejando solo el botón de corregirla. */
.freg-completa {
    display: inline;
}

.freg-plegada {
    display: none;
}

#viewActivo .col-monto {
    font-weight: 600;
    color: #059669;
}

/* Fila que el buscador del Historial deja fuera. El JavaScript solo marca la
   clase: cómo se ve un estado es cosa de esta hoja, no suya. */
#pagosTableBody tr.fila-filtrada {
    display: none;
}

/* ── Botones de acción de cada fila ───────────────────────────
   Las medidas salen de las mismas variables que usa Cuentas por Pagar, para
   que un icono mida igual en las dos tablas. Iban escritas en cada botón con
   9px de icono y 2px de relleno —la mitad que en cualquier otra tabla—, que
   es lo que los hacía diminutos en el teléfono.

   Color plano y no degradado, también como en Cuentas por Pagar: el degradado
   era propio de esta tabla y de ninguna otra. */
#viewActivo .pagos-acciones {
    display: flex;
    gap: 4px;
    justify-content: center;
}

#viewActivo .col-acciones {
    white-space: nowrap;
    text-align: center;
}

#viewActivo .pagos-acciones button {
    padding: var(--btn-accion-padding-y) var(--btn-accion-padding-x);
    font-size: var(--btn-accion-icon-size);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
    transition: all 0.2s;
}

#viewActivo .pagos-acciones .btn-ver          { background: var(--btn-ver); color: var(--btn-ver-icon, #fff); }
#viewActivo .pagos-acciones .btn-imprimir     { background: var(--btn-imprimir, #7c3aed); }
#viewActivo .pagos-acciones .btn-comprobante  { background: var(--btn-comprobante, var(--btn-ver)); }
#viewActivo .pagos-acciones .btn-subir        { background: var(--btn-subir, var(--btn-editar)); }
#viewActivo .pagos-acciones .btn-anular       { background: var(--btn-eliminar); color: var(--btn-eliminar-icon, #fff); }

/* Ordenable. Se apoya en data-sort, que es lo que de verdad marca que la
   columna se puede ordenar, en vez de repetir el cursor en cada celda. */
#viewActivo thead th[data-sort] {
    cursor: pointer;
}

/* La casilla de seleccionar todos: columna estrecha y centrada. */
#viewActivo .col-select {
    width: 22px;
    text-align: center;
    padding: 4px 2px;
}

#viewActivo .col-select input {
    width: 13px;
    height: 13px;
    cursor: pointer;
}

#viewActivo .col-fregistro {
    width: 165px;
}

#viewActivo .col-fpago {
    width: 100px;
}

#viewActivo .col-concepto {
    width: 220px;
}

/* El ancho por sí solo no basta: en una tabla de reparto automático es una
   sugerencia, y el navegador se la recorta a la columna que puede partir su
   texto. Con nowrap la fecha y su icono dejan de poder separarse, así que
   tiene que reservarles el sitio; quien cede es el concepto, que va recortado
   a dos líneas y no lo necesita. */
#viewActivo .col-fregistro,
#viewActivo .col-fpago {
    white-space: nowrap;
}


/* ── Calendario de la fecha de pago ───────────────────────────
   Cuelga del campo. Si no cabe debajo, _ubicarCalendarioPago lo
   voltea o limita su alto; por eso aquí no se fija ninguno. */

.pago-calendario {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    width: 230px;
    padding: 8px;
    background: #fff;
    border: 1px solid #d1d5db;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.pago-calendario.abierto {
    display: block;
}

.pago-cal-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.pago-cal-nav {
    padding: 0 4px;
    border: none;
    background: none;
    color: #374151;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

/* Se deja a la vista, apagado: quitarlo movería las flechas de sitio
   al llegar al primer o al último mes disponible. */
.pago-cal-nav.deshabilitado {
    color: #d1d5db;
    cursor: default;
}

.pago-cal-mes {
    color: #0a2463;
    font-size: 11px;
    font-weight: 600;
}

.pago-cal-rejilla {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    text-align: center;
}

.pago-cal-dia-semana {
    padding: 2px 0;
    color: #9ca3af;
    font-size: 9px;
    font-weight: 600;
}

.pfday {
    padding: 3px 1px;
    border-radius: 3px;
    color: #374151;
    font-size: 10px;
    cursor: pointer;
}

.pfday.deshabilitado {
    color: #d1d5db;
    cursor: default;
}

.pfday.es-seleccionado {
    background: #0a2463;
    color: #fff;
}

.pfday.es-hoy {
    color: #0a2463;
    font-weight: 700;
}

/* ── Bloques que el JavaScript muestra y oculta ────────────────
   Su display estaba en el atributo. Escrito aquí, mostrar y
   ocultar es solo quitar o poner u-oculto, y el bloque vuelve
   a la forma que le toca. Ver docs/PLAN_LIMPIEZA_CSS.md */

.pg-descuento-total {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Barra de acciones que asoma al marcar pagos en la tabla. */
.pg-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid #c7d2fe;
    background: #eef2ff;
}

.pg-comprobante-preview {
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-top: 8px;
}

/* Los dos paneles que caen bajo un campo de búsqueda. Comparten
   forma; se distinguen en la altura y en cuánto pesan encima. */
.pg-panel-flotante {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    overflow-y: auto;
    border: 1px solid #d1d5db;
    background: #fff;
}

.pg-panel-flotante--pagador {
    z-index: 9999;
    max-height: 220px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Cuando el formulario aun no tiene pagador, casi todos sus bloques estan
   ocultos y el modal queda demasiado bajo para el desplegable. Mientras se
   busca, reserva altura real para que la lista no termine recortada por el
   overflow del propio formulario. */
#paymentFormBody.pg-busqueda-pagador-abierta {
    box-sizing: border-box;
    min-height: min(430px, 90vh);
}

.pg-panel-flotante--edificios {
    z-index: 10000;
    max-height: 300px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Campo del descuento fijo de una línea, que aparece al elegir ese
   tipo de descuento. */
.pg-desc-fijo {
    box-sizing: border-box;
    width: 80px;
    padding: 5px 4px;
    border: 1px solid #fca5a5;
    border-radius: 4px;
    background: #fef2f2;
    font-size: 10px;
}

/* El botón de registrar pago se oculta según la vista. Su display vive aquí
   para que quitar u-oculto lo devuelva a su sitio; el resto de su estilo
   sigue en el atributo porque usa las variables de borde y radio por
   condominio que .btn-form-nuevo todavía no cubre. Unificar ambos es otro
   trabajo: hay veintiún botones así repartidos por cinco módulos. */
.pg-btn-registrar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Resumen del descuento aplicado al pago. */
.pg-descuento-resumen {
    padding: 6px 10px;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    background: #f0f7ff;
    font-size: 11px;
}

/* ══════════════════════════════════════════════════════════════
   FORMAS QUE SE REPETÍAN EN EL ATRIBUTO
   ══════════════════════════════════════════════════════════════ */

/* Opción de una lista que se elige pulsando en toda la fila. */
.pg-opcion-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s;
}

/* Rótulo pequeño encima de un dato. */
.pg-eyebrow {
    margin-bottom: 1px;
    color: #9ca3af;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.pg-nota { color: #78716c; font-size: 10px; }

/* Botón de quitar, junto a lo que quita. */
.pg-btn-quitar {
    margin-left: 10px;
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    background: var(--btn-eliminar);
    color: #fff;
    font-size: 11px;
    cursor: pointer;
}

.pg-btn-quitar:hover { background: var(--btn-eliminar-light); }

/* Vista previa de un comprobante adjunto. */
.pg-miniatura {
    max-width: 200px;
    max-height: 150px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
}

/* Se ilumina al apuntarla, salvo que ya esté marcada: la marcada tiene su
   propio color y no debe cambiarlo al pasar por encima. Esa condición la
   hacía un if dentro del manejador —if(!this.querySelector('input').checked)—
   y ahora la dice el propio selector. */
.pg-opcion-fila:not(:has(input:checked)):hover { background: #f0f4ff; }

/* Filas de los dos buscadores desplegables. No llevan casilla dentro, así
   que se iluminan siempre. */
.buscador-pagador-item:hover,
.browse-apt-item:hover { background: #f0f4ff; }

/* ── Pestañas de la vista de pagos ─────────────────────────────
   El color de la activa lo escribía el JavaScript en las cuatro,
   una propiedad cada vez: apagaba las cuatro y encendía una.

   El redondeo NO viene aquí porque de verdad se calcula: depende
   de cuántas pestañas haya, y la primera y la última llevan las
   esquinas de fuera. Eso sigue en el atributo. */

.pagos-tab {
    padding: 4px 14px;
    border: none;
    border-radius: 0;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

/* Solo se redondean los extremos de la fila. Antes esto lo calculaba el
   JavaScript con cuatro constantes y un ternario por pestaña, mirando
   cuáles estaban visibles. Ser la primera o la última es un estado, y el
   CSS ya lo sabe decir: así se ajusta solo sea cual sea la combinación
   que deje el reparto de permisos. */
.pagos-tab:first-child {
    border-radius: 4px 0 0 4px;
}

.pagos-tab:last-child {
    border-radius: 0 4px 4px 0;
}

.pagos-tab--activa {
    background: #0a2463;
    color: #fff;
}

/* ── Botón de estación de cobro ────────────────────────────────
   Su color al pasar por encima lo ponían dos listeners de mouseover
   y mouseout añadidos desde el JavaScript, escribiendo borde y fondo
   uno a uno. Es un :hover de toda la vida. */

.estacion-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 8px;
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
}

.estacion-btn:hover {
    border-color: #0d2e7a;
    background: #eff6ff;
}

/* ── El campo del monto, según lo que se esté haciendo ─────────
   Amarillo mientras se teclea un abono parcial, gris cuando lo
   calcula un descuento y no se puede tocar, y sin color cuando es
   el monto base. */

.pg-monto--abono {
    border-color: #d97706;
    background: #fefce8;
}

.pg-monto--bloqueado { background: #f3f4f6; }

/* La pestaña de pagos privados se pone ámbar y no azul: no es una vista más,
   es la que enseña lo que no todos deberían ver. */
.pagos-tab--privados.pagos-tab--activa { background: #f59e0b; }

/* ── Opción elegida de una lista de radios ─────────────────────
   Se marcaba recorriendo TODAS las opciones en cada cambio y
   escribiendo fondo y borde en cada una. El selector lo sabe solo:
   la que contiene el radio marcado. */
.pg-opcion-fila:has(input:checked) {
    border-color: #fca5a5;
    background: #fef2f2;
}

/* Aviso de que hay que elegir algo. Se pone un momento y se quita. */
.pg-opcion-fila--pide-eleccion { border-color: #dc2626; }

/* El campo del monto cuando el importe no cuadra: rojo si sobra y ámbar si
   falta. Son avisos distintos y por eso no comparten color. */
.pg-monto--excede  { border-color: #dc2626; background: #fef2f2; }
.pg-monto--parcial { border-color: #d97706; background: #fefce8; }

/* El botón de observaciones se queda encendido mientras el panel está abierto. */
.pg-btn-obs          { background: #fff;     color: #0a2463; }
.pg-btn-obs--abierto { background: #0a2463; color: #fff; }

/* El icono de notas se enciende si la fila tiene alguna. */
.pg-icono-notas            { border-color: #d1d5db; color: #9ca3af; }
.pg-icono-notas--con-notas { border-color: #f59e0b; color: #f59e0b; }

/* La cabecera con el boton de volver es solo del telefono.
   La hoja base describe el escritorio, y en escritorio no se ve.
   responsive/pagos/mobile.css la saca con display: flex. */
.pagos-mobile-header {
    display: none;
}

/* Cabecera de Pagos en tablet/escritorio: título arriba y pestañas debajo. */
.pagos-module-header {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.pagos-header-top,
.pagos-header-title-row {
    display: flex;
    align-items: center;
}

.pagos-header-top {
    justify-content: space-between;
    gap: 10px;
}

.pagos-header-title-row {
    min-width: 0;
    gap: 10px;
}

.pagos-header-title-row #historialPagosTitle {
    margin: 0;
}

.pagos-header-tabs-row {
    display: flex;
    width: 100%;
}

.pagos-historial-title-mobile {
    display: none;
}

/* La unidad delante del nombre es solo del teléfono: en pantalla ancha
   ya tiene su propia columna. responsive/pagos/mobile.css la saca con
   display: inline. */
.ec-unidad-inline {
    display: none;
    font-weight: 700;
    color: #0a2463;
    margin-right: 2px;
}

/* El gris apagado dice que el propietario está inactivo. Antes venía del
   atributo con un ternario, así que era un estado sin nombre. */
.ec-unidad-inline.ec-unidad-inactiva {
    color: #94a3b8;
}

/* Los conceptos en línea aparte, también solo del teléfono.
   responsive/pagos/mobile.css los saca con display: block. */
.ec-conceptos-line {
    display: none;
    font-size: 8px;
    color: #3b82f6;
    font-style: italic;
    margin-top: 1px;
}

/* El historial conserva el concepto completo en escritorio. */
.concepto-historial-mobile {
    display: none;
}

/* En escritorio el agrupador no altera la fila existente de estadisticas. */
.pagos-stats-resumen {
    display: contents;
}

#btnEquitativo.btn-equitativo-activo {
    background: #16a34a !important;
}

/* Quitar un mes directamente desde el desglose es una acción exclusiva de la
   presentación móvil. */
.desglose-mes-quitar {
    display: none;
}

#paymentFormModal #btnGuardarPago:disabled {
    opacity: 0.45;
    cursor: not-allowed !important;
    filter: grayscale(0.35);
}

/* a-d-flex también declara display con prioridad; este estado debe ganar
   mientras todavía no existe un pagador seleccionado. */
#paymentFormModal #adjuntoFechaBloque.u-oculto {
    display: none !important;
}

/* La tarjeta del estado de cuenta es solo del teléfono: en pantalla
   ancha los mismos datos van en la tabla. responsive/pagos/mobile.css
   la saca con display: block. */
.ec-modal-card {
    display: none;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
}