/* ============================================================
   REPORTES
   Sistema de Administración de Condominios
   ============================================================ */

/* Botón de exportar a PDF.
   El JavaScript lo mostraba unas veces con inline-flex y otras
   dejando el display vacío, que en un <button> es inline-block.
   Aquí queda en inline-flex, que es lo que buscaban los casos
   explícitos, y se oculta con la clase u-oculto. */

.rep-btn-pdf,
.rep-btn-excel,
.rep-btn-whatsapp {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: none;
    border-radius: 8px;
    background: #e53e3e;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.rep-btn-excel {
    background: #15803d;
}

/* El verde de WhatsApp, que es el mismo en todo el sistema. */
.rep-btn-whatsapp {
    background: #25d366;
}

.rep-btn-pdf:disabled,
.rep-btn-excel:disabled,
.rep-btn-whatsapp:disabled {
    opacity: 0.65;
    cursor: default;
}

/* ── Cabecera de Conceptos independientes ──────────────────────
   El título a la izquierda y, a la derecha, la casilla que decide
   si la sección viaja en el PDF. */

.rep-indep-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.rep-check-pdf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 5px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.rep-check-pdf:hover {
    border-color: #7c3aed;
    color: #5b21b6;
}

.rep-check-pdf input {
    margin: 0;
    accent-color: #7c3aed;
    cursor: pointer;
}

/* ── Qué pasó con la fecha "desde" ─────────────────────────────
   Lo escribe el buscador del mes más antiguo con saldo. En verde
   cuando movió la fecha o confirmó que no hay deuda; en ámbar
   cuando hay algo que mirar antes de fiarse del cero. */

.rep-aviso-desde {
    margin-top: 10px;
    padding: 8px 12px;
    border-left: 3px solid #0ea5e9;
    border-radius: 4px;
    background: #f0f9ff;
    color: #075985;
    font-size: 12px;
}

.rep-aviso-desde--aviso {
    border-left-color: #f59e0b;
    background: #fff8e1;
    color: #5d4400;
}

/* ── A quién se le manda el estado de cuenta ───────────────────
   Sale cuando la unidad tiene más de un responsable con teléfono.
   Es una lista corta —propietario, inquilino, representante—, no
   una tabla. */

.rep-wa-tarjeta {
    box-sizing: border-box;
    width: 90%;
    max-width: 420px;
    padding: 18px;
    border-radius: 12px;
    background: #fff;
}

.rep-wa-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rep-wa-titulo {
    margin: 0;
    color: #1e293b;
    font-size: 15px;
    font-weight: 700;
}

.rep-wa-titulo i {
    margin-right: 6px;
    color: #25d366;
}

.rep-wa-cerrar {
    border: none;
    background: none;
    color: #6b7280;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.rep-wa-ayuda {
    margin: 6px 0 14px;
    color: #64748b;
    font-size: 12px;
}

.rep-wa-opcion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.rep-wa-opcion:hover {
    border-color: #25d366;
    background: #f0fdf4;
}

.rep-wa-opcion > i {
    color: #25d366;
    font-size: 18px;
}

.rep-wa-opcion-datos {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rep-wa-nombre {
    color: #1e293b;
    font-size: 13px;
    font-weight: 700;
}

.rep-wa-detalle {
    color: #94a3b8;
    font-size: 11px;
}

/* Un inquilino que ya se fue sigue figurando como responsable. Se
   marca para que no se le mande sin darse cuenta. */
.rep-wa-inactivo {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 6px;
    background: #fef3c7;
    color: #92400e;
    font-weight: 700;
    text-transform: uppercase;
}

/* ── Celdas de las tablas de informe ───────────────────────────
   Venían de cuatro constantes del JavaScript que en realidad eran
   dos: celda y celdaRec tenían el mismo valor, y celdaMes y
   celdaGrupo también. */

.rep-celda {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
}

/* Las que encabezan un grupo llevan línea más marcada y el
   contenido arriba, porque al lado hay celdas de varias líneas. */
.rep-celda-grupo {
    padding: 8px 12px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}

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

/* Icono en recuadro traslúcido, sobre las cabeceras de color. */
.rep-icono-caja {
    padding: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    font-size: 16px;
}

/* Celda numérica de la tabla oscura de totales. */
.rep-celda-total {
    padding: 8px 10px;
    border: 1px solid #334155;
    text-align: right;
}

/* ── Paneles ──────────────────────────────────────────────────*/

.rep-panel {
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.rep-panel--con-aire {
    overflow: visible;
    margin-bottom: 18px;
    padding: 16px;
}

/* ── Estado vacío ─────────────────────────────────────────────*/

.rep-vacio { padding: 60px 20px; color: #94a3b8; text-align: center; }
.rep-vacio-icono { margin-bottom: 16px; font-size: 48px; opacity: 0.5; }

/* ── Edificio completo: resumen, morosos y una unidad por bloque ──────────
   Lo usan Estado de Cuenta por Unidad y Servicios Extraordinarios cuando se
   pide "Todos los apartamentos". */

.rep-resumen-edificio {
    margin-bottom: 14px;
    padding: 16px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/*
 * La tira de cifras, con el mismo patron que Cuentas por Pagar: una fila de
 * items separados por una linea, dentro de la tarjeta blanca del resumen.
 *
 * La tipografia y el color de las cifras NO se declaran aqui: los pone
 * u-stats-global desde stats-typography.css, que es lo que cada condominio
 * configura en AdminMaster. Ponerlos aqui los desconectaria de esa
 * configuracion, que es de donde venia que estas cifras se vieran distintas a
 * las de los demas modulos.
 */
.rep-stats-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

.rep-stat-item {
    flex: 1;
    min-width: 110px;
    padding: 4px 6px;
    border-right: 1px solid #e5e7eb;
    text-align: center;
}

/* El contador de apartamentos necesita menos espacio que los importes. Al
   estrecharlo, "Esperado" recibe el ancho suficiente para conservar RD$ y la
   cifra en una sola linea en escritorio. */
.rep-stat-item:first-child {
    flex: 0.6;
    min-width: 82px;
}

.rep-stat-item h3 {
    white-space: nowrap;
}

.rep-stat-item:last-child {
    border-right: 0;
}

.rep-stat-item h3,
.rep-stat-item p {
    margin: 0;
}

.rep-aviso-config {
    margin-top: 12px;
    padding: 10px 12px;
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    background: #fff8e1;
    color: #5d4400;
    font-size: 12px;
}

/* La lista para llamar por teléfono: lo primero que se busca al abrir el
   reporte de extraordinarios, así que va antes que el detalle. */
.rep-morosos {
    margin-bottom: 14px;
    padding: 16px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.rep-fila-sin-abonar {
    background: #fef2f2;
}

/* Cada apartamento, con corte de página al imprimir: una unidad por hoja, que
   es como se reparten los estados de cuenta. */
.rep-unidad {
    margin-bottom: 22px;
}

.rep-ficha-unidad {
    margin-bottom: 14px;
    padding: 16px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.rep-ficha-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
}

.rep-tabla-envoltura {
    overflow-x: auto;
    padding: 16px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Resumen de Ingresos al Mes: cifras claras sin bloques de color pesados. */
.rep-ingresos-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.rep-ingresos-kpi {
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-top: 3px solid var(--rep-kpi-color);
    border-radius: 10px;
    background: #fff;
    color: #1e293b;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.rep-ingresos-kpi--esperado { --rep-kpi-color: #16a34a; }
.rep-ingresos-kpi--pagado { --rep-kpi-color: #4f46e5; }
.rep-ingresos-kpi--pendiente { --rep-kpi-color: #dc2626; }
.rep-ingresos-kpi--saldado { --rep-kpi-color: #64748b; }

.rep-ingresos-kpi .rep-icono-caja {
    padding: 6px;
    color: var(--rep-kpi-color);
    font-size: 13px;
}

.rep-ingresos-kpi--esperado .rep-icono-caja { background: #dcfce7; }
.rep-ingresos-kpi--pagado .rep-icono-caja { background: #e0e7ff; }
.rep-ingresos-kpi--pendiente .rep-icono-caja { background: #fee2e2; }
.rep-ingresos-kpi--saldado .rep-icono-caja { background: #f1f5f9; }

.rep-ingresos-kpi .u-fs12-tenue {
    color: #64748b;
}

.rep-tabla-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rep-pastilla {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

/* ── Tabla con rayas ──────────────────────────────────────────────────────
   Filas largas de importes: sin una guia, la vista se salta de renglon al
   recorrerla hacia la derecha. */

.rep-tabla-cebra tbody tr:nth-child(even) {
    background: #f8fafc;
}

/*
 * La cabecera, sobre su columna.
 *
 * css/responsive/global/tables.css fuerza `text-align: left !important` sobre
 * TODO thead th del sistema a partir de 768px. Esta puesto porque casi todas
 * las tablas se arman desde JavaScript con el formato escrito en la propia
 * celda, y contra un estilo en linea una regla normal no puede.
 *
 * El efecto de lado es que una cabecera no puede colocarse sobre una columna
 * de importes: "Esperado" quedaba a la izquierda y sus cifras a la derecha, y
 * al leer no se sabia que cifra pertenecia a que columna. Se le gana por
 * especificidad, y solo en estas tablas: la regla global sigue valiendo para
 * el resto del sistema.
 */
.rep-tabla-cebra thead th.a-ta-right {
    text-align: right !important;
}

.rep-tabla-cebra thead th.a-ta-center {
    text-align: center !important;
}

/* ── De qué se compone el esperado ────────────────────────────────────────
   "Esperado 12,500" no se reconcilia con nada si no se ve que son 12,000 de
   una cosa y 500 de otra. */

.rep-incluidos {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

.rep-incluidos-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rep-incluido {
    padding: 4px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
}

.rep-incluido--total {
    border-color: #c4b5fd;
    background: #f5f3ff;
    color: #6d28d9;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   PADRÓN DE VOTACIÓN
   ══════════════════════════════════════════════════════════════ */

/* Un padrón se imprime para firmarlo en la mesa de la asamblea, así que la
   impresión es una acción de primera y no algo escondido en el menú del
   navegador. Mismo molde que los otros botones de la barra de filtros. */
.rep-btn-imprimir {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: none;
    border-radius: 8px;
    background: #475569;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.rep-btn-imprimir:disabled {
    opacity: 0.65;
    cursor: default;
}

/* ── Sin cuadro de coeficientes vigente ────────────────────────
   Ocupa la pantalla entera a propósito. La alternativa —una tabla vacía— se
   lee como "este condominio no tiene votantes", que es falso y además no dice
   qué hacer para arreglarlo. */

.rep-sin-cuadro {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 28px;
    border: 1px solid #fcd34d;
    border-radius: 12px;
    background: #fffbeb;
    color: #5d4400;
    text-align: center;
}

.rep-sin-cuadro-icono {
    margin-bottom: 16px;
    color: #d97706;
    font-size: 44px;
}

.rep-sin-cuadro-titulo {
    margin: 0 0 14px;
    color: #92400e;
    font-size: 17px;
    font-weight: 800;
}

.rep-sin-cuadro-texto {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.6;
}

.rep-sin-cuadro-accion {
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid #fcd34d;
    font-size: 13px;
    line-height: 1.6;
}

/* ── Avisos del padrón entero ──────────────────────────────────
   Arriba y desplegados, nunca detrás de un icono: quien convoca la asamblea
   tiene que leerlos antes de mirar una sola fila. */

.rep-avisos-padron {
    margin-bottom: 14px;
    padding: 12px 16px;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    background: #fff8e1;
    color: #5d4400;
}

.rep-avisos-padron-titulo {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 800;
}

.rep-avisos-padron-titulo i {
    margin-right: 6px;
    color: #d97706;
}

.rep-avisos-padron-lista {
    margin: 0;
    padding-left: 20px;
    font-size: 12px;
    line-height: 1.6;
}

/* ── Los tres estados de solvencia ─────────────────────────────
   'indeterminada' NO comparte color con 'solvente'. Una unidad al día y una
   unidad a la que no se le puede cobrar nada son cosas distintas, y pintarlas
   iguales le regala el voto a quien quizá lleva un año sin recibir un recibo. */

.rep-pastilla--solvente {
    background: #dcfce7;
    color: #16a34a;
}

.rep-pastilla--deuda {
    background: #fee2e2;
    color: #dc2626;
}

.rep-pastilla--indeterminada {
    background: #ede9fe;
    color: #6d28d9;
}

/* El tinte de la fila va acotado con la misma forma que la cebra —clase,
   tbody y tr— porque si no la cebra le gana en las filas pares y el estado
   solo se vería en la mitad de la tabla. */
.rep-tabla-cebra tbody tr.rep-fila-con-deuda {
    background: #fef2f2;
}

.rep-tabla-cebra tbody tr.rep-fila-indeterminada {
    background: #f5f3ff;
}

/* Los avisos de una unidad concreta: caben en su celda y se leen de un
   vistazo, sin abrir nada. */
.rep-aviso-unidad {
    margin-bottom: 3px;
    color: #b45309;
    line-height: 1.4;
}

.rep-aviso-unidad:last-child {
    margin-bottom: 0;
}