/* ====================================================================
   LISTAS (Nómina y Facturas)
   Cada fila es un acordeón: la cabecera muestra lo principal,
   la flecha de la derecha abre su página y el cuerpo muestra el detalle
   ==================================================================== */

/* Buscador: campo largo que ocupa todo el ancho, menos la flecha */
.BUSCADOR {
    flex: 1;
    margin-right: 20px;
    border-radius: 20px;
}

/* Con los extremos redondos, el texto se aleja un poco más del borde */
.BUSCADOR input {
    padding: 10px 18px;
}

/* Filas separadas por 10px, igual que en la sección */
.LISTA {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Mensaje cuando la lista está vacía */
.LISTA-VACIA {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}

/* Botón de la derecha: abre la Ficha o el Documento
   Ocupa todo el alto de la fila; los márgenes negativos anulan el padding de la cabecera
   para que el fondo gris llegue hasta los bordes */
.FILA-IR {
    align-self: stretch;
    margin: -20px -20px -20px 20px;
    padding: 0 24px;
    border-radius: 0 8px 8px 0;
}

.ACORDEON-SECCION.abierto .FILA-IR {
    border-radius: 0 8px 0 0;
}

.FILA-IR:hover {
    background: var(--bg-menu-hover);
}

/* Esta flecha siempre apunta a la derecha, esté abierta o cerrada la fila
   (lleva .ACORDEON-SECCION para tener la misma precisión que ".ACORDEON-SECCION.abierto .FLECHA";
   como esta regla se carga después, gana) */
.ACORDEON-SECCION .FILA-IR .FLECHA {
    transform: rotate(-45deg) translateX(-2px);
}

/* Cuerpo desplegado: los datos en columnas que se acomodan solas */
.DETALLE {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 15px 20px;
}

.DETALLE div {
    display: flex;
    flex-direction: column;
}

/* Datos que solo se muestran en el celular (ver TELÉFONOS) */
.DETALLE .SOLO-CELULAR {
    display: none;
}

/* Estado (contrato o pago): solo el color de las letras */
.ESTADO {
    font-size: 14px;
}

.ESTADO.vigente,
.ESTADO.pagada {
    color: var(--estado-vigente-texto);
}

.ESTADO.por-vencer,
.ESTADO.parcial {
    color: var(--estado-por-vencer-texto);
}

.ESTADO.vencido,
.ESTADO.pendiente {
    color: var(--estado-vencido-texto);
}

.ESTADO.nota-credito {
    color: var(--text-secondary);
}

/* ====================================================================
   NÓMINA
   Tres columnas: Nombre/RUT, Ocupación/Área·CC, Estado/Tipo de contrato
   ==================================================================== */

/* Círculo con las iniciales: ocupa el lugar del ícono del acordeón */
.NOMINA-AVATAR {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-principal);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    margin-right: 20px;
    align-self: center;
}

/* Tres columnas de igual ancho */
.NOMINA-COLUMNAS {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: center;
}

.NOMINA-COLUMNA {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Si el texto no cabe, se corta con "…" en vez de saltar de línea */
.NOMINA-COLUMNA .ACORDEON-TITULO,
.NOMINA-COLUMNA .ACORDEON-DESCRIPCION,
.FACTURAS-FILA span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ====================================================================
   FACTURAS
   Cada documento en una sola línea: Tipo, RUT, Nombre, Folio, Fecha, Monto y Estado
   ==================================================================== */

/* El resumen empuja el botón "Cargar listado" hacia la derecha */
.FACTURAS-RESUMEN {
    margin-right: auto;
    align-self: center;
}

/* El botón no se parte en dos líneas en el celular */
#btnCargarFacturas {
    white-space: nowrap;
    align-self: flex-start;
}

/* El nombre toma todo el espacio que sobra; las demás columnas tienen ancho fijo */
.FACTURAS-FILA {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 30px 100px minmax(0, 1fr) 90px 90px 110px 105px;
    gap: 20px;
    align-items: center;
}

/* El monto va alineado a la derecha, como en una planilla */
.FACTURAS-MONTO {
    text-align: right;
}

/* Notas de crédito: restan, por eso su monto va en rojo */
.FACTURAS-MONTO.negativo {
    color: var(--estado-vencido-texto);
}

/* Total pagado y Saldo pendiente, debajo de las filas de Pagos (página Documento) */
.PAGOS-RESUMEN {
    margin-top: 15px;
    font-size: 14px;
    text-align: right;
}

/* Pagos por sobre el total: el aviso va en rojo */
.PAGOS-RESUMEN.excedido {
    color: var(--estado-vencido-texto);
}

/* ====================================================================
   TELÉFONOS
   Nómina: se oculta la columna del medio y la fecha de término
   Facturas: en la línea solo Nombre, Monto y Estado; RUT, Folio y Fecha pasan al detalle
   ==================================================================== */

@media (max-width: 600px) {
    .NOMINA-COLUMNAS {
        grid-template-columns: minmax(0, 1fr) 105px;
        gap: 10px;
    }

    .NOMINA-COLUMNA.MEDIO,
    .FECHA-TERMINO {
        display: none;
    }

    .NOMINA-AVATAR {
        margin-right: 12px;
    }

    .FILA-IR {
        margin-left: 10px;
        padding: 0 16px;
    }

    .DETALLE .SOLO-CELULAR {
        display: flex;
    }

    .FACTURAS-FILA {
        grid-template-columns: minmax(0, 1fr) 100px 80px;
        gap: 10px;
    }

    .FACTURAS-TIPO,
    .FACTURAS-RUT,
    .FACTURAS-FOLIO,
    .FACTURAS-FECHA {
        display: none;
    }
}