/* ============================================================
   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 {
    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;
}

/* ── 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;
}