/* ============================================================
   Cuentas por Pagar — Estilos de módulo
   ============================================================ */

/* ── Ancho de recibos CxP — sobrescribe el default de 700px de buildReciboHTML ── */
#ordenPagoCxP,
#comprobanteEgresoCxP {
    width: 850px !important;
}

/* ── Recibos: Orden de Pago y Comprobante de Egreso ── */

.cxp-recibo-campos {
    font-size: 13px;
    line-height: 1.25;
}

.cxp-recibo-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.cxp-recibo-label {
    font-weight: 600;
    white-space: nowrap;
}

.cxp-recibo-valor {
    flex: 1;
    border-bottom: 1.5px solid #000;
    padding: 4px;
    min-height: 12px;
}

.cxp-recibo-valor-bold {
    font-weight: bold;
}

.cxp-recibo-valor-nowrap {
    white-space: nowrap;
}

.cxp-recibo-fila-par {
    display: flex;
    gap: 12px;
    margin-bottom: 6px;
}

.cxp-recibo-grupo {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cxp-recibo-spacer {
    flex: 1;
}

.cxp-recibo-firmas {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.cxp-recibo-firma {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.cxp-recibo-firma-linea {
    width: 100%;
    border-bottom: 1.5px solid #000;
    min-height: 28px;
}

.cxp-recibo-firma-etiqueta {
    font-size: 10px;
    font-weight: 600;
}

.cxp-recibo-concepto-lineal {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: visible;
}

/* ============================================================
   Ancho del modal de Cuenta por Pagar
   ============================================================
   El ancho estaba escrito en el JS que arma el modal, donde no se puede
   ajustar por dispositivo. Aqui si, y cada tamaño de pantalla recibe el suyo
   en su propio archivo responsive.

   El alta y la edicion no piden lo mismo: el alta lleva conceptos, importes y
   fechas —una tabla que a 650px obliga a leer en columna—, mientras que editar
   son cuatro campos que en ancho completo quedarian perdidos.
   ============================================================ */
.cxp-modal-panel {
    max-width: 520px;
}

.cxp-modal-panel.cxp-modal--lg {
    max-width: 900px;
}


/* ── Filtros de la barra de herramientas ──────────────────────
   El filtro de concepto y el de mes van a la misma altura.

   Declaran el mismo relleno y el mismo tamaño de letra, pero no salían
   iguales: un input de tipo month reserva sitio para el control nativo
   de calendario y crece por su cuenta. Fijarles la altura y medir desde
   el borde deja de depender de eso. */
.cxp-filter-concepto,
.cxp-filter-mes {
    height: 32px;
    box-sizing: border-box;
}

/* Hasta 768px el sistema da 50px de alto a todo campo para que sea cómodo
   de pulsar, pero su lista de tipos no incluye month: el de concepto crecía
   y el de mes se quedaba. Se les iguala aquí, con el mismo corte que usa
   aquella regla, para que no quede un ancho suelto donde discrepen. */
@media screen and (max-width: 768px) {
    .cxp-filter-concepto,
    .cxp-filter-mes {
        height: auto;
        min-height: 50px;
    }
}