/* Página núcleo: Gestión integral del gasto telco/IT (Etapa 4 de REDISENO.md).
   Lo compartido vive en componentes.css; acá solo lo propio de esta página. */

/* La cabecera flotante de solucion vive ahora en componentes.css (la usan varias paginas) */

/* ==================== Reparto del trabajo (vos / nosotros) ==================== */

.tarjeta-oscura {
    background: linear-gradient(150deg, #0a2f66 0%, #06204a 75%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
}

.reparto-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.7rem 0;
}

.reparto-item + .reparto-item {
    border-top: 1px dashed rgba(0, 0, 0, 0.10);
}

.tarjeta-oscura .reparto-item + .reparto-item {
    border-top-color: rgba(255, 255, 255, 0.14);
}

.reparto-item .material-symbols-outlined {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* ==================== Indice de dolores ====================
   Retomado de la pagina vieja de control de recursos: el numero grande da un
   punto de entrada visual a cada item, que es lo que le faltaba a la lista de
   seis tarjetas iguales. El numero se enciende al pasar por encima. */

.dolor-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
    border-top: 1px solid #d8dde4;
    padding: 2.25rem 0 2.5rem;
}

.dolor-numero {
    font-size: clamp(3.25rem, 6vw, 4.5rem);
    font-weight: 900;
    line-height: 1;
    color: rgba(150, 160, 175, 0.42);
    flex-shrink: 0;
    user-select: none;
    font-variant-numeric: tabular-nums;
    transition: color var(--transicion-normal);
}

.dolor-item:hover .dolor-numero {
    color: var(--color-primary);
}