/* ═══════════ Gestión de Contratistas ═══════════
   La zona usa las clases del tablero de Ingreso Personal (ip-*). Aquí solo
   va lo propio: la pantalla del contratista en su usuario y la gráfica de
   cumplimiento por contratista. */

/* La cuenta del contratista: se lee como otra pantalla, por eso lleva marco */
.gc-portal {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--pi-ink) 3%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pi-ink) 10%, transparent);
}

.gc-portal__top { display: flex; flex-direction: column; gap: 0.2rem; }
.gc-portal__firm { color: var(--pi-ink); font-size: 1rem; font-weight: 800; }

.gc-portal__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.25rem 1rem;
}

.gc-portal__t { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.gc-portal__name { color: var(--pi-ink); font-size: 0.875rem; font-weight: 600; line-height: 1.35; }
.gc-portal__meta { color: var(--pi-ink-3); font-size: 0.75rem; line-height: 1.4; }
.gc-portal__st { font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
.gc-portal__up { align-self: flex-start; }

/* La carga en curso: una barra que se llena */
.gc-portal__bar {
    display: block;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pi-cyan, #22D3EE), #22c55e);
    transform-origin: left center;
    animation: ziCuenta 1.6s linear forwards;
}

/* La gráfica: dos barras por contratista, al empezar el mes y al cierre */
.gc-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.gc-legend__i { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--pi-ink-2); font-size: 0.75rem; }
.gc-legend__sw { display: inline-block; width: 0.9rem; height: 0.4rem; border-radius: 999px; }

.gc-chart { display: flex; flex-direction: column; gap: 0.9rem; }
.gc-chart__row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; gap: 0.75rem; }
.gc-chart__name { color: var(--pi-ink); font-size: 0.8125rem; font-weight: 700; line-height: 1.3; }
.gc-chart__bars { display: flex; flex-direction: column; gap: 0.3rem; }
.gc-chart__line { display: flex; align-items: center; gap: 0.5rem; }
.gc-chart__v { color: var(--pi-ink-2); font-size: 0.75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

.gc-bar { display: block; height: 0.5rem; border-radius: 999px; }
.gc-bar--a { background: color-mix(in srgb, var(--pi-ink) 28%, transparent); }
.gc-bar--b { background: linear-gradient(90deg, #1E7BFF, #22D3EE); }

/* Crédito de los modelos 3D (CC BY): discreto, bajo el pie del escenario */
.gc-credit {
    margin: 0.35rem 0 0;
    color: var(--pi-ink-3);
    font-size: var(--text-2xs);
    line-height: 1.4;
}