/* ============================================================
   PROVEEDORES — Tabla de gastos fijos
   Sistema de Administración de Condominios
   ============================================================
   Todo el aspecto de la tabla vive aquí. El JavaScript solo pone clases: no
   escribe ni un style= propio, porque un estilo dentro del bucle se repite en
   cada fila, no se puede reutilizar y gana sobre esta hoja, que es como se
   llegó a tener cinco tamaños de letra distintos en una misma fila.

   El tamaño y el relleno NO se declaran aquí: salen de .tabla-lineas en
   components.css, que es lo que comparten todas las tablas del sistema. Aquí
   solo va lo propio de esta —qué columna se alinea a la derecha, qué texto va
   en color— y nunca un tamaño suelto.
   ============================================================ */

/* ------------------------------------------------------------
   Contador de resultados, caja de la tabla y estado vacío
   ------------------------------------------------------------ */
.prov-contador {
    font-size: var(--tabla-texto-secundario);
    color: #6b7280;
    white-space: nowrap;
}

.prov-tabla-caja {
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Diez columnas no caben en un teléfono: la tabla sale del ancho y se
       desplaza aquí dentro, sin comprimir las columnas. */
    overflow-x: auto;
}

.prov-sin-datos {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}

.prov-sin-datos i {
    opacity: 0.3;
    margin-bottom: 15px;
}

.prov-sin-datos-titulo {
    margin: 0;
    font-size: var(--tabla-texto);
}

.prov-sin-datos-pista {
    margin: 5px 0 0;
    font-size: var(--tabla-texto-secundario);
}

/* ------------------------------------------------------------
   Estructura
   ------------------------------------------------------------ */
.prov-tabla {
    width: 100%;
    border-collapse: collapse;
}

.prov-tabla thead tr {
    background: var(--tabla-encabezado-bg);
    border-bottom: 2px solid var(--tabla-linea-encabezado, #94a3b8);
}

.prov-tabla th {
    text-align: left;
    font-weight: 600;
    color: var(--tabla-encabezado-texto, #1f2937);
}

.prov-tabla tbody tr {
    border-bottom: 1px solid var(--tabla-linea, #e5e7eb);
}

/* Las tres que no van alineadas a la izquierda. */
.prov-tabla .prov-col-contrato,
.prov-tabla .prov-col-diapago,
.prov-tabla .prov-col-modificacion,
.prov-tabla .prov-col-acciones {
    text-align: center;
}

.prov-tabla .prov-col-costo {
    text-align: right;
}

/* ------------------------------------------------------------
   Contenido de las celdas
   ------------------------------------------------------------ */
.prov-tabla .prov-col-codigo {
    font-family: monospace;
    font-weight: 600;
    color: #6366f1;
    white-space: nowrap;
}

.prov-tabla .prov-nombre {
    font-weight: 600;
    color: #0a2463;
}

.prov-tabla .prov-servicio {
    font-weight: 500;
}

.prov-tabla .prov-col-tipo,
.prov-tabla .prov-col-contrato,
.prov-tabla .prov-col-contacto,
.prov-tabla .prov-col-modificacion {
    color: #6b7280;
}

.prov-tabla .prov-col-costo {
    font-weight: 600;
    color: #059669;
}

.prov-tabla .prov-banco {
    margin-top: 2px;
}

.prov-tabla .prov-banco .fa-university {
    color: #2563eb;
}

.prov-tabla .prov-modificado-por .fa-user-edit {
    color: #8b5cf6;
}

.prov-tabla .prov-modificado-fecha {
    white-space: nowrap;
}

/* Sin día de pago se escribe "Según factura", que es texto y no una cifra: va
   como dato de apoyo, no como el número que sustituye. */
.prov-tabla .prov-sin-dia {
    font-size: var(--tabla-texto-secundario);
    color: #6b7280;
}

.prov-tabla .prov-vacio {
    color: #d1d5db;
}

/* ------------------------------------------------------------
   Botones de fila
   ------------------------------------------------------------ */
.prov-acciones {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.prov-acciones button {
    padding: 5px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
}

.prov-acciones .btn-editar   { background: var(--btn-editar); }
.prov-acciones .btn-eliminar { background: var(--btn-eliminar); }

/* ------------------------------------------------------------
   Quién modificó, en dos líneas como máximo
   ------------------------------------------------------------
   Los nombres largos —"Pablo Gutierrez Marmol"— repartían la columna en tres o
   cuatro líneas y estiraban de alto toda la fila, dejando el resto de campos
   flotando en el centro de una celda vacía.

   Se recorta a dos líneas con puntos suspensivos. El nombre completo queda en el
   título emergente, que es donde se consulta si hace falta.
   ------------------------------------------------------------ */
.prov-modificado-por {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Sin esto, una palabra más larga que la columna se sale en vez de partirse. */
    overflow-wrap: anywhere;
}

/* ── Bloques que se muestran y se ocultan ─────────────────────
   Su display vivía en el atributo style, así que el JavaScript
   tenía que recordar si tocaba grid o block al volver a
   mostrarlos. Ahora cada uno declara aquí el suyo y solo se
   pone o se quita la clase u-oculto. */

.prov-bancarios {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 12px;
    padding: 12px;
    gap: 12px;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    background: #f0f9ff;
}

/* Campos de recurrencia: vuelven a grid, no a block */
.prov-recurrencia { display: grid; }

.prov-panel-horas {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid #c4b5fd;
    border-radius: 8px;
    background: #faf5ff;
}

.prov-panel-nota { margin-bottom: 10px; }

/* Monto estimado del trabajo. Se muestra y se oculta con u-oculto. */
.prv-monto-estimado {
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid #86efac;
    border-radius: 6px;
    background: #f0fdf4;
}

/* Fila de un duplicado detectado: se marca en rojo pálido al apuntarla. */
.prv-fila-duplicado:hover { background: #fef2f2; }