/* ===== Indicadores: tarjeta blanca, franja de color e ícono en círculo ===== */
.indicadores {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.indicador {
    --color-indicador: var(--marca-medio);
    --fondo-indicador: var(--marca-claro);
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    border: none;
    border-left: 4px solid var(--color-indicador);
    border-radius: 0 var(--radio) var(--radio) 0;
    background: #fff;
    box-shadow: var(--sombra);
    text-align: left;
    transition: transform 0.15s, box-shadow 0.15s;
}

button.indicador:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(5, 45, 86, 0.12);
}

.indicador.seleccionado {
    box-shadow: 0 0 0 2px var(--color-indicador), var(--sombra);
}

.indicador-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--fondo-indicador);
    color: var(--color-indicador);
    font-size: 1.1rem;
}

.indicador-datos {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.indicador-titulo {
    font-size: 0.85rem;
    color: var(--texto-suave);
}

.indicador-valor {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--marca-oscuro);
}

.indicador-filtro {
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    font-size: 0.75rem;
    color: var(--color-indicador);
}

.indicador-abierto { --color-indicador: #E08A00; --fondo-indicador: #FFF3DC; }
.indicador-proceso { --color-indicador: #0A5FA8; --fondo-indicador: #E6F1FB; }
.indicador-finalizado { --color-indicador: #2E8B57; --fondo-indicador: #E7F5EC; }
.indicador-horas { --color-indicador: #7A5AF8; --fondo-indicador: #F1EDFF; }

@media (max-width: 900px) {
    .indicadores {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}